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”，就是当前item的对象，比如我点击item 2中的“remove”，“this”就是{id: 2, name: ""} 但是，当 KO 绑定“可见”并调用 showName 函数时，“this”对象不包含当前项，您必须将“name”传递给函数（或者您可以使用 $data）。

所以，我有两个问题：

• 有一种方法可以从视图调用 showName 函数，而无需传递名称或 $data（与删除链接类似的行为）
• 如果没有，这样做有什么问题吗？我与一位同事进行了一次有趣的讨论，他认为这样做是不对的，因为您是从视图 ($root.showName(name)) 发送数据，然后这不是“纯”MVVM 模式。他提议创建一个自定义 KO 绑定来实现该功能。在我看来是用坦克杀死苍蝇，但我很想知道是否有不同的方法，或者你也认为我没有用我的代码做一个纯粹的 MVVM 模式。

Answer 1

从某种意义上说，您的同事说得有道理。不过，我不会亲自创建自定义绑定来处理此问题（继续主观说明，如果视图和视图模型之间存在特殊的通信方式，则自定义绑定更有意义；请参阅this post 以了解何时使用使用它们）。

顺便说一句，如果我们做探索自定义绑定的选项，我想您可以执行类似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); 
};

这确实需要您在构建 observable 数组时做一些额外的工作，但这是值得的，因为它清楚地分离了所有关注点。可以按照以下方式进行：

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

请参阅this fiddle 以获取上述演示。