Почему здесь требуется $root?

Я просто ссылаюсь на учебники от 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 и зачем он нужен? Если я удалю его, это не сработает.

ОТВЕТЫ

Ответ 1

$root относится к верхней модели в иерархии KnockoutJS (той, которую вы используете в .applyBindings). В вашем случае объект WebmailViewModel - это $root.

Это требуется, потому что когда вы используете foreach, то внутри цикла изменяется контекст. Все, что вы хотите запустить здесь, связано с элементом внутри цикла. Таким образом, вам нужно $root использовать функции/поля, определенные вне этого контекста (в вашем случае chosenFolderId - метод объекта WebmailViewModel).

Ответ 2

Вам нужно проверить страницу контексты привязки.

$корень

Это основной объект модели представления в корневом контексте, т.е. самый верхний родительский контекст. Это эквивалентно $parents [$ parents.length - 1].

Ответ 3

Контекст $root всегда относится к ViewModel верхнего уровня, независимо от циклов или других изменений в области. Это позволяет нам получить доступ к методам верхнего уровня для управления ViewModel.

В вашем примере $data представляют значения массива папок, такие как "Входящие", "Архив", "Отправленные" и "Спам". Но $root представляют корневые функции ViewModel, такие как chosenFolderId и goToFolder.

См. http://www.dotnet-tricks.com/Tutorial/knockout/bSKG240313-Understanding-Knockout-Binding-Context-Variable.html

Я думаю, что примеры ссылок помогут вам больше.