在淘汰赛js中,我看到视图模型声明为:
var viewModel = { firstname: ko.observable("Bob") }; ko.applyBindings(viewModel );
要么:
var viewModel = function() { this.firstname= ko.observable("Bob"); }; ko.applyBindings(new viewModel ());
两者之间有什么区别(如果有)?
我确实在Google的Google小组中找到了此讨论,但并没有真正给我令人满意的答案。
我可以看到我想用一些数据初始化模型的原因,例如:
var viewModel = function(person) { this.firstname= ko.observable(person.firstname); }; var person = ... ; ko.applyBindings(new viewModel(person));
但是,如果我不这样做,那么选择哪种样式有关系吗?
使用函数定义视图模型有两个优点。
主要优点是您可以立即访问this等于正在创建的实例的值。这意味着您可以执行以下操作:
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在关闭对象常量之后才定义它一样。许多人不喜欢将视图模型的创建未封装到一个调用中。
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,可以确保将其从整体视图模型中删除。
$root.removeItem
bind如果不支持,则另一种选择是using ,这是现代浏览器支持的,并且KO添加了。在这种情况下,它将看起来像:
bind
var ViewModel = function() { this.items = ko.observableArray(); this.removeItem = function(item) { this.items.remove(item); }.bind(this); };
关于这个主题,还有更多可以讨论的模式(例如模块模式和显示模块模式),但基本上使用函数可以为您提供更大的灵活性,并控制对象的创建方式和引用能力。实例专用的变量。