Diferencia entre nocaut Visualización de modelos declarada como literales de objetos vs funciones

Question

En knockout js veo Visualización de modelos declarados como sea:

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, en su caso ?

Encontré this discussion en el grupo de google knockoutjs pero en realidad no me dio una respuesta satisfactoria.

puedo ver una razón si quería para 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 yo no estoy haciendo eso qué importa qué estilo elegir?

Answer 1

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 de this que es igual a la instancia que se está creando. Esto significa que usted puede 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); 
}; 

lo tanto, su observables computarizada se puede unir al valor apropiado de this, incluso si llama desde un ámbito diferente.

Con un objeto literal, que tendría que 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, se puede usar viewModel directamente en la observables computarizada, pero se vuelve evaluado inmediata (por defecto) por lo que no podía defínalo en el literal del objeto, ya que viewModel no está definido hasta después de que se cierra 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 utilizar para asegurarse de que this sea siempre apropiado es establecer una variable en la función igual al valor apropiado de this y usarlo 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 usted está en el alcance de un elemento individual y llamar $root.removeItem, el valor de this serán realmente los datos que se están ligados a ese nivel (lo 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 navegadores modernos y agregado por KO, si no es compatible. En ese caso, se vería como:

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

hay mucho más que se puede decir sobre este tema y muchos patrones que se puede explorar (como patrón de módulo y el diseño del módulo revelador), pero básicamente usando una función da tiene más flexibilidad y control sobre cómo se crea el objeto y la capacidad de referenciar variables que son privadas para la instancia.

Answer 2

Puedo usar 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; 
})(); 

par de razones:

1. No usar this, que puede confusión cuando se utiliza dentro de ko.computed s etc
2. Mi modelo de vista es una singleton, no es necesario crear varias instancias (es decir, new viewModel())