声明为对象文字和函数的剔除视图模型之间的区别

声明为对象文字和函数的剔除视图模型之间的区别

使用函数定义视图模型有两个优点。

主要优点是您可以立即访问

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

如果不支持，则另一种选择是using ，这是现代浏览器支持的，并且KO添加了。在这种情况下，它将看起来像：

var ViewModel = function() {    this.items = ko.observableArray();    this.removeItem = function(item) {         this.items.remove(item);    }.bind(this);};

关于这个主题，还有更多可以讨论的模式（例如模块模式和显示模块模式），但基本上使用函数可以为您提供更大的灵活性，并控制对象的创建方式和引用能力。实例专用的变量。