validation knockout abonnement mise à jour après modification

Question

J'ai le modèle 'Paramètres de recherche', qui a deux propriétés title et priceMax, les deux sont obligatoires. Lorsque l'utilisateur change de propriétés, le script met à jour la quantité d'offres de l'API. La mise à jour est exécutée lorsque le modèle 'searchParameters' n'a pas d'erreur. Le problème est dans metodh, qui renvoie les erreurs de comptage dans le modèle. Lorsque title et priceMax ont une valeur, les erreurs de retour de méthode, seulement quand je change la propriété du modèle à nouveau la méthode renvoie la valeur 0. Une idée? C'est ma solution.

HTML

<fieldset> 
     <div class="row"> 
     <label>Title:</label> 
     <input type="text" data-bind="textInput: searchParameters.title" /> 

     </div> 

     <div class="row"> 
     <label>Price max:</label> 
     <input data-bind="textInput: searchParameters.priceMax" /> 

     </div> 
     <div class="row"> 
     <label>count offers:</label> 
     <span data-bind="text: countOffers"></span> 
     </div> 
     <div class="row" data-bind="visible:visibleProgress"> 
     progress... 
     </div> 
    </fieldset> 

JS

function ViewModel() { 
    var self = this; 
    self.countOffers = ko.observable(0); 
    self.visibleProgress = ko.observable(false); 
    ko.extenders.refreshCountOffers = function(target, timeout) { 
    var timerId = null; 
    target.subscribe(function(newValue) { 
     console.log(self.errors()); 
     if (self.errors().length === 0) { 
     clearTimeout(timerId); 
     timerId = setTimeout(function() { 
      self.visibleProgress(true); 
      //mock api 
      $.ajax({ 
      url: '/echo/js/?js=' + Math.floor((Math.random() * 100)), 
      data: { 
       delay: 2 
      }, 
      complete: function(response) { 
       self.countOffers(response.responseText); 
       self.visibleProgress(false); 
      } 
      }); 
      //mock api 
     }, 500); 
     } else 
     self.countOffers(0); 
    }); 
    return target; 
    }; 
    self.searchParameters = { 
    title: ko.observable().extend({ 
     refreshCountOffers: 500 
    }).extend({ 
     required: true 
    }), 
    priceMax: ko.observable().extend({ 
     refreshCountOffers: 500 
    }).extend({ 
     required: true 
    }) 
    }; 
    self.errors = ko.validation.group(self.searchParameters); 
}; 

var model = new ViewModel(); 
ko.applyBindings(model); 

mon jsfiddle

Answer 1

Cela est dû à l'ordre dans lequel vous postulez votre extendeurs. Lorsque vous étendez une observable, chaque extension est exécutée en série sur le résultat de la précédente.

Votre code étend donc le original observable (où il souscrit aux modifications) et l'observable est à nouveau étendu pour le rendre nécessaire.

Pour être honnête, je ne suis pas sûr à 100% ce que knockout-validation fait à la source observable qui provoque le comportement que vous voyez mais si vous inversez l'ordre de vos extensions (comme dans this jsFiddle) alors vous garantissez que votre extendeur personnalisé opérer sur le 'final' observable et fonctionnera donc comme prévu.

self.user = { 
    firstName: ko.observable().extend({ 
    required: true, 
    refreshCountOffers: 500 
    }), 
    lastName: ko.observable().extend({ 
    required: true, 
    refreshCountOffers: 500 
    }) 
};