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”对象不包含当前项，并且您必须将“name”传递给该函数（或者您可以使用$ data）。

所以，我有两个问题：

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

Answer 1

从某种意义上说，你的同事有一个观点。我不会亲自创建一个自定义绑定来处理这个问题（在一个持续的主观说明中，如果在视图和视图模型之间存在特殊的通信方式，则更有意图使用自定义绑定;请参阅this post以获得对何时使用它们）。

另一方面，如果我们做探索自定义绑定的选项，我想你可以做一些像textIfNotEmpty绑定处理程序，它结合了text和{ {1}}合而为一。另一方面，如果visible功能保持简单，您也可以选择：

showName

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

基本问题是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> Yes! show the name <a href="#" data-bind="click: $root.removePerson">Remove</a> </li> </ul>重写为：

removePerson

这确实需要你在构造可观察数组时做一些额外的工作，但它值得，因为它清楚地分离了所有的关注点。可以这样做：

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

有关上述内容的演示，请参阅this fiddle。

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

1 个答案: