knockout.js - foreachバインディングと「afterAdd」でノックアウト.jsを使用するときに、初期ロードのアニメーションを停止するにはどうすればよいですか

Question

項目を observableArray に追加するときにかなりの slideDown 効果が得られるように、 afterAdd バインディングを指定しました。うまく機能し、かっこよく見えます。

問題は初期ロードにあります。データ ソースから読み込み、observableArray を返された json データに設定しています。画面上の 20 個のアイテムがすべて同時に滑り落ちると想像してください。かっこよくない。どうすればそれを防ぐことができますか？

スライド機能:

vm.addItem = function (elem) {
    if (elem.nodeType === 1) { $(elem).hide().slideDown(); }
};

単一のアイテムを追加すると素敵に見えます:

vm.postComment = function () {
    $.post('Place/PostComment', { placeId: vm.placeId(), comment: vm.comment() }, function (comment) {
        vm.comments.push(comment);
        vm.comment('');
    });
};

初期値を設定するときはあまり良くありません。追加するたびに下にスライド:

vm.loadPlace = function () {
    $.getJSON('Place/GetComments', { placeId: vm.placeId() }, function (data) {
        vm.comments(data.Comments);
    });
};

2012/11/16 朝更新

Vyacheslav Voronchuk の提案から、私の HTML は次のようになります。

<ul id="placeComments" data-bind="foreach: { data: comments, afterAdd: addItem, afterRender: renderedComments, beforeRemove: removeItem }">

Javascript は次のようになります。

vm.renderedComments = function () {
    loading = false;
};

vm.addItem = function (elem) {
    if (!loading) {
        if (elem.nodeType === 1) {
            $(elem).hide().slideDown();
        }
    }
};

vm.loadPlace = function () {
    $.getJSON('Place/GetPlace', { placeId: vm.placeId() }, function (data) {
        loading = true;
        vm.comments(data.Comments);
    });
};

アニメはまだ見てます。デバッガーを使用すると、addItem 関数に 2 回入ることがわかります。

余談ですが、これがドキュメントがslideDownの代わりにfadeInを使用している理由だと思います。乗り換えた方がいいのかな…