Я просто ссылаюсь на учебники от knockout.js:
http://learn.knockoutjs.com/#/?tutorial=webmail
В пользовательском интерфейсе разметка:
<!-- Folders -->
<ul class="folders" data-bind="foreach: folders">
<li data-bind="text: $data,
css: { selected: $data == $root.chosenFolderId() },
click: $root.goToFolder"></li>
</ul>
а ViewModel:
function WebmailViewModel() {
// Data
var self = this;
self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
self.chosenFolderId = ko.observable();
// Behaviours
self.goToFolder = function(folder) { self.chosenFolderId(folder); };
};
ko.applyBindings(new WebmailViewModel());
Может ли кто-нибудь сказать мне, что такое $root и зачем он нужен? Если я удалю его, это не сработает.
$root относится к верхней модели в иерархии KnockoutJS (той, которую вы используете в .applyBindings). В вашем случае объект WebmailViewModel - это $root.
Это требуется, потому что когда вы используете foreach, то внутри цикла изменяется контекст. Все, что вы хотите запустить здесь, связано с элементом внутри цикла. Таким образом, вам нужно $root использовать функции/поля, определенные вне этого контекста (в вашем случае chosenFolderId - метод объекта WebmailViewModel).
Вам нужно проверить страницу контексты привязки.
$корень
Это основной объект модели представления в корневом контексте, т.е. самый верхний родительский контекст. Это эквивалентно $parents [$ parents.length - 1].
Контекст $root всегда относится к ViewModel верхнего уровня, независимо от циклов или других изменений в области. Это позволяет нам получить доступ к методам верхнего уровня для управления ViewModel.
В вашем примере $data представляют значения массива папок, такие как "Входящие", "Архив", "Отправленные" и "Спам". Но $root представляют корневые функции ViewModel, такие как chosenFolderId и goToFolder.
Я думаю, что примеры ссылок помогут вам больше.