Ausführen einer Funktion jedes Mal, wenn sich eine berechnete Observable ändert Knockout

Question

Ich habe ein Knockout View-Modell, das eine berechnete Observable enthält, die einfach einige Rohdaten basierend auf dem Inhalt einer Texteingabe filtert. Dieses berechnete Observable wird dann an eine Tabelle gebunden, um die Information anzuzeigen.

Jedes Mal, wenn das berechnete Observable berechnet wird, muss ich eine Funktion ausführen, die einige Event-Listener in den Tabellenzeilen aktualisiert (ich habe diese Funktion bereits).

Allerdings konnte ich nicht ergründen, wie man es zum Laufen bringt, nachdem das berechnete Observable aktualisiert wurde. Wenn Sie einen Aufruf an die Funktion in der Observable-Funktion senden, wird der neue Wert zurückgegeben, sodass er mit Legacy-Daten bearbeitet wird. Ich habe auch Extender-Syntax in Betracht gezogen, halte dies aber für eine unangemessene Lösung.

Wenn jemand eine Lösung oder irgendwelche Hinweise hat, würde ich es sehr schätzen.

UPDATE MIT CODE:

var viewModel = function(data) { 
    var self = this; 
    self.search = ko.observable(''); 
    self.rawData = ko.observableArray(data); 
    self.filterData = ko.computed(function() { 
     return self.rawData().filter(function(item) { 
      var filter = self.search().toLowerCase(); 
      return item.employeeNumber.toString().includes(filter) || item.name.toLowerCase().includes(filter) || filter == ""; 
     }); 
    }); 
}; 

Async-Funktion erstellt eine neue Ansicht Modell mit den zurückgegebenen Daten und wendet die Bindungen.

function reevaluateHandlers() { 
    // Code that should run every time the computed observable is calculated (filterData) 
} 

Answer 1

Mulitple Möglichkeiten, es zu tun:

1. Haben Sie eine andere berechnete Funktion nach dieser Funktion, dies würde dann Feuer nach dem ersten berechneten Funktion dh.

   self.filterData = ko.computed(function() { 
       return self.rawData().filter(function(item) { 
        var filter = self.search().toLowerCase(); 
        return item.employeeNumber.toString().includes(filter) || item.name.toLowerCase().includes(filter) || filter == ""; 
       }); 
   }); 
   
   self.reevaluateHandlers = ko.computed(function() { 
       var rawData = self.rawData(); 
       var filter = self.search(); 
       reevaluateHandlers(); 
   }); 
   

2. Einfache Timeout-Funktion wird die reevaluateHandlers Funktion nach Daten Feuer zurückgegeben

   self.filterData = ko.computed(function() { 
       var rawData = self.rawData(); 
       var filter = self.search().toLowerCase(); 
       var filteredData = rawData.filter(function(item) { 
        return item.employeeNumber.toString().includes(filter) || item.name.toLowerCase().includes(filter) || filter == ""; 
       }); 
   
       setTimeout(function() { 
        reevaluateHandlers(); 
       }, 100); 
   
       return filteredData; 
   }); 
   

Ich denke, die erste Lösung effizienter ist, obwohl ich mit dem filter Code optimieren würde:

Seine minimale, aber es wird einen Unterschied machen, vor allem mit AR Strahlgröße wird erhöht. Schau dir auch linqjs und knockouts pauseablecomputed an, denn dann hast du die Kontrolle darüber, wann die berechneten feuern.