Unterschied zwischen als Objektliterale deklarierten Knockout-Ansichtsmodellen und Funktionen

In Knockout js sehe ich View Models wie folgt deklariert:

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

ko.applyBindings(viewModel );

oder:

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

ko.applyBindings(new viewModel ());

Was ist der Unterschied zwischen den beiden, wenn überhaupt?

Ich habe diese Diskussion in der Google-Gruppe von knockoutjs gefunden, aber sie hat mir nicht wirklich eine zufriedenstellende Antwort gegeben.

Ich kann einen Grund erkennen, ob ich das Modell mit einigen Daten initialisieren wollte, zum Beispiel:

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

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

Aber wenn ich das nicht mache, spielt es dann eine Rolle, welchen Stil ich wähle?

Die Verwendung einer Funktion zum Definieren Ihres Ansichtsmodells bietet einige Vorteile.

Der Hauptvorteil besteht darin, dass Sie sofort auf einen Wert zugreifen können, der thisder erstellten Instanz entspricht. Dies bedeutet, dass Sie Folgendes tun können:

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

So kann Ihr berechnetes Observable an den entsprechenden Wert von gebunden werden this, selbst wenn es aus einem anderen Bereich aufgerufen wird.

Mit einem Objektliteral müssten Sie Folgendes tun:

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

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

In diesem Fall können Sie viewModeldas berechnete Observable direkt verwenden, es wird jedoch sofort (standardmäßig) ausgewertet, sodass Sie es nicht innerhalb des Objektliteral definieren können, wie viewModeles erst nach dem Schließen des Objektliterals definiert wird. Vielen Leuten gefällt es nicht, dass die Erstellung Ihres Ansichtsmodells nicht in einem Aufruf zusammengefasst ist.

Ein weiteres Muster, mit dem Sie sicherstellen können, dass thises immer angemessen ist, besteht darin, eine Variable in der Funktion auf den entsprechenden Wert von zu setzen thisund sie stattdessen zu verwenden. Das wäre wie folgt:

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

Wenn Sie sich nun im Bereich eines einzelnen Elements befinden und aufrufen $root.removeItem, ist der Wert von thistatsächlich die Daten, die auf dieser Ebene gebunden werden (was das Element wäre). Wenn Sie in diesem Fall self verwenden, können Sie sicherstellen, dass es aus dem Gesamtansichtsmodell entfernt wird.

Eine andere Option ist die Verwendung bind, die von modernen Browsern unterstützt und von KO hinzugefügt wird, wenn sie nicht unterstützt wird. In diesem Fall würde es so aussehen:

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

Zu diesem Thema kann noch viel mehr gesagt werden, und es gibt viele Muster, die Sie untersuchen können (z. B. Modulmuster und Aufdecken von Modulmustern). Die Verwendung einer Funktion bietet Ihnen jedoch mehr Flexibilität und Kontrolle darüber, wie das Objekt erstellt wird und wie Sie darauf verweisen können Variablen, die für die Instanz privat sind.

Ich benutze eine andere Methode, obwohl ähnlich:

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

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

Einige Gründe:

1. Nicht verwenden this, was bei Verwendung innerhalb von ko.computeds usw. Verwirrung stiften kann
2. Mein viewModel ist ein Singleton, ich muss nicht mehrere Instanzen erstellen (dh new viewModel())