Diferença entre os modelos de exibição knockout declarados como literais de objeto versus funções

Em knockout js, vejo os modelos de declaração declarados como:

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

ko.applyBindings(viewModel );

ou:

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

ko.applyBindings(new viewModel ());

Qual é a diferença entre os dois, se houver?

Eu encontrei essa discussão no grupo do Google do knockoutjs, mas isso realmente não me deu uma resposta satisfatória.

Eu posso ver um motivo para querer inicializar o modelo com alguns dados, por exemplo:

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

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

Mas se eu não estou fazendo isso, importa qual estilo eu escolho?

Existem algumas vantagens em usar uma função para definir seu modelo de exibição.

A principal vantagem é que você tem acesso imediato a um valor thisigual à instância que está sendo criada. Isso significa que você pode fazer:

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

Portanto, seu observável calculado pode ser vinculado ao valor apropriado de this, mesmo se chamado de um escopo diferente.

Com um objeto literal, você teria que fazer:

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

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

Nesse caso, você pode usar viewModeldiretamente no observável calculado, mas ele é avaliado imediatamente (por padrão) para que você não possa defini-lo no literal do objeto, como viewModelnão é definido até que o literal do objeto seja fechado. Muitas pessoas não gostam que a criação do seu modelo de visualização não seja encapsulada em uma chamada.

Outro padrão que você pode usar para garantir que thisseja sempre apropriado é definir uma variável na função igual ao valor apropriado de thise usá-la. Seria assim:

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

Agora, se você estiver no escopo de um item e chamada individual $root.removeItem, o valor de thisserá realmente os dados vinculados nesse nível (que seria o item). Usando self neste caso, você pode garantir que ele esteja sendo removido do modelo de vista geral.

Outra opção está usando bind, que é suportada por navegadores modernos e adicionada pelo KO, se não for suportada. Nesse caso, seria semelhante a:

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

Há muito mais a ser dito sobre esse tópico e muitos padrões que você pode explorar (como padrão de módulo e padrão de módulo revelador), mas basicamente o uso de uma função oferece mais flexibilidade e controle sobre como o objeto é criado e a capacidade de referenciar variáveis ​​que são privadas para a instância.

Eu uso um método diferente, embora semelhante:

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

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

Duas razões:

1. Não usar this, o que pode confundir quando usado em ko.computeds etc
2. Meu viewModel é um singleton, não preciso criar várias instâncias (por exemplo new viewModel())