KnockoutJS associazione personalizzata sparando più volte

Question

Sto provando a mostrare un DIV di notifica utilizzando l'associazione personalizzata, mentre anche regolare il CSS e HTML di DIV tramite 2 osservabili.

Il problema è che quando cambio il valore di quei 2 osservabili, spara anche il legame così per qualche motivo su ordinazione.

Template:

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

gestore personalizzato:

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

Triggering Codice:

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

---

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

Answer 1

Questo è legato al fatto che tutte le associazioni fuoco insieme su un unico elemento. Ecco un post che descrive il comportamento corrente: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html. Questo in realtà sta cambiando in KO 3.0, dove i collegamenti sono mantenuti indipendentemente su un elemento.

Una scelta che si potrebbe usare per ora è quello di impostare il proprio computed nella funzione init come:

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

Con questa tecnica si sta simulando la funzione update, ma permettendogli di agire in modo indipendente dalla altri attacchi sull'elemento. L'unico inconveniente minore è che al momento non si otterrebbe alcuna dipendenza da oggetti osservabili che vengono scartati nella stringa di associazione (ad esempio fade: topMessageShow() anziché fade: topMessageShow).