knockout.js - $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>

View 模型

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 时绑定(bind)，该 block 内的绑定(bind)范围是您正在迭代的实际项目。但有时您需要“转义”该范围并获取对该范围之外的某些属性/方法的引用。

使用$root访问 Root View 模型

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