KnockoutJS benutzerdefinierte Bindung feuern mehrere Male

Question

Ich versuche, eine Benachrichtigung DIV mit Acustom-Bindung zu zeigen, während auch anpassen, dass DIV CSS und HTML über 2 Observablen.

Das Problem ist, dass, wenn ich Wert dieser 2 Observablen ändern, ist es auch die benutzerdefinierte Bindung als auch aus irgendeinem Grund feuert.

Vorlage:

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

Benutzerdefinierte Handler:

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(''); 
     }); 
    } 
    } 
}; 

Triggern Code:

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

---

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

Answer 1

Dies ist auf die Tatsache, dass alle Bindungen auf einem einzigen Element Feuer zusammen. Hier ist ein Beitrag, der das aktuelle Verhalten beschreibt: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html. Dies ändert sich in KO 3.0, wo Bindungen unabhängig für ein Element verwaltet werden.

Eine Wahl, die Sie jetzt verwenden können, ist Ihre eigene computed in der init Funktion wie einzurichten:

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

Mit dieser Technik, die Sie simulieren die update Funktion, sondern ermöglicht es von der unabhängig zu handeln andere Bindungen auf dem Element. Der einzige kleine Nachteil ist, dass Sie derzeit keine Abhängigkeiten von Observablen erhalten, die in der Binding-Zeichenkette ausgepackt sind (wie fade: topMessageShow() statt fade: topMessageShow).