Différence entre les modèles de vue knockout déclarées comme fonctions de vs objets littéraux

Question

Dans knock-out js je vois les Modèles de Vue a déclaré que:

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 knockoutjs groupe google mais il n'a pas vraiment me donner une réponse satisfaisante.

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

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

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

Mais si je le fais pas n'importe quel style choisir?

Answer 1

Il y a quelques avantages à l'aide d'une fonction à définir votre modèle de vue.

Le principal avantage est que vous avez un accès immédiat à une valeur de this qui équivaut à l'instance créée. 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);
};

Donc, votre calculée observables peut être lié à la valeur appropriée de l' this, même si elle est appelée à partir d'un champ d'application différent.

Avec un objet littéral, vous devrez 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 le calcul des observables, mais il ne se évaluée immédiate (par défaut) de sorte que vous ne pouvait pas définir à l'intérieur de l'objet littéral, viewModel n'est pas défini jusqu'à ce que après le littéral d'objet fermé. Beaucoup de gens n'aiment pas que la création de votre modèle de vue n'est pas encapsulé dans un appel.

Un autre motif que vous pouvez utiliser pour vous assurer que this est toujours appropriée consiste à définir une variable dans la fonction égale à la valeur de this et 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 this seront effectivement les données liées à ce niveau (ce qui serait l'élément). Par l'utilisation de l'auto dans ce cas, vous pouvez vous assurer qu'il est retiré de la vue d'ensemble du modèle.

Une autre option est l'utilisation de `lier, qui est pris en charge par les navigateurs modernes et ajouté par KO, si elle n'est pas prise en charge. Dans ce cas, il devrait ressembler à:

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

Il y a beaucoup plus qui pourrait être dit sur ce sujet et beaucoup de motifs que vous pouvez explorer (comme motif de module et de révéler le motif de module), mais, fondamentalement, à l'aide 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 faire référence à des variables qui sont privés de l'instance.

Answer 2

J’utilise une méthode différente, bien que ressemblant :

Deux raisons :

1. Ne pas utiliser , qui peut la confusion lorsqu’il est utilisé dans s etc.
2. Mon viewModel est un singleton, je n’ai besoin de créer plusieurs instances (p. ex. `` )