未定义用于单击的Knockout绑定

Question

我有一个视图模型，它必须附加到<li>标记的单击事件。这是视图模型和标记

var viewModel =
{
Folders: ['Inbox', 'Archive', 'Sent', 'Spam'],
SelectedFolder: ko.observable('Inbox'),
chosenFolderId: ko.observable(),
navigate: function () {
self.chosenFolderId(folder);               
}
};
ko.applyBindings(viewModel);

标记是

<ul class="nav nav-list bs-docs-sidenav affix" data-bind="foreach:Folders">
@*<li data-bind="css:{active: $data == chosenFolderId() }">*@
<li>
<a href="#" data-bind="click:navigate">                      
<!-- ko text: $data -->
<!-- /ko -->
<i class="icon-chevron-right"></i>
</a>
</li>                   
</ul>

问题出在这条线上

<a href="#" data-bind="click:navigate"> 

和

<li data-bind="css:{active: $data == chosenFolderId() }">

上面的两行都没有分别附加到Navigate函数和chosenFolderId可观察到的。它说Navigate是未定义的。无法解析. Same goes forchosenFolderId`。

知道为什么会这样吗？

Answer 1

您当前的方法存在一些问题：

当您在ul中使用foreach绑定(例如data-bind="foreach:Folders")时，"当前上下文"将是文件夹集合中的项目。

因此，如果你想访问navigate或chosenFolderId方法，你需要使用$parent或$root来访问你的"根"视图模型(你可以阅读更多关于绑定上下文的信息)：

<ul class="nav nav-list bs-docs-sidenav affix" data-bind="foreach:Folders">
<li data-bind="css:{active: $data == $parent.chosenFolderId() }">
<a href="#" data-bind="click: $parent.navigate">                      
<!-- ko text: $data -->
<!-- /ko -->
<i class="icon-chevron-right"></i>
</a>
</li>                   
</ul>​

视图模型中也存在一些问题。如果你有像navigate这样试图使用self的复杂函数，你应该使用一个函数作为视图模型，而不是可以存储this:的对象文字

var viewModel = function() {
var self = this;
self.Folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
self.SelectedFolder = ko.observable('Inbox');
self.chosenFolderId = ko.observable();
self.navigate = function(folder) {
self.chosenFolderId(folder);
}
};
ko.applyBindings(new viewModel());​

注意：您的navigate函数需要一个folder参数才能工作，Knockout将为您传递当前项。

这是一个正在工作的JSFiddle。

如果你想用一个对象文字作为你的视图模型，这里是JSFiddle，它展示了这种方法。

但是，您应该知道双视图模型创建方法的优势和优势。这个SO问题很好地总结了它：声明为对象文字的敲除视图模型与函数之间的差异