title: Inherited Knockout template that I cannot get working
body: <p>I am a new dev at my work and inherited this code as my first project. This code is working in the app, but when I try and manually add values it breaks, and I don't understand why.</p>
  
  <p>The template code is the pre-existing piece, and the rest is me trying to implement it.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;p&gt;Rate: &lt;strong data-bind="text: rate"&gt;&lt;/strong&gt;&lt;/p&gt;
  &lt;div data-bind="template: { name: 'percentage-template', data: { data: rate, enable: secure }}"&gt;&lt;/div&gt; 
  
  &lt;script type="text/html" id="percentage-template"&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" 
          class="form-control" 
          data-bind="vale: data, 
                  precision: precision || 2, 
                  isPercent: isPercent || true, 
                  enable: enable || true"
          /&gt;
          &lt;span class="input-group-addon"&gt;%&lt;/span&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function MyViewModel() {     
          this.rate = ko.observable(.01);
          this.secure = ko.observable(false);
      }
  
      ko.applyBindings(new MyViewModel());
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the view portion that is working in the app:</p>
  
  <pre><code>&lt;div data-bind="template: { name: 'percentage-template', data: {data: Form.Current.Rate, enable: ViewSecurity.Edit}}"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>The problem is that when using the template, the input box remains empty and does not show rate.</p>
  
  <p>EDIT: I changed the custom binding within the template to value, thanks bryan
  I also made the values observables</p>