3

同じinitコードを使用し、同じ値にバインドされているこれら2つのバインディングがありますが、同じではありません。1つ目は正常に動作し、2つ目はinitの代わりに更新を実行します。バインディングは次のとおりです。

    function initToggle(element, valueAccessor) {
    // Initially set the element to be instantly visible/hidden depending on the value
    var value = valueAccessor();
    $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
};

//Binding Handlers
ko.bindingHandlers.fadeVisible = {
    init: initToggle,
    update: function (element, valueAccessor) {
        // Whenever the value subsequently changes, slowly fade the element in or out
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
    }
};

ko.bindingHandlers.slideVisibleVertical = {
    init: initToggle,
    update: function(element, valueAccessor, allBindingsAccessor) {        
        var value = valueAccessor(); //Lastest binding value
        var allBindings = allBindingsAccessor(); //other bindings, allows options

        var valueUnwrapped = ko.utils.unwrapObservable(value); 
        var duration = allBindings.slideDuration || 400; // 400ms is default duration unless otherwise specified

        if (valueUnwrapped == true)
             $(element).show('slide', {direction: 'up'}, duration);
        else
            $(element).hide('slide', {direction: 'up'}, duration);
    }
};

文字通り、同じinit関数。これは、同じ値にバインドされた2つのボタンを示すフィドルです。fadeVisible図のように開始しますが、slidevisibleVerticalスライドインします。どちらも更新時にアニメーション化します。誰もがここで何が起こっているのか知っていますか？

4

2 に答える 2

4

このupdate関数は常に初回も実行されます。

要素はすでに表示されてfadeVisibleいるので、フェードインしても何も起こりません。

他のバインディングslideでは、表示されていても、それを呼び出すとアニメーション化されます。

あなたがそれを扱うことができるいくつかの異なる方法：

  • 要素（$ data）に何かを格納して、最初のパスにいることを示し、更新の最後としてクリアします（またはその逆）。
  • スライドする前に視認性を確認してください（コメントで述べたように）
于 2012-06-06T21:39:32.177 に答える