Diferencia entre modelos de vista eliminados declarados como literales de objeto frente a funciones

En knockout js veo Ver modelos declarados como:

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

ko.applyBindings(viewModel );

o:

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

ko.applyBindings(new viewModel ());

¿Cuál es la diferencia entre los dos, si hay alguno?

Encontré esta discusión en el grupo de google knockoutjs pero realmente no me dio una respuesta satisfactoria.

Puedo ver una razón si quería inicializar el modelo con algunos datos, por ejemplo:

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

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

Pero si no lo hago, ¿importa qué estilo elijo?

Hay un par de ventajas al usar una función para definir su modelo de vista.

La principal ventaja es que tiene acceso inmediato a un valor thisigual a la instancia que se está creando. Esto significa que puedes hacer:

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

Por lo tanto, su observable calculado puede estar vinculado al valor apropiado de this , incluso si se llama desde un ámbito diferente.

Con un objeto literal, deberías hacer:

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

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

En ese caso, podrías usar viewModel directamente en el observable calculado, pero se evalúa de inmediato (por defecto), por lo que no puede definirlo dentro del objeto literal, comoviewModel que no se define hasta después de que se cerró el literal del objeto. A muchas personas no les gusta que la creación de su modelo de vista no esté encapsulada en una sola llamada.

Otro patrón que puede usar para asegurarse de que thissiempre sea apropiado es establecer una variable en la función igual al valor apropiado thisy usarla en su lugar. Esto sería como:

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

Ahora, si está dentro del alcance de un artículo individual y llama $root.removeItem, el valor dethis será en realidad los datos vinculados a ese nivel (que sería el elemento). Al usar self en este caso, puede asegurarse de que se elimine del modelo de vista general.

Otra opción es usar bind, que es compatible con los navegadores modernos y agregado por KO, si no es compatible. En ese caso, se vería así:

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

Hay mucho más que podría decirse sobre este tema y muchos patrones que podría explorar (como el patrón de módulo y el patrón de módulo revelador), pero básicamente el uso de una función le brinda más flexibilidad y control sobre cómo se crea el objeto y la capacidad de referenciar variables que son privadas para la instancia.

Yo uso un método diferente, aunque similar:

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

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

Un par de razones:

1. No usar this, lo que puede confundir cuando se usa dentro de ko.computeds etc.
2. Mi viewModel es un singleton, no necesito crear varias instancias (es decir new viewModel())