敲击绑定未定义为单击

Question

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

  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函数和chosenFolderIdobservable.它说Navigate是未定义的.它无法解析为. Same goes forselectedFolderId`.

知道为什么会这样吗？

Answer 1

您当前的方法有一些问题:

当您使用foreach绑定时,例如data-bind="foreach:Folders"在ul"currect context"中,将是文件夹集合中的项目.

因此,如果您想要访问navigate或chosenFolderId需要使用的方法$parent,或$root访问"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问题总结得很好:淘汰视图模型之间的区别被声明为对象文字与函数