Knockout.jsのコールバック

Bookmark this on Google Bookmarks
LINEで送る
Pocket

コールバックは以下が用意されている(バージョン3)
afterRender / afterAdd / beforeRemove / beforeMove / afterMove

<ul data-bind="foreach: { data: myItems, afterAdd: yellowFadeIn }">
    <li data-bind="text: $data"></li>
</ul>
 
<button data-bind="click: addItem">Add</button>
 
<script type="text/javascript">
    ko.applyBindings({
        myItems: ko.observableArray([ 'A', 'B', 'C' ]),
        yellowFadeIn: function(element, index, data) {
            $(element).filter("li")
                      .animate({ backgroundColor: 'yellow' }, 200)
                      .animate({ backgroundColor: 'white' }, 800);
        },
        addItem: function() { this.myItems.push('New item'); }
    });
</script>

参照
http://knockoutjs.com/documentation/foreach-binding.html#note_7_postprocessing_or_animating_the_generated_dom_elements

foreach bindingでは、最後にコールバックされるのではなく毎回呼び出される。
最後に一回だけ処理を行いたい場合は、以下のように毎回要素数をチェックしてレンダリングが終わったかどうか判断する等が必要。

renderedHandler: function (elements, data) {
    if ($('#containerId').children().length === ko.toJS(this.myItems).length) {
        // Only now execute handler
    }
}

参照
http://stackoverflow.com/questions/14254317/success-callback-after-knockout-js-finishes-rendering-all-the-elements