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 ,这个例子不再起作用。

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

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

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

这里是所有的内置variables:

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

我做了它的工作

 .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/