Gibt es eine Möglichkeit, Code auszuführen, nachdem knockoutjs nur den Bindungskontext kennt?

Question

Ich arbeite an einem Modul in einem CMS-Backend. Ich versuche, in ihre Knockout-Bindungen einzudringen und Code auszuführen, wenn sie mit dem Rendern fertig sind. Bis jetzt hatte ich kein Glück.

Ich habe jedoch an die verschiedenen Datenkomponenten angehängt und Knockout-Daten erhalten.

Ich hatte viele fehlgeschlagene Versuche, aber bis jetzt habe ich dies, was einen verbindlichen Kontext zurückgibt.

var bindingContext = ko.contextFor(jQuery('div[data-component="customer_form.areas"]').get(0)); 

Kennt jemand eine Art, wie ich dies verwenden kann, um einen Beobachter anzuhängen, um das Rendering zu beenden? Ich werde Admin, ich bin neu zu knockout. Ich erstelle weder die Ansichtsmodelle noch die Vorlagen. Ich kann den AfterRender nicht zu der Vorlage hinzufügen, wie ich denke sollte getan werden.

Answer 1

Wie Sie bereits sagten, sollte mit afterRender erfolgen. Alle anderen Methoden fühlen sich hacky, weil Sie nie wissen werden, wenn Knockout (Teile) das ui wieder rendert.

Ich kann nicht aus einem Grund denken, warum Sie um eine solche Arbeit benötigen würde, aber wer bin ich ..

Die Off denke, ich kann nur Ansatz, um zu beurteilen, ist die MutationObserver zu verwenden. Hier ein Beispiel:

var bindingContextElement = document.querySelector("ul"); 
 

 
var renderThrottle = 300; 
 
var renderCycle = null; 
 
var onRenderComplete = function() { 
 
    var pre = document.createElement("pre"); 
 
    var msg = new Date().toLocaleString() + ": finished rendering"; 
 
    pre.appendChild(document.createTextNode(msg)); 
 
    document.body.appendChild(pre); 
 
} 
 

 
// Observe mutations to element, call onRenderComplete after 300ms of no mutations 
 
var observer = new MutationObserver(function(mutations) { 
 
    clearTimeout(renderCycle); 
 
    renderCycle = setTimeout(onRenderComplete, renderThrottle); 
 
}); 
 

 
var config = { 
 
    childList: true 
 
}; 
 

 
observer.observe(bindingContextElement, config); 
 

 
ko.applyBindings({ 
 
    items: ko.observableArray([1, 2, 3]) 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ul data-bind="foreach: items"> 
 
    <li data-bind="text: $data"></li> 
 
</ul> 
 

 
<button data-bind="click: function() { items.push(items().length + 1)}">add</button>

Dieser Code hört irgendwelche Mutationen im <ul> Elemente, das durch KO gesteuert wird. Sobald Änderungen an dem Element oder seinen untergeordneten Elementen auftreten, versucht es, eine "gerenderte" Nachricht zu protokollieren. Es ist nur erlaubt, diese Nachricht zu protokollieren, wenn für 300ms keine weiteren Änderungen vorgenommen werden.

Werfen Sie einen Blick auf the docs Ihre config Objekt und ... zu sehen, welche Elemente zu bestimmen Und denken Sie daran, dass Sie die Dinge aus der Hand könnte, wenn Sachen komplizierter als in diesem Beispiel bekommt ...