Knockout.js 语法

Question

我是 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); 做 ？

Answer 1

$data 和 $root 关键字通常由 KO 使用。 当您在数组（数据绑定）上使用 foreach 时，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 ;-)

Answer 2

回答关于self.chosenFolderId(folder)

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

Answer 3

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

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

Answer 4

关于你的问题：

语句做什么（特别是$data ， $root ）？

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

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

Answer 5

如果仍遇到$ root，$ data，$ parent，$ parentContext，$ rawData的困难。 我建议您在Google chrome上使用敲除上下文调试器扩展。

https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=zh-CN

出于不知名的目的： https ://knockoutjs.com/documentation/binding-context.html

谢谢海森堡