12

我只是指来自 knockout.js 的教程：

http://learn.knockoutjs.com/#/?tutorial=webmail

在 UI 中，标记为：

<!-- 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 以及为什么需要它？如果我删除它，它就不起作用。

4

3 回答 3

29

$root指 KnockoutJS 层次结构中的顶级模型（您在 中使用的模型.applyBindings）。在您的情况下WebmailViewModel，对象是$root.

这是必需的，因为当您foreach在循环内使用 then 时，上下文会发生变化。您要在此处触发的所有内容都与循环中的元素相关联。因此，您需要$root使用在该上下文之外定义的函数/字段（在您的情况下chosenFolderId是WebmailViewModel对象的方法）。

于 2012-05-29T10:59:44.410 回答
5

您需要查看绑定上下文页面。

$根

这是根上下文中的主视图模型对象，即最顶层的父上下文。它相当于$parents[$parents.length - 1]。

于 2012-05-29T11:01:23.817 回答
0

无论循环或范围内的$root其他变化如何，上下文始终引用顶级 ViewModel。这允许我们访问用于操作 ViewModel 的顶级方法。

在您的示例$data中，表示文件夹数组值，例如“收件箱”、“存档”、“已发送”和“垃圾邮件”。但$root代表 ViewModel 的根函数，如chosenFolderId和goToFolder。

请参阅http://www.dotnet-tricks.com/Tutorial/knockout/bSKG240313-Understanding-Knockout-Binding-Context-Variable.html

我认为此链接示例将对您有所帮助。

于 2016-06-07T11:22:15.137 回答