Knockout.js语法

Question

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

来自于传统的Javascript (和一些jQuery经验)，我在理解语法学习Knockout.js方面遇到了困难。

考虑下面的情况；

The View:

<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是数组的当前项(如foldersi)，$root是父元素。对于您来说，文件夹是ViewModel的一个字段：$data =当前的迭代文件夹(viewModel.folderi) $root = viewModel

Self.chosendFolderId(文件夹)执行viewModel chosenFolderId方法。代码使用self来保留viewModel值，因为在函数中，关键字"this“不是viewModel，而是方法的发件人。这是个了结。

编辑：$parent关键字是树的前级。$root关键字是顶级树的级别。

viewModel {
  topObjects : ko.observableArray()
}

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

如果我们在viewModel.topObjects.Objects上创建一个前景，那么$parent就是topObjects，$root是viewModel。

谢谢你;-)

Answer 2

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

它将值写入可观察的chosenFolderId。参数"folder“的值实际上是$data.的当前值。

Answer 3

如果您试图在提供的代码中将引用从self更改为此(这是相同的事情)，那么选择css就无法工作。有人知道为什么吗？

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