4

概要

ノックアウトのデフォルトバインディングへの呼び出しを含むノックアウトカスタムバインディングを作成すると、最初の呼び出し後にカスタムバインディングが機能しなくなります。

この問題を確認するには、JSFiddleの例で、ddlで選択した項目を1回変更します。テキストは期待どおりに変更されます。もう一度変更すると、何も起こりません。失敗。

詳細

デフォルトのノックアウトバインディング「 html」を独自のカスタムバインディング「htmlFade」で拡張すると、奇妙な動作が見られます。私が探している動作はhtmlバインディングと同じですが、 DOM要素をフェードインおよびフェードアウトするためのJQueryフェードアニメーションがあります。

以下のコードサンプル。完全なJSFiddleの例はここで見ることができます。

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

<select data-bind="options: names, value: selectedName"></select>  
<data-bind="htmlFade : selectedName" class="main"></div>

Jsonデータは次のようになります。

var viewModel = {
    names: ko.observableArray(['Bob', 'Jon']),
    selectedName: ko.observable('Bob')
};

カスタムバインディングは次のようになります。

ko.bindingHandlers.htmlFade = {
    init: function(element, valueAccessor) {
        ko.bindingHandlers.html.init();
        $(element).hide();
    },
    update: function(element, valueAccessor) {
        $(element).fadeOut(700, function() {
           ko.bindingHandlers.html.update(element, valueAccessor);           
           $(element).fadeIn(700);
        });        
    }
};

私の目標は動作を拡張することであり、再作成することではないため、 「ko.bindingHandlers.html.update（element、valueAccessor）」という行を含むデフォルトのhtmlハンドラーを意図的に延期しています。

私が抱えている問題は、選択リストが最初に変更されたときに上記のコードが機能することです。その後、失敗します。

別のJSFiddleの例を作成しました。この例では、動作を拡張する代わりに、次の行「http://jsfiddle.net/jamshall/kYwEE/1/」 （デフォルトのhtmlバインディングのノックアウトソースからコピー）を追加して再作成しました。上記のhtml.update呼び出しの これはうまくいくようです。

それでは、私の質問は、デフォルトのバインディングへの呼び出しを含めると、最初の呼び出しの後にカスタムバインディングが機能しなくなるのはなぜですか？または、簡単にするために、JSFiddle1が機能しないのにJSFiddle2が機能するのはなぜですか？

助けてくれてありがとう

4

1 に答える 1

1

カスタムバインディングの機能は、計算されたオブザーバブルのように考えることができますupdate（Knockoutは、要素のバインディングが実行されるときに、計算されたオブザーバブルを使用して依存関係を追跡します）。したがって、カスタムバインディングでは、コードが非同期で実行されているため、バインドされているオブザーバブルへの依存関係を取得していません。

あなたのupdate中で、あなたはおそらく次のようなことをしたいと思うでしょう：

update: function(element, valueAccessor) {
    //just grab dependency
    ko.utils.unwrapObservable(valueAccessor());

    $(element).fadeOut(700, function() {
       ko.bindingHandlers.html.update(element, valueAccessor);           
       $(element).fadeIn(700);
    });        
}

したがって、依存関係を取得するためにobservableの値にアクセスするだけです。 ko.utils.unwrapObservable値が監視不能または監視可能であるかどうかに関係なく、値の取得を安全に処理します。

更新されたサンプル：http：//jsfiddle.net/rniemeyer/6UtsP/10/

于 2012-10-31T16:04:38.100 に答える