KnockoutJS中的$ data变量的来源和目的是什么？

在KnockoutJS教程中，我偶然发现了以下代码示例，其中包含无法解释的变量$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，示例不工作了。

这是什么魔术？

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

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

这是所有内置变量：

• $父母
• $父母
• $ root
• $组件
• $数据
• $ 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/