敲除绑定未定义单击

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 observable。它说 Navigate 是 undefined 。无法解析. Same goes forchosenFolderId`。

知道为什么会这样吗？

Answer 1

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

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

因此，如果您想访问navigate 或chosenFolderId 方法，您需要使用$parent 或$root 来访问您的“根”视图模型（您可以阅读有关binding context 的更多信息） ：

<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 将为您传递当前项目。

这是working JSFiddle。

如果您想使用对象字面量作为您的视图模型，这里是 JSFiddle，它演示了这种方法。

但是，您应该知道两种视图模型创建方法的优势和劣势。这个 SO 问题总结得很好：Difference between knockout View Models declared as object literals vs functions