让我们考虑使用类似的淘汰视图模型：
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(与Remove链接相似的行为)
>如果没有,这样做有什么不对吗？我与一个认为不正确的同事进行了一次有趣的讨论,因为你是从View($root.showName(name))发送数据,然后这不是一个“纯粹的”MVVM模式.他建议创建一个自定义KO绑定来实现功能.在我看来是用坦克杀死苍蝇,但我很想知道是否有不同的方式,或者你也认为我没有用我的代码做一个纯粹的MVVM模式.
解决方法
从某种意义上说,你的同事有一个观点.我不会亲自创建一个自定义绑定来处理这个问题(在一个持续的主观说明中,如果在视图和视图模型之间存在特殊的通信方式,则更有意图使用自定义绑定;有关何时使用它们的详细说明,请参阅
this post ).
另外,如果我们探索自定义绑定的选项,我想你可以做一些像textIfNotEmpty绑定处理程序,它将文本和可见结合在一起.另一方面,如果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); })) };
有关上述演示,请参阅this fiddle.
