6

KnockoutJS カスタム バインディングの使用 Knockout によって削除される前に、DOM 要素をフェードアウトしようとしています。リストの選択が変更されると、現在次のように動作するJSFiddle の例があります。

  • 古いテキストはすぐに消えます
  • 新しいテキストは徐々にフェードインします。

ただし、次のことを希望します。

  • 古いテキストは徐々にフェードアウトします
  • 新しいテキストは徐々にフェードインします

これは可能ですか？削除しようとしている DOM 要素を操作する方法がわかりません。次の Update メソッドは、既に削除された後 (ただし、新しい DOM 要素が追加される前) にのみ起動します。

ko.bindingHandlers.fade= {
    update: function(element, valueAccessor) {
        $(element).hide().fadeIn(1500);
    }  
}
4

1 に答える 1

11

バインディングを使用せずにそれを解決する1つの方法textは、カスタムfadeバインディングの代わりに、テキストの追加と削除も処理する必要があります。このアプローチでは、フェードイン/フェードアウトロジックをフックできます。

したがって、fadeバインディングは次のようになります。

ko.bindingHandlers.fade = {
    init: function(element, valueAccessor) { 
        // initially don't show the element        
        $(element).hide();        
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).fadeOut(500, function() {
            // set the text of the element, 
            // value needs to be defined outside of the fadeOut callback to work
            ko.utils.setTextContent(element, value);
            $(element).fadeIn(500);
        });
    }
};

そして使用法：

<div data-bind="fade: selectedName" class="main"></div>

デモJSFiddle。

于 2012-10-30T06:15:29.717 に答える