0

次のようなビューモデルがあります。

self.selectedItems = ko.observableArray();

self.onBeforeUnselectItem = function (elem) {
    if (elem.nodeType === 1)
        $(elem).fadeOut(function() {
            $(elem).remove();
        });
};

self.unselectItem = function (item) {
    self.selectedItems.remove(item);
    self.unSelectedItems.push(item);
};

私の見解は次のようになります。

<div data-bind="foreach: {data: selectedItems, beforeRemove: onBeforeUnselectItem}">
    <span data-bind="text: Name"></span> - <a href="#" data-bind="">Remove</a>
</div>

unSelectedItems私の問題は、フェードアウト アニメーションが終了する前に項目が押し込まれていることです。

unselectItemアニメーションが終了するまで待機するように呼び出す方法はありますか?
これは、クリックイベントがバインドされている方法が原因であることに気付きましたunselectItem

編集

とりあえず、unselectItem関数に遅延を入れます:
(これは明らかに理想的ではありません!)

self.unselectItem = function (item) {
        self.selectedItems.remove(item);
        setTimeout(function () {
            self.unSelectedItems.push(item);
        }, 350);
    };
4

1 に答える 1