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 this
est toujours approprié consiste à définir une variable dans la fonction égale à la valeur appropriée 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
sera 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.
prototype
(des méthodes qui, souvent, par exemple, récupèrent les données du serveur et mettent à jour le modèle de vue en conséquence). Cependant, vous pouvez toujours les déclarer comme une propriété d'un objet littéral, donc je ne vois pas vraiment de différence.