Блог

Я новичок в KnockOut JS, и я не могу найти причину, по которой привязка данных не работает при использовании jQuery text / x-jquery-tmpl.

Использование: jQuery 1.5.2; нокаут 1.3.0 бета

Я пытаюсь привязать неупорядоченный список к наблюдаемому массиву в модели представления и привязать флажки на объектах элементов списка к другому массиву ko.observble с привязкой ‘checked’.

Рабочий код шаблона:

 <ul data-bind="foreach: viewModel.booksFromServer()">
  <li>
    <input type="checkbox" data-bind="checked: viewModel.selectedBooks(), value: Id" />
  </li>
</ul>
  

Это не работает, т.Е. Отображается список, но выбранные значения не сохраняются в массиве:

 <script type=""text/x-jquery-tmpl" id="bookTemplate">
  {{each data}}
    <li> 
      <input type="checkbox" value="${Id}" data-bind="checked: selectedBooks" />
    </li>
  {{/each}}
</script>
  

В модели представления у меня есть:

 var viewModel ={
  selectedBooks = ko.observableArray(),
  booksFromServer = ko.observableArray()
  //other properties and methods
  showBookList: function(bookList){
    $("#bookTemplate").tmpl({data: bookList}).appendTo("#book_list");
  }
}
  

Что вы думаете? Заранее благодарю вас за помощь.
Piotr

При использовании шаблонов jQuery в Knockout вам никогда не захочется вызывать .tmpl напрямую, поскольку он не будет выполнять привязку данных или очищать какие-либо существующие привязки.

Вы хотели бы использовать template привязку: http://knockoutjs.com/documentation/template-binding.html .

При вызове showBookList вы можете заполнить observableArray, который связан с использованием привязки шаблона, и ваш пользовательский интерфейс будет соответствующим образом обновлен. Таким образом, ваша модель представления действительно работает только с данными и не зависит от структуры вашего пользовательского интерфейса (никаких ссылок на селекторы или элементы jQuery в коде модели представления).