javascript KnockoutJS中变量$data的由来和用途是什么？

What is the origin and purpose of the variable $data in KnockoutJS?

提问by dokaspar

In the KnockoutJS tutorialsI stumbled upon the following code example that contains an unexplainable variable $data.

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

The View (html):

视图（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>

The View Model (JavaScript):

视图模型 (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);

The tutorial does not contain any explanation what that dollar sign is used for and where this $datacomes from. The variable $datais nowhere defined and when I rename all three instances of $datato $foobar, the example does not work anymore.

本教程不包含任何解释该美元符号的用途以及它的$data来源。该变量未$data在任何地方定义，当我重命名$datato 的所有三个实例时$foobar，该示例不再起作用。

What kind of magic is going on here?

这里正在发生什么样的魔法？

采纳答案by Thedric Walker

The $datavariable is a built-in variable used to refer to the current object being bound. In the example this is the one of the elements in the viewModel.foldersarray.

该$data变量是一个内置变量，用于引用当前绑定的对象。在示例中，这是viewModel.folders数组中的元素之一。

回答by Derek Smith

$data is part of Knockout's Binding Contexts.

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

Here are all the built-in variables:

以下是所有内置变量：

• $parent
• $parents
• $root
• $component
• $data
• $index (only available within foreach bindings)
• $parentContext
• $rawData
• $componentTemplateNodes

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

回答by bowen

i made it work

我让它工作了

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

please take a look at http://jsfiddle.net/bowen31337/48RDd/

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