5

カスタムバインディングを使用して通知DIVを表示しようとしていますが、2つのオブザーバブルを介してそのDIVのCSSとHTMLを調整しています。

問題は、これら 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/

4

1 に答える 1

3

これは、すべてのバインディングが 1 つの要素で同時に発生するという事実に関連しています。現在の動作を説明する投稿は次のとおりです: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html。これは、バインディングがエレメント上で独立して維持される KO 3.0 で実際に変更されています。

今のところ使用できる選択肢の 1 つは、次のような関数で独自の設定を行うことcomputedですinit。

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

この手法では、update関数をシミュレートしますが、要素の他のバインディングから独立して動作できるようにします。唯一の小さな欠点は、現在、バインド文字列でラップ解除されているオブザーバブルから依存関係を取得できないことです (fade: topMessageShow()ではなく のようにfade: topMessageShow)。

于 2013-06-06T15:50:50.467 に答える