Question

我刚刚参考了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，为什么需要它？如果我将其删除，则无效。

Answer 1

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

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

Answer 2

您需要查看binding contexts页面。

<强> $根

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

Answer 3

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

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

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

我认为此链接示例可以为您提供更多帮助。

为什么需要$ root？

3 个答案: