敲除视图模型之间的区别声明为对象文字与函数 [英] Difference between knockout View Models declared as object literals vs functions

问题描述

在淘汰赛中，我看到View Models声明为：

In knockout js I see View Models declared as either:

var viewModel = {
    firstname: ko.observable("Bob")
};

ko.applyBindings(viewModel );

或：

var viewModel = function() {
    this.firstname= ko.observable("Bob");
};

ko.applyBindings(new viewModel ());

两者之间有什么区别，如果有的话？

What's the difference between the two, if any?

我确实在knockoutjs google小组上找到此讨论但它并没有给我一个满意的答案。

I did find this discussion on the knockoutjs google group but it didn't really give me a satisfactory answer.

如果我想用一些数据初始化模型，我可以看到一个原因，例如：

I can see a reason if I wanted to initialise the model with some data, for example:

var viewModel = function(person) {
    this.firstname= ko.observable(person.firstname);
};

var person = ... ;
ko.applyBindings(new viewModel(person));

但如果我不这样做，我选择哪种风格很重要？

But if I'm not doing that does it matter which style I choose?

推荐答案

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

There are a couple of advantages to using a function to define your view model.

主要优点是您可以立即访问这个的值，该值等于正在创建的实例。这意味着你可以这样做：

The main advantage is that you have immediate access to a value of this that equals the instance being created. This means that you can do:

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);
};

因此，您的计算的observable可以绑定到的适当值，即使从不同的范围调用。

So, your computed observable can be bound to the appropriate value of this, even if called from a different scope.

使用对象文字，你必须这样做：

With an object literal, you would have to do:

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

在这种情况下，您可以使用 viewModel 直接在计算的observable中，但它会立即进行评估（默认情况下），因此您无法在对象文字中定义它，因为直到对象文字后才定义 viewModel 关闭。很多人不喜欢你的视图模型的创建没有被封装到一个调用中。

In that case, you could use viewModel directly in the computed observable, but it does get evaluated immediate (by default) so you could not define it within the object literal, as viewModel is not defined until after the object literal closed. Many people don't like that the creation of your view model is not encapsulated into one call.

你可以使用另一种模式来确保这个总是合适的是将函数中的变量设置为等于这个的适当值并改为使用它。这就像：

Another pattern that you can use to ensure that this is always appropriate is to set a variable in the function equal to the appropriate value of this and use it instead. This would be like:

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

现在，如果您在单个商品的范围内并致电 $ root.removeItem ，这个的值实际上是在该级别绑定的数据（这将是项目）。在这种情况下，通过使用self，您可以确保从整个视图模型中删除它。

Now, if you are in the scope of an individual item and call $root.removeItem, the value of this will actually be the data being bound at that level (which would be the item). By using self in this case, you can ensure that it is being removed from the overall view model.

另一个选项是使用 bind ，如果不支持现代浏览器支持并由KO添加。在这种情况下，它看起来像：

Another option is using bind, which is supported by modern browsers and added by KO, if it is not supported. In that case, it would look like:

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

关于这个主题还有很多可以说的，你可以探索的很多模式（比如模块）模式和揭示模块模式），但基本上使用一个函数为您提供更多的灵活性和控制对象的创建方式，以及引用实例私有的变量的能力。

There is much more that could be said on this topic and many patterns that you could explore (like module pattern and revealing module pattern), but basically using a function gives you more flexibility and control over how the object gets created and the ability to reference variables that are private to the instance.

这篇关于敲除视图模型之间的区别声明为对象文字与函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！