web-dev-qa-db-fra.com

Knockout: fonction vs observable calculée

Lors de l'utilisation de knockout, quel est l'avantage d'utiliser des observables calculés en lecture seule plutôt que des fonctions simples?

Prenez par exemple le constructeur de viewmodel et l'extrait html suivants:

var ViewModel = function(){
    var self = this;
    self.someProperty = ko.observable("abc");
    self.anotherProperty = ko.observable("xyz");
    self.someComputedProperty = function(){
        return self.someProperty() + self.anotherProperty();
    };    
};

<input data-bind="value: someProperty"/>
<input data-bind="value: anotherProperty"/>
<p data-bind="text: someComputedProperty()"></p>

Tout ici semble fonctionner comme vous vous en doutez, alors y a-t-il une raison pour laquelle je devrais plutôt utiliser:

​var ViewModel = function(){
    var self = this;
    self.someProperty = ko.observable("abc");
    self.anotherProperty = ko.observable("xyz");
    self.someComputedProperty = ko.computed(function(){
        return self.someProperty() + self.anotherProperty();
    });    
};


<input data-bind="value: someProperty"/>
<input data-bind="value: anotherProperty"/>
<p data-bind="text: someComputedProperty"></p>

Je remarque que la documentation sur http://knockoutjs.com/documentation/computedObservables.html indique que "... les liaisons déclaratives sont simplement implémentées en tant qu'observables calculés", ce qui signifie que j'ai besoin de moi les utiliser explicitement dans mes modèles d'affichage?

knockout.jsknockout-2.0computed-observable
54
Duncan

Si le seul but de votre observable calculé est de faire une simple liaison avec lui, alors utiliser une fonction serait équivalent. Les liaisons sont implémentées à l'intérieur d'un observable calculé pour suivre les dépendances, de sorte qu'il déclenchera à nouveau votre liaison lorsque l'un des observables change.

Voici quelques éléments à considérer à propos des observables calculés par rapport à une fonction

  • la valeur d'un observable calculé est mise en cache, elle n'est donc mise à jour que lorsqu'elle est créée et lorsqu'une dépendance est mise à jour. Pour une fonction régulière, vous devez exécuter la logique à chaque fois. Si beaucoup de choses dépendent de cette valeur (par exemple, chaque élément d'une collection se lie à une valeur du parent), alors cette logique sera exécutée encore et encore.

  • dans votre JavaScript, vous êtes également libre d'utiliser des observables calculés comme vous le feriez pour d'autres observables. Cela signifie que vous pouvez créer des abonnements manuels par rapport à eux et en dépendre d'autres calculs (l'appel d'une fonction créerait également cette dépendance). Vous pouvez compter sur les méthodes d’utilité normales dans KO comme ko.utils.unwrapObservable pour déterminer de manière générique si vous devez l'appeler en tant que fonction ou non pour récupérer la valeur.

  • si vous souhaitez finalement envoyer la valeur au serveur, un observable calculé apparaîtra naturellement dans votre sortie JSON, tandis qu'une valeur qui est le résultat d'une fonction normale disparaîtra simplement lors de la conversion en JSON (vous devrez faire plus de travail pour remplir d'abord une propriété à partir de cette fonction).

74
RP Niemeyer