Différence entre les modèles de vue désactivables déclarés en tant que littéraux d'objets et fonctions

Dans knockout js, je vois View Models déclaré comme:

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

ko.applyBindings(viewModel );

ou:

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

ko.applyBindings(new viewModel ());

Quelle est la différence entre les deux, le cas échéant?

J'ai trouvé cette discussion sur le groupe google knockoutjs mais cela ne m'a pas vraiment donné de réponse satisfaisante.

Je peux voir une raison si je voulais initialiser le modèle avec quelques données, par exemple:

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

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

Mais si je ne le fais pas, quel style choisir?

Il y a quelques avantages à utiliser une fonction pour définir votre modèle de vue.

Le principal avantage est que vous avez un accès immédiat à une valeur thiségale à l'instance en cours de création. Cela signifie que vous pouvez faire:

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

Ainsi, votre observable calculé peut être lié à la valeur appropriée de this, même s'il est appelé à partir d'une portée différente.

Avec un objet littéral, il faudrait faire:

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

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

Dans ce cas, vous pouvez utiliser viewModel directement dans l'observable calculé, mais il est évalué immédiatement (par défaut), vous ne pouvez donc pas le définir dans le littéral de l'objet, commeviewModel n'est défini qu'après la fermeture du littéral objet. Beaucoup de gens n'aiment pas que la création de votre modèle de vue ne soit pas encapsulée dans un seul appel.

Un autre modèle que vous pouvez utiliser pour vous assurer qu'il thisest toujours approprié consiste à définir une variable dans la fonction égale à la valeur appropriée de thiset à l'utiliser à la place. Ce serait comme:

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

Maintenant, si vous êtes dans la portée d'un élément individuel et appelez $root.removeItem , la valeur de thissera en fait les données liées à ce niveau (qui serait l'élément). En utilisant self dans ce cas, vous pouvez vous assurer qu'il est supprimé du modèle de vue globale.

Une autre option utilise bind, qui est prise en charge par les navigateurs modernes et ajoutée par KO, si elle n'est pas prise en charge. Dans ce cas, cela ressemblerait à:

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

Il y a beaucoup plus à dire sur ce sujet et de nombreux modèles que vous pouvez explorer (comme le modèle de module et le modèle de module révélateur), mais en gros, l'utilisation d'une fonction vous donne plus de flexibilité et de contrôle sur la façon dont l'objet est créé et la capacité de référence variables privées de l'instance.

J'utilise une méthode différente, mais similaire:

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

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

Quelques raisons:

1. Ne pas utiliser this, ce qui peut prêter à confusion lorsqu'il est utilisé dans ko.computeds, etc.
2. Mon viewModel est un singleton, je n'ai pas besoin de créer plusieurs instances (ie new viewModel() )