Wie verwendet man eine benutzerdefinierte Bindung zu animieren Elemente hinzugefügt werden mit "foreach" in Knockout.js

Question

Ich habe ein Array von Bildern, die ich zu einer Seite mit der knockout.js "foreach" -Funktion wie folgt hinzufügen möchte:

<div class="animation" data-bind="foreach: { data: frames }"> 
    <img data-bind="fadeInVisible: true" src="./media/test.jpg" /> 
</div> 

Meine individuelle Bindung ist:

ko.bindingHandlers.fadeInVisible = { 
    init: function (element, valueAccessor) { 
     var value = ko.unwrap(valueAccessor()); // Get the current value of the current property we're bound to 
     $(element).hide().delay("1000").fadeIn(); // jQuery will hide/show the element depending on whether "value" or true or false 
    } 
}; 

Mein Problem ist, dass sie alle zur gleichen Zeit kommen, in, wo ich sie in gestaffelten kommen will. Gibt es eine gute Möglichkeit, sie zu torkeln, die ich knockout nutzen kann?

Ich dachte, ich könnte vielleicht eine jQuery-Warteschlange verwenden, um eine Animation der Warteschlange hinzuzufügen, wenn ich meine benutzerdefinierte Bindung aufrufen und dann am Ende konnte ich die Animationswarteschlange ausführen, aber ich bin mir nicht sicher, wie das geht.

Vielen Dank.

Answer 1

Multiplizieren Sie die Verzögerung mit dem Index des Elements in foreach-Schleife. Artikel Null wäre 0 * 1000 ms, Punkt 1 eine Verzögerung von 1 * 1000 ms usw.

HTML haben würde:

<div class="animation" data-bind="foreach: { data: frames }"> 
    <img data-bind="fadeInVisible: true" src="./media/test.jpg" /> 
</div> 

Javascript:

ko.bindingHandlers.fadeInVisible = { 
    init: function (element, valueAccessor) { 
     var index = $index(); 
     $(element).hide().delay(index * 1000).fadeIn(); 
    } 
};