Різниця між моделями перегляду нокауту, оголошених як об'єктні літерали проти функцій

У нокауті js я бачу Перегляд моделей, оголошених як:

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

ko.applyBindings(viewModel );

або:

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

ko.applyBindings(new viewModel ());

Яка різниця між ними, якщо такі є?

Я знайшов цю дискусію в групі knockoutjs google, але це насправді не дало мені задовільної відповіді.

Я бачу причину, якщо хотів ініціалізувати модель деякими даними, наприклад:

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. Мій поглядModel є однотонним, мені не потрібно створювати кілька примірників (тобто new viewModel())