KnockoutJSカスタムバインディングを複数回起動する

Question

私は、DIVのCSSとHTMLを2つの観測値で調整しながら、acustomバインディングを使用して通知DIVを表示しようとしています。

問題は、私はそれらの2回の観測の値を変更すると、それはまた、いくつかの理由のためだけでなくカスタムバインディングを発射するということです。

テンプレート：

<div class="alert top-alert" data-bind="fade: topMessageShow, css: topMessageType, html: topMessage"></div> 

カスタムハンドラ：

ko.bindingHandlers.fade = { 
    update: function resolveFade(element, valueAccessor, allBindingsAccessor) { 
    if (ko.utils.unwrapObservable(valueAccessor())) { 
     $(element).hide().delay(300).fadeIn('slow'); 
    } else { 
     // fade out the notification and reset it 
     $(element).fadeOut('slow', function() { 
     // reset those 2 observables that set class and HTML of the notification DIV 
     MyClass.topMessageType(''); 
     MyClass.topMessage(''); 
     }); 
    } 
    } 
}; 

トリガコード：

MyClass.topMessageType('alert-info'); 
MyClass.topMessage(msg); 
MyClass.topMessageShow(true); 

---

JSFiddle：http://jsfiddle.net/UrxXF/1/

Answer 1

これは、すべてのバインディングは、単一の要素に一緒に発射するという事実に関連しています。以下は、現在の動作を説明する投稿です：http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html。これは、バインディングが要素上で独立して維持されるKO 3.0では実際に変化しています。あなたは今のところ使用することができ

一つの選択肢は以下のようにinit機能にcomputed独自に設定することです。この手法で

ko.bindingHandlers.fade = { 
    init: function resolveFade(element, valueAccessor, allBindingsAccessor) { 
     ko.computed({ 
     read: function() { 
      /your logic goes here 
     }, 
     disposeWhenNodeIsRemoved: element 
     }); 
    } 
}; 

あなたはupdate機能をシミュレートするが、それはから独立して行動することができています要素上の他のバインディング唯一の小さな欠点は、バインディング文字列（例えばfade: topMessageShowではなくのように）にラップされていないオブザーバブルからの依存関係を現在取得しないことです。