Унаследованный шаблон нокаута, который я не могу получить

Question

Я новый разработчик в своей работе и унаследовал этот код в качестве своего первого проекта. Этот код работает в приложении, но когда я пытаюсь вручную добавлять значения, он ломается, и я не понимаю, почему.

Код шаблона - это уже существовавший фрагмент, а остальное - это попытка его реализовать.

Вот код:

<p>Rate: <strong data-bind="text: rate"></strong></p> 
<div data-bind="template: { name: 'percentage-template', data: { data: rate, enable: secure }}"></div> 

<script type="text/html" id="percentage-template"> 
    <div class="input-group"> 
     <input type="text" 
     class="form-control" 
     data-bind="vale: data, 
       precision: precision || 2, 
       isPercent: isPercent || true, 
       enable: enable || true" 
     /> 
     <span class="input-group-addon">%</span> 
    </div> 
</script> 

<script type="text/javascript"> 
    function MyViewModel() {  
     this.rate = ko.observable(.01); 
     this.secure = ko.observable(false); 
    } 

    ko.applyBindings(new MyViewModel()); 
</script> 

Вот вид часть, которая работает в приложении:

<div data-bind="template: { name: 'percentage-template', data: {data: Form.Current.Rate, enable: ViewSecurity.Edit}}"></div> 

Проблема в том, что при использовании шаблона, а поле ввода остается пустым и не показывает скорость.

EDIT: Я изменил пользовательские привязки в шаблоне значения, благодаря Bryan я также значения наблюдаемых

Answer 1

Шаблон создан для привязки к «данным», а в вашем случае вы передаете «rate» в эту привязку, но «rate» не настроен как наблюдаемый, поэтому он будет получать начальное значение только из вашей модели и не будет двусторонней привязки для улавливания обновлений. Если вы хотите, чтобы изменения вводились в текстовый ввод, чтобы обновить переменную «rate» на вашей модели, вам нужно сделать так, чтобы скорость была заметной.

this.rate = ko.observable(.01);