$data 和 $root 在以下上下文中是什么意思

Question

我正在关注 knockoutjs 网站上的教程。这是其中的代码。

查看

<ul class="folders" data-bind="foreach: folders">
    <li data-bind="text: $data, css: { selected: $data == $root.chosenFolderId() },
               click: $root.goToFolder"></li>
</ul>

视图模型

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();
     self.goToFolder = function(folder) { self.chosenFolderId(folder); };
};

ko.applyBindings(new WebmailViewModel());

什么是 $data 和 $root？它们在哪里定义（它们来自哪里）？

Answer 1

当您使用foreach 绑定时，该块内的绑定范围就是您要迭代的实际项目。但有时您需要“转义”该范围并获取对该范围之外的某些属性/方法的引用。

• 使用$root 访问根视图模型
• 使用$parent 访问当前作用域的父对象

另外，您需要使用$data 来引用foreach 循环中的当前项目。例如：

var vm = {
    arr: [1,2,3,4,5,6]
};

<div data-bind="foreach: arr">
    <span data-bind="text: $data"></span>
</div>

见Documentation