Разница между нокаут-моделями представления, объявленными как объектные литералы, по сравнению с функциями

В нокауте js я вижу View Models, объявленные как:

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

ko.applyBindings(viewModel );

или:

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

ko.applyBindings(new viewModel ());

В чем разница между двумя, если таковые имеются?

Я нашел это обсуждение в группе Google knockoutjs, но оно не дало мне удовлетворительного ответа.

Я вижу причину, если я хотел инициализировать модель с некоторыми данными, например:

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

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

Но если я не занимаюсь этим, имеет ли значение, какой стиль я выберу?

Есть несколько преимуществ использования функции для определения модели представления.

Основным преимуществом является то, что у вас есть немедленный доступ к значению 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, даже если она вызывается из другой области видимости.

С литералом объекта вы должны сделать:

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

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

В этом случае вы можете использовать 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);
};

По этой теме можно сказать гораздо больше и множество шаблонов, которые вы можете исследовать (например, шаблон модуля и раскрытие шаблона модуля), но в основном использование функции дает вам большую гибкость и контроль над тем, как создается объект, и возможность ссылаться на него. переменные, которые являются частными для экземпляра.

Я использую другой метод, хотя и похожий:

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.computeds и т. Д.
2. Моя viewModel является одиночной, мне не нужно создавать несколько экземпляров (то есть new viewModel())