カスタムバインディングを使用してKnockout.jsの "foreach"を使用して追加する要素をアニメーション化する方法

Question

knockout.js "foreach"関数を使用してページに追加したい画像の配列があります：

結合

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

私の習慣がある：

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 
    } 
}; 

私の問題は、それらすべてが、私は彼らが互い違いに来てほしいと同時に、ででてくるということです。私はノックアウトを使用して行うことができますそれらをずらすための良い方法はありますか？

カスタムバインディングを呼び出すときにjQueryキューを使用してキューにアニメーションを追加して、最後にアニメーションキューを実行できると思っていましたが、その方法についてはわかりません。

ありがとうございます。

Answer 1

遅延にforeachループ内の項目のインデックスを掛けます。

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

Javascriptを：：アイテムのゼロは0 * 1000ミリ秒は、アイテム1は1の遅延を持っているでしょう* 1000ミリ秒など

HTMLだろうそのための

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