knockoutjs afterRender-Funktion in foreach-binding

Ich versuche, die angeben, ein Eintritt auf Elemente eingefügt werden können, mit einer knockoutjs foreach-binding. Sehr einfaches setup:

myViewModel.myObservableArray.push({enter:function() { ... });

und in der markup:

foreach:{data:myObservableArray, afterRender:enter}

scheint, wie es funktionieren sollte... richtig? Aber es nicht die enter-Funktion auf das Element. Was ich gefunden habe, die funktioniert, ist:

myViewModel.enter = function(something, item) { item.enter(); };

foreach:{data:myObservableArray, afterRender:$root.enter}

hinzufügen eine enter-Funktion auf der root-view-Modell und Bindung afterRender $root.geben Sie. Geben Sie dann übergeben Sie das Element als zweiten Parameter, so kann wiederum rufen das Element enter-Funktion, aber es fühlt sich an wie ein hack.

Kann mir jemand erklären, was hier Los ist?

Dank.

EDIT:

Zu klären, habe ich einen fiddle.

Was dieser tut, ist sehr einfach, und ist bedeckt in mehr Tiefe in der animierte übergänge Beispiel. Es läuft eine der Funktion in die Wurzel-view-Modell für jedes dom-element, das eingefügt wird mit dem foreach-binding.

Also die Frage ist: was ist, wenn ich will " item specific afterRender, afterAdd oder beforeRemove Funktionen? Ich konnte sehen, dass diese nützlich sein. Vor allem, wenn mit der Vorlage-Bindung dynamisch wählen Sie eine Vorlage (Hinweis 4). Gibt es eine saubere Art und Weise, dies zu tun? Jetzt habe ich ein enter Funktion im view-model-s-Stamm, der ruft einfach die enter Funktion auf das Element, aber wie ich oben sagte, dies fühlt sich wie ein hack.

InformationsquelleAutor nicholas | 2012-07-31

  1. 6

    NÖ, das ist der Weg es wurde entwickelt,.

    Aus der Dokumentation:

    Hinweis 3: Mit "afterRender", "afterAdd" und "beforeRemove"

    Manchmal möchten Sie vielleicht, um benutzerdefinierte post-Verarbeitungslogik auf die DOM-Elemente, die durch Ihre Vorlagen. Zum Beispiel, wenn Sie einen JavaScript-widgets-Bibliothek wie jQuery UI, könnten Sie abfangen möchten Sie Ihre Vorlagen " - Ausgang, so dass Sie können ausführen, jQuery-UI-Befehle zu transformieren einige der gerenderten Elemente in Datum-Picker, Slider, oder irgendetwas anderes.

    In der Regel der beste Weg, um solche post-processing auf DOM-Elemente zu schreiben benutzerdefinierte Bindung, aber wenn Sie wirklich wollen einfach nur, um den Zugriff auf die raw-DOM-Elementen emittiert wird, durch eine Vorlage, die Sie verwenden können, afterRender.

    Übergeben Sie eine Funktion Referenz (entweder ein funktionsliteral oder geben der name einer Funktion auf dem view-Modell) und Knockout ruft es sofort nach der Erstellung oder re-rendering Ihrer Vorlage.

    (Hervorhebung von mir)

    Wie er sagt, eine benutzerdefinierte Bindung ist ein weiterer Weg, es zu tun, und vielleicht besser, je nachdem, was das enter() Funktion hat.

    Kopieren und einfügen in die Dokumentation und die Beantwortung der Frage nicht immer die gleiche Sache. Ich hatte bereits die Dokumentation Lesen. Obwohl ich weiß, dass das nicht immer der Fall in diesem forum, also habe ich entfernt, die downvote. Das war nur Frust reden...
    Sorry, es frustriert Sie, ich habe nicht versucht zu putzen, Ihre Frage aus. Ich habe versucht, mehr zu tun, als füge Sie in der Dokumentation, aber die Erklärung über, dass war ziemlich einfach. Sie schien zu Fragen, warum es sich so und die Antwort ist: weil es entworfen wurde, zu.
    Ja, in Eile, ich traf die nach-unten-Taste, bevor ich darüber nachdachte. Du hast Recht, natürlich. Ich habe bearbeitet die Frage, um deutlicher zu sein. Wenn das, was ich versuche zu tun haben (ein Brauch, Element bestimmte, afterAdd-Funktion) ist nicht das, was knockout standardmäßig tut, dann stellt sich die Frage: wie kann ich das machen lassen, was ich will? Gibt es einen trick, den ich nicht sehe? Oder ein Stück code im Umlauf gibt, die ich verwenden könnte? Ich weiß nicht wirklich wollen, um einen Tag vergeuden Wiederaufbau der foreach verbindlich, wenn Sie jemand hat bereits getan, die für mich arbeiten...

    InformationsquelleAutor Tyrsius

  2. 5

    Unterstrich debounce (_.debounce) ist eine große Lösung in diesem Fall.

    Vorlage

    data-bind=" template: {foreach:myObservableArray, afterRender: runWhenAllRenderDone }

    debounce-Funktion wird ausgeführt, wenn afterRender nicht ausgelöst wird, in den letzten 100 Millisekunde.

    var runWhenAllRenderDone = _.debounce(myFunction, 100);

function myFunction(){
    //do some task but do it for once only
}

    ist es nicht genial?

    Das sollte Unterstreichen, debounce, kein Rückgrat.
    +1 In meinem Fall, ich kann 'afterRender' zu sein, dass die engin von knockout-fertig Rendern von html, weil ich lockerte die Logik der Funktion, ändern von Objekten in der observableArray; code ist nicht zugänglich, aus dem html. Ich weiß, dass ist nicht elegant, aber ich benutze auch ein timeout von x Millisekunden vor dem Aufruf einer anderen Funktion, die das hinzufügen von css, um die neuen Elemente und Knoten. In der Tat, ich nur setzen Sie ein Zeitlimit von 1 Millisekunden und nach dem aktualisieren meiner Seite Dutzende Male, sehe ich keinen Fall, wenn mein html-Code wird nicht korrekt aktualisiert. Danke.

    InformationsquelleAutor KhanSharp

Schreibe einen Kommentar