Knockout-Validierung abonnieren Update nach Änderung

Question

Ich habe Modell 'Suchparameter', die zwei Eigenschaften Titel und priceMax hat, beide sind erforderlich. Wenn der Benutzer die Eigenschaften ändert, aktualisiert das Skript die Menge der Angebote von der API. Update wird ausgeführt, wenn das Modell 'searchParameters' keine Fehler aufweist. Problem ist in Metodh, die Zählfehler im Modell zurückgeben. Wenn title und priceMax einen Wert haben, gibt die Methode Fehler zurück, nur wenn ich die Eigenschaft des Modells erneut ändere, gebe den Rückgabewert der Methode zurück. Das ist meine Lösung.

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); 

mein jsfiddle

Answer 1

Dies ist aufgrund der Reihenfolge, in der Sie sich bewerben Ihre Extender. Wenn Sie ein Observable erweitern, wird jeder Extender seriell nach dem Ergebnis des vorherigen ausgeführt.

Ihr Code daher erweitert die Original beobachtbar (wo es Änderungen abonniert) und dann das Observable wird erneut erweitert, um es erforderlich zu machen.

Um ehrlich zu sein ich nicht 100% sicher bin, was knockout-validation beobachtbar der Quelle zu tun, dass das Verhalten Sie sehen verursacht, aber wenn Sie die Reihenfolge Ihrer Extender umkehren (wie in this jsFiddle), dann werden Sie garantieren, dass Ihre individuelle Verlängerung operieren Sie auf dem "finalen" beobachtbaren und arbeiten Sie so, wie Sie es erwarten.

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