observable.subscribe ou une reliure personnalisée ou

Question

J'ai un simple cas d'entraînement avec knockout.js où je veux montrer un nombre différent de pommes en fonction de la valeur du curseur de plage. Voici le curseur:

<input data-bind="value: currentAppleCount" type="range" step="1" min="2" max="10"/> 

Chaque fois qu'un utilisateur déplace la poignée de curseur, une partie de l'interface utilisateur doit être redessinée avec un nombre approprié de pommes en utilisant une méthode comme renderApples(appleCount). Dois-je utiliser model.currentAppleCount.subscribe (renderApples) ou il y a une meilleure approche, car ce cas est trivial et la documentation de knockoutjs indique "Vous n'aurez normalement pas besoin de configurer les abonnements manuellement". De plus, pour des raisons pratiques, la méthode renderApples doit-elle recevoir appleCount en tant qu'argument ou accéder directement à model.currentAppleCount.

EDIT:

Le problème est que je dois travailler avec un tiers api avec ajout et de suppression des méthodes.

Answer 1

Si vous travaillez avec une API tiers, comme un widget jQueryUI ou quelque chose de similaire, puis la mise en place d'un abonnement semble la bonne chose à faire.

Je devine que votre API tiers ne comprend pas knock-out, et donc ne sait pas comment faire face à des observables. La configuration d'un abonnement vous permet d'avoir votre propre code qui obtiendra la valeur mise à jour de l'observable et la transmettra à l'API.

model.currentAppleCount.subscribe(function(newValue) { 
    someOtherAPI.UpdateAppleCount(newValue); 
}); 

Vous avez raison, dit la documentation:

Vous ne devez normalement configurer les abonnements manuellement, donc les débutants devraient ignorer cette section

Cela signifie que vous n'êtes plus un débutant. :)

P.S. Si votre API tierce a la possibilité de mettre à jour la valeur de appleCount, assurez-vous de saisir un type d'événement de mise à jour fourni, puis définissez l'observable à partir de là. Quelque chose comme:

// I'm just making up the OnAppleCountUpdate event. I have 
// no idea what it might be called in the third party API. 
someOtherAPI.OnAppleCountUpdate(function(newValueFromAPI) { 
    model.currentAppleCount(newValueFromAPI); 
}); 

Cela vous permettra d'avoir deux voies de liaison entre les pièces HTML/KO et votre API tiers.

Answer 2

Utiliser un ko.computed pour retourner un tableau de longueur appropriée. La propriété calculée sera réévaluée chaque fois que les observables référencés sont mis à jour.

function ViewModel() { 
    this.currentAppleCount = ko.observable(2); 
    this.apples = ko.computed(function() { 
     var currentAppleCount = this.currentAppleCount(); 
     var apples = []; 
     for (var i = 1; i <= currentAppleCount; i++) { 
      apples.push(i); 
     } 
     return apples; 
    }, this); 
} 

ko.applyBindings(new ViewModel()); 

Vous pouvez également renvoyer une tranche d'un ensemble complet. De cette façon, vous conserverez les instances d'objets.

<input data-bind="value: currentAppleCount" type="range" step="1" min="2" max="10"/> 
<ul data-bind="foreach: apples"> 
    <li>Apple #<span data-bind="text: $data"></span></li> 
</ul> 

http://jsfiddle.net/MizardX/KeHKB/