在KnockoutJS tutorials我偶然发现了以下包含无法解释的变量$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
的来源。变量$data
未定义,当我将$data
的所有三个实例重命名为$foobar
时,该示例不再有效。
这里发生了什么样的魔法?
答案 0 :(得分:64)
$ data是Knockout's Binding Contexts的一部分。
以下是所有内置变量:
答案 1 :(得分:39)
$data
变量是一个内置变量,用于引用当前绑定的对象。在示例中,这是viewModel.folders
数组中的元素之一。
答案 2 :(得分:0)
我让它发挥作用
.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);