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

Question

在淘汰赛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));

但是，如果我不这样做，那么选择哪种样式有关系吗？

Answer 1

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

主要优点是您可以立即访问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);
};

因此，即使从其他范围调用，您的计算得到的observable也可以绑定到this的适当值。

使用对象文字，您将必须执行以下操作：

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

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, 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，可以确保将其从整体视图模型中删除。

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

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

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

Answer 2

我使用另一种方法，尽管类似：

var viewModel = (function () {
  var obj = {};
  obj.myVariable = ko.observable();
  obj.myComputed = ko.computed(function () { return "hello" + obj.myVariable() });

  ko.applyBindings(obj);
  return obj;
})();

几个原因：

1. 不使用this ，在ko.computed s等中使用时可能会造成混淆
2. 我的viewModel是一个单例，我不需要创建多个实例（即new viewModel() ）