使用函数定义视图模型有几个优点。
主要优点是您可以立即访问this
等于正在创建的实例的值。这意味着您可以:
var ViewModel = function(first, last) {
this.first = ko.observable(first);
this.last = ko.observable(last);
this.full = ko.computed(function() {
return this.first() + " " + this.last();
}, this);
};
因此,this
即使从不同的范围调用,您计算出的 observable 也可以绑定到 的适当值。
使用对象文字,您必须执行以下操作:
var viewModel = {
first: ko.observable("Bob"),
last: ko.observable("Smith"),
};
viewModel.full = ko.computed(function() {
return this.first() + " " + this.last();
}, viewModel);
在这种情况下,您可以viewModel
直接在计算出的 observable 中使用,但它会立即进行评估(默认情况下),因此您无法在对象字面量中定义它,因为viewModel
直到对象字面量关闭后才定义。许多人不喜欢视图模型的创建没有封装到一个调用中。
另一种可用于确保this
始终合适的模式是将函数中的变量设置为等于合适的值this
并改为使用它。这会是这样的:
var ViewModel = function() {
var self = this;
this.items = ko.observableArray();
this.removeItem = function(item) {
self.items.remove(item);
}
};
现在,如果您在单个项目的范围内并调用$root.removeItem
, 的值this
实际上将是在该级别绑定的数据(即项目)。通过在这种情况下使用 self,您可以确保将其从整体视图模型中删除。
另一种选择是使用bind
,现代浏览器支持它,如果不支持,则由 KO 添加。在这种情况下,它看起来像:
var ViewModel = function() {
this.items = ko.observableArray();
this.removeItem = function(item) {
this.items.remove(item);
}.bind(this);
};
关于这个主题还有很多可以说的,你可以探索许多模式(比如module模式和揭示module模式),但基本上使用函数可以让你更灵活地控制对象的创建方式以及引用的能力实例私有的变量。