Javascript KnockoutJS中变量$data的来源和用途是什么？

在本文中，我偶然发现下面的代码示例包含一个无法解释的变量

$data

视图（html）：

${$data}

视图模型（JavaScript）：

本教程不包含任何关于美元符号的用途以及该

$data

的来源的解释。变量

$data

没有定义，当我将

$data

的所有三个实例重命名为

$foobar

时，该示例不再有效

---

这里发生了什么魔法？

变量

$data

是一个内置变量，用于引用当前绑定的对象。在本例中，这是

viewModel.folders

数组中的一个元素

$数据是的一部分

以下是所有内置变量：

• $parent
• $parents
• $root
• $component
• $data
• $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);

。已选定{
颜色：红色；
}



var viewModel={
//资料
文件夹：[“收件箱”、“存档”、“已发送”、“垃圾邮件”]，
selectedFolder:ko.observable（“收件箱”），
//行为
选择文件夹：功能（文件夹）{
此.selectedFolder（文件夹）；
}    
};
window.mailViewModel=viewModel；
应用绑定（视图模型）；

请看一看

---

感谢您的简要解释。因此，

$data

变量仅在使用

foreach

时存在？您还可以使用模板声明中的数据参数提供其值。此外，如果data或foreach参数都不存在，则默认为模板的整个视图模型。是否有其他内置变量？他们真的应该解释一下，感谢链接。我没有在网站的导航栏中找到它。这非常有用！谢谢，好问题。我一直在努力解决这个问题，让它发挥作用不是问题。教程页面甚至提供了一个解决方案。

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