Differenza tra knockout Visualizza i modelli dichiarati come letterali degli oggetti rispetto alle funzioni

In knockout js vedo View Models dichiarate come:

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

ko.applyBindings(viewModel );

o:

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

ko.applyBindings(new viewModel ());

Qual è la differenza tra i due, se presente?

Ho trovato questa discussione sul gruppo google knockoutjs ma non mi ha dato una risposta soddisfacente.

Vedo un motivo se volevo inizializzare il modello con alcuni dati, ad esempio:

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

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

Ma se non lo faccio, importa quale stile scelgo?

Ci sono un paio di vantaggi nell'usare una funzione per definire il tuo modello di vista.

Il vantaggio principale è che hai accesso immediato a un valore thisuguale all'istanza che viene creata. Ciò significa che puoi fare:

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

Quindi, il tuo osservabile calcolato può essere associato al valore appropriato di this, anche se chiamato da un ambito diverso.

Con un oggetto letterale, dovresti fare:

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

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

In tal caso, è possibile utilizzare viewModeldirettamente nell'osservabile calcolato, ma viene valutato immediatamente (per impostazione predefinita), quindi non è possibile definirlo all'interno dell'oggetto letterale, poiché viewModelnon è definito fino a quando l'oggetto letterale non viene chiuso. A molte persone non piace che la creazione del modello di visualizzazione non sia incapsulata in una chiamata.

Un altro modello che è possibile utilizzare per assicurarsi che thissia sempre appropriato è impostare una funzione nella funzione uguale al valore appropriato thise usarla invece. Questo sarebbe come:

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

Ora, se si rientra nell'ambito di un singolo articolo e si chiama $root.removeItem, il valore di thissarà effettivamente i dati vincolati a quel livello (che sarebbe l'elemento). Utilizzando self in questo caso, è possibile assicurarsi che venga rimosso dal modello di visualizzazione generale.

Un'altra opzione sta usando bind, che è supportata dai browser moderni e aggiunta da KO, se non è supportata. In tal caso, sembrerebbe:

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

C'è molto di più che si possa dire su questo argomento e molti modelli che è possibile esplorare (come modello di modulo e modello di modulo rivelatore), ma fondamentalmente l'uso di una funzione offre maggiore flessibilità e controllo su come viene creato l'oggetto e sulla capacità di riferimento variabili private per l'istanza.

Uso un metodo diverso, sebbene simile:

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

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

Coppia di motivi:

1. Non usare this, il che può creare confusione quando utilizzato all'interno di ko.computeds ecc
2. Il mio viewModel è un singleton, non ho bisogno di creare più istanze (ad es. new viewModel())