Własne wiązanie niestandardowe KnockoutJS wiele razy

Question

Próbuję pokazać DIV powiadomień za pomocą wiązania niestandardowego, a także dostosowując kod CSS i HTML DIV przez 2 obserwowalne.

problemem jest to, że przy zmianie wartości tych 2 obserwabli, ale także pożary wiążącą, jak również z jakiegoś powodu przyzwyczajeń.

Szablon:

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

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

Wyzwalanie Kod:

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

---

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

Answer 1

Jest to związane z faktem, że wszystkie powiązania ogień razem na jednym elemencie. Oto post opisujący obecne zachowanie: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html. To się faktycznie zmienia w KO 3.0, gdzie wiązania są utrzymywane niezależnie od elementu.

Jeden wybór, że można użyć do teraz jest założyć własną computed w funkcji init jak:

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

Dzięki tej technice jesteś symulującym funkcję update, ale pozwala mu działać niezależnie od inne wiązania na elemencie. Jedyną niewielką wadą jest to, że obecnie nie ma żadnych zależności od obserwowalnych, które są rozpakowane w ciągu wiążącym (np. fade: topMessageShow() zamiast fade: topMessageShow).