为什么这里需要 $root ？答案

【问题标题】：Why is $root required here?为什么这里需要 $root ？
【发布时间】：2012-06-03 14:13:41
【问题描述】：

我只是参考来自 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 以及为什么需要它？如果我删除它，它就不起作用了。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

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

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

【讨论】：

你的回答对我很有帮助，+1

【解决方案2】：

您需要查看binding contexts 页面。

$root

这是根上下文中的主视图模型对象，即最顶层的父上下文。相当于 $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

我认为这个链接示例会帮助你更多。

【讨论】：