Knockout.js 语法答案

【问题标题】：Knockout.js syntaxKnockout.js 语法
【发布时间】：2012-03-26 19:52:00
【问题描述】：

我是 Javascript MVC 框架 Knockout.js 的初学者

来自传统的 Javascript（以及一些 jQuery 经验），我在理解语法学习 Knockout.js 时遇到困难

考虑以下陈述；

观点：

<ul class="folders" data-bind="foreach: folders">
<li data-bind="text: $data, 
               css: { selected: $data == $root.chosenFolderId() },
               click: $root.goToFolder"></li></ul>

查看模型：

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();

    // Behaviours    
    self.goToFolder = function(folder) { self.chosenFolderId(folder); };    
};

您能否解释一下这些语句的作用（特别是 $data、$root）？还有self.chosenFolderId(folder); 的声明是做什么的？

【问题讨论】：

标签： javascript jquery knockout.js javascript-framework

【解决方案1】：

关于你的问题：

这些语句做了什么（特别是$data、$root）？

$data：表示当前视图模型。它在foreach 循环中很有用。例如，如果我们有学生集合并且我们正在迭代这个集合，$data 给我们当前的学生实例。这样我们就可以使用$data 来获取学生对象的各种属性，例如name、class 等

$root：这是根视图模型，层次结构中的最高上下文。所以通过$root，您可以访问顶级属性。

【讨论】：

请在代码片段周围添加一些格式，这样更容易阅读：例如$data

【解决方案2】：

如果您尝试在提供的代码中将引用从 self 更改为 this（这是同一件事），则选择 css 不起作用。有人知道为什么吗？

this.goToFolder = function(folder) { this.chosenFolderId(folder); };

【讨论】：

【解决方案3】：

回答您关于self.chosenFolderId(folder)的问题

它将值写入chosenFolderId observable。参数“folder”的值实际上是$data.的当前值

【讨论】：

【解决方案4】：

$data 和 $root 关键字通常由 KO 使用。当您在数组上使用 foreach (data-bind) 时，KO 会为数组中的每个元素创建一个 <li>。

在这种情况下，$data 是数组的当前项（如文件夹[i]），$root 是父元素。对您来说，文件夹是您的 ViewModel 的一个字段： $data = 迭代中的当前文件夹 (viewModel.folder[i]) $root = viewModel

self.chosendFolderId(folder) 执行 viewModel selectedFolderId 方法。代码使用 self 来保留 viewModel 值，因为在函数中，关键字“this”不是 viewModel，而是方法的发送者。这是一个关闭。

编辑： $parent 关键字是树的上一级。 $root 关键字是顶层树的层级。

viewModel {
  topObjects : ko.observableArray()
}

viewModel.topObjects.push({
  Objects : ko.observableArray()
});

如果我们在 viewModel.topObjects.Objects 上创建一个 foreach，$parent 是 topObjects，$root 是 viewModel。

谢谢 Tjorriemorrie ;-)

【讨论】：

$parent 不是父级，$root 不是根吗？