1

crossFadeVisible bindingHandler を作成しようとしています。主なアイデアは、値を設定するときにフェードインしたいということです。値をクリアする (つまり、null に設定する) 場合はフェードアウトさせ、値を変更する場合は、古い値でフェードアウトし、新しい値でフェードインしたいと思います。

私はこれについて午後の大半を戦ってきたので、それが可能かどうかは完全にはわかりません.

私は、他の人がやっているのを見た後、このためのjsfiddleを作成することにしました ( http://jsfiddle.net/jrstarke/4DTFq/20/ )。

最初は値は未定義ですが、Set を押すと値が 1 に設定され、新しいボタンがいくつか追加されます。値をクリアすると、期待どおりに消え、再度設定すると正常に機能します。インクリメントを押すと、すべてが期待どおりに機能します。

そして今、私が説明できない部分。「2」が表示されている場合、インクリメントを押しても何も起こりません。クリア、ボタンは消えます (元の値をクリアしたため)。しかし、表示値は同じままです。

何が起こったように見えますが、説明できませんがvalue.displayed(value())、新しい表示値を現在の値に設定するために を呼び出すと、更新メソッドがすぐに再度呼び出され (?)、その時点でメソッドを実行します。完全に更新され、期待どおりに更新されますが、この更新メソッドが再度呼び出されることはないため、変更から値のバインドを解除したようです。

これを修正する方法を知っている人はいますか、それとも私がやろうとしていることは可能ですか?

4

1 に答える 1

2

問題は、ハンドラの更新コードが最初の の後に呼び出されないことfadeOutです。valueその理由は、バインディングが実際に読み取られることがないため、バインディングが依存していることを依存関係追跡コードが検出しないためです。そのため、値が実際に更新されても、バインディングが再トリガーされることはありません。

これが発生する理由はpostFade、バインディングが更新されているときにコードが呼び出されないためです。が完了すると、実際には後で呼び出されfadeOutます。postFade関数は false のときに呼び出されたため、最初に更新されたときに更新されますvalue.displayed。

valueこれを修正する簡単な方法は、更新コードが呼び出されたときにどこかを読み取ることです。値を読み取ろうとするだけで、必ずしも値を操作する必要はありません。

update: function(element, valueAccessor) {
    var value = valueAccessor();

    var postFade = function() {
        // postFade depends on `value`
        value.displayed(value());
        if (value.displayed()) $(element).fadeIn('fast');
    }

    if (value.displayed()) {
        // postFade is invoked later after the fade out
        $(element).fadeOut('fast', postFade);
        // dependent on `value.displayed`

        // get the value so the dependency tracking code
        // detects that the binding depends on it
        value();
    }
    else {
        // postFade is invoked immediately
        postFade();
        // dependent on `value.displayed` and `value`
    }
}
于 2012-10-21T06:41:02.133 に答える