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);