$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 绑定时，该块内的绑定范围是您正在迭代的实际项目。但有时您需要 'escape' 该范围并获取对该范围之外的某些属性 / 方法的引用。

使用$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

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

what does $data and $root mean in the following context

knockout.js

single-page-application