KnockoutJS中变量$ data的起源和目的是什么?

时间:2011-10-20 16:06:11

标签: javascript html knockout.js

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时,该示例不再有效。

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

3 个答案:

答案 0 :(得分:64)

$ data是Knockout's Binding Contexts的一部分。

以下是所有内置变量:

  • $父
  • $家长
  • $根
  • $成分
  • $数据
  • $ index(仅在foreach绑定中可用)
  • $ parentContext
  • $ RAWDATA
  • $ componentTemplateNodes

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

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