Knockout JS在foreach绑定中调用ViewModel函数

Question

让我们考虑使用类似的淘汰视图模型:

var data = [{ id: 1, name: "John Doe" }, { id: 2, name: ""}, { id: 3, name: "Peter Parker"}];

var viewModel = {
    items: ko.observableArray(data)
};

viewModel.showName = function (name) {
    console.log(this);
    return name && name.length > 0;
};

viewModel.removePerson = function () {
    console.log(this); 
};

ko.applyBindings(viewModel);

有了这个视图:

<ul data-bind="foreach: items">
    <li><span data-bind="text: id"></span>
         <span data-bind="visible: $root.showName(name)">Yes! show the name</span>
         <a href="#" data-bind="click: $root.removePerson">Remove</a>
    </li>
</ul>

你可以在这里看到它:http://jsfiddle.net/SmW35/8/

在这种情况下,当有人点击"删除"链接,并且KO调用showName函数,函数内的对象"this"时,它是具有当前项的对象,例如,如果我单击项目2中的"remove" ,"this"是{id:2,name:""}但是,当KO绑定"visible"并调用showName函数时,"this"对象不包含当前项,并且你必须传递"命名为"函数(或者您可以使用$ data).

所以,我有两个问题:

• 有一种方法可以从View中调用showName函数,而不传递名称或$ data(与Remove链接相似的行为)
• 如果没有,这样做有什么不对吗？我与一个认为不正确的同事进行了一次有趣的讨论,因为你是从View($ root.showName(name))发送数据,然后这不是一个"纯粹的"MVVM模式.他建议创建一个自定义KO绑定来实现功能.在我看来是用坦克杀死苍蝇,但我很好奇知道是否有不同的方式,或者你也认为我没有用我的代码做一个纯粹的MVVM模式.

Answer 1

从某种意义上说,你的同事有一个观点.我不会亲自创建一个自定义绑定来处理这个问题(在一个持续的主观说明中,如果在视图和视图模型之间存在特殊的通信方式,则更有意图使用自定义绑定; 有关何时使用的详细说明,请参阅此帖子他们).

在一个侧面说明,如果我们做探索的自定义绑定的选项,我想你可以这样做一个textIfNotEmpty结合了结合处理text,并visible于一体.另一方面,如果showName功能保持简单,您还可以选择:

<span data-bind="visible: !!name, text: name"></span>

无论如何,我更喜欢以下......

根本问题是IMO视图模型违反了单一责任原则:showName功能应该是表示项目的视图模型的责任.

var Item = function(data) {
    var self = this;

    self.id = data.id;

    self.name = ko.observable(data.name); 
    // or plain "self.name = data.name;" if you don't need 2way binding

    self.showName = ko.computed(function() { 
         return self.name() && self.name().length > 0;
    });
}

现在你可以像这样轻松绑定:

<ul data-bind="foreach: items">
    <li><span data-bind="text: id"></span>
         <span data-bind="visible: showName">Yes! show the name</span>
         <a href="#" data-bind="click: $root.removePerson">Remove</a>
    </li>
</ul>

这也允许你重写removePerson到这个:

viewModel.removePerson = function (person) {
    console.log(person); 
};

这确实需要你在构造可观察数组时做一些额外的工作,但它值得,因为它清楚地分离了所有的问题.它可以按照以下方式完成:

var viewModel = {
    items: ko.observableArray(data.map(function(item) { return new Item(item); }))
};

请参阅此小提琴,了解上述演示.