Привязка данных не работает с шаблонами, установленными программно из JavaScript - PullRequest
Новая
       17

Привязка данных не работает с шаблонами, установленными программно из JavaScript

0 голосов
/ 02 ноября 2011

Я новичок в 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");
  }
}

Что ты думаешь? Заранее спасибо за помощь. Петр

1 Ответ

1 голос
/ 02 ноября 2011

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

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

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

...