Artikel zu ObservableArray() hinzufügen und warten, bis es hinzugefügt wird?

Question

Ich habe eine VM mit den folgenden:

var myArray = ko.observableArray(), 
.... 
addItem = function(data) { 
    myArray.unshift(data); 
}, 

Meiner Ansicht ich einige HTML haben, die es bindet:

<div data-bind="foreach: myArray"> 
    ....<label data-bind:="attr: { id: 'myLabel_' + name }"></Label> 
    </div> 

Alles funktioniert super - wenn ich die addItem aufrufen Funktion ein Element hinzugefügt wird zu meinem obserablenArray() und Knockout fügt das entsprechende HTML hinzu.

Das Problem, dem ich jetzt gegenüberstehe, ist, wenn ich, anstatt einfach HTML zu verwenden, versuche, ein komplexeres Steuerelement (wie ein Kendo-Gitter) zu verwenden. Ich muss eine Javascript-Methode aufrufen, um das Raster zu initiieren, wenn ich newItem aufruft. Aber wenn ich das tue, funktioniert es nicht (ich nehme an, weil Knockout nicht "fertig" ist, was es tut, wenn die Kendo-Steuerung versucht, das zu tun, was sie tun muss).

Die folgende nicht funktioniert:

var myArray = ko.observableArray(), 
.... 
addItem = function(data) { 
    myArray.unshift(data); 
    var test = $('#myLabel_nameOne'); 
    // Kendo specific code to setup test 
}, 

Wenn ich den gleichen Kendo spezifischen Code von der Konsole ausführen - es funktioniert super. Wenn ich ein setInterval verwende, funktioniert das auch.

Ich weiß, dass es ein 'afterRender' gibt, in das ich mich auf einer ganzen Vorlage einhaken kann - aber ich möchte nur wissen, wann die Benutzeroberfläche fertig ist, nachdem ein einzelnes Objekt in dieses ObservableArray eingefügt wurde.

Was ist die richtige Art zu sagen: "Warte, bis das wirklich hinzugefügt wird, dann geh und mach das andere Zeug?" Oder "Fügen Sie dies hinzu, und wenn die Benutzeroberfläche bereit ist, rufen Sie diese Funktion für mich auf"?

Answer 1

Ich habe asynchrone Probleme mit anderen Frameworks als Knockout und in der Regel löste sie durch Schreiben von Wrappern mit jQuery und dem Deferred() -Objekt.

Nachdem Sie die Knockout-Dokumentation gelesen haben, können Sie einfach die Subscribe-Funktion verwenden.

var myArray = ko.observableArray() 
 
myArray.subscribe(function(data) { 
 
    var test = $('#myLabel' + data.name); 
 
    // Kendo specific code to setup test 
 
}); 
 
    .... 
 
addItem = function(data) { 
 
    myArray.unshift(data); 
 
},