KnockoutJS中variables$ data的来源和目的是什么？

在KnockoutJS教程中，我偶然发现了下面的代码示例，其中包含一个无法解释的variables$data 。

视图（html）：

 <!-- Folders --> <ul class="folders" data-bind="template: { name: 'folderTemplate', foreach: folders }"></ul> <script type="text/html" id="folderTemplate"> <li data-bind="css: { selected: $data == mailViewModel.selectedFolder() }, click: function() { mailViewModel.selectFolder($data) }"> ${$data} </li> </script> 

视图模型（JavaScript）：

 var viewModel = { // Data folders: ['Inbox', 'Archive', 'Sent', 'Spam'], selectedFolder: ko.observable('Inbox'), // Behaviours selectFolder: function (folder) { this.selectedFolder(folder); } }; window.mailViewModel = viewModel; ko.applyBindings(viewModel); 

本教程不包含任何解释美元符号的用途以及$data来源。 variables$data是无处定义的，当我将$data所有三个实例重命名为$foobar ，这个例子不再起作用。

这里发生了什么样的魔法？

Answer 1

$ datavariables是一个内置variables，用于引用当前绑定的对象。 在这个例子中，这是viewModel.folders数组中的元素之一。

Answer 2

$ data是Knockout的绑定上下文的一部分 。

这里是所有的内置variables：

• $父
• $父母
• $根
• $组件
• $数据
• $ index（仅在foreach绑定中可用）
• $ parentContext
• $ RAWDATA
• $ componentTemplateNodes

Answer 3

我做了它的工作

 .selected { color:red; } <ul class="folders" data-bind="template: { name: 'folderTemplate', foreach: folders }"></ul> <script type="text/html" id="folderTemplate"> <li data-bind="css: { selected: $data == mailViewModel.selectedFolder() },text:$data, click: function() { mailViewModel.selectFolder($data) }"> </li> </script> var viewModel = { // Data folders: ['Inbox', 'Archive', 'Sent', 'Spam'], selectedFolder: ko.observable('Inbox'), // Behaviours selectFolder: function (folder) { this.selectedFolder(folder); } }; window.mailViewModel = viewModel; ko.applyBindings(viewModel); 

请看看http://jsfiddle.net/bowen31337/48RDd/