KnockoutJS reliure personnalisée tir plusieurs fois

Question

J'essaie d'afficher une notification DIV en utilisant la liaison personnalisée, tout en ajustant CSS et HTML DIV par 2 observables.

Le problème est que lorsque je change la valeur de ces 2 observables, il déclenche également la liaison personnalisée aussi bien pour une raison quelconque.

Modèle:

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

Gestionnaire personnalisé:

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

code Déclencher:

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

---

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

Answer 1

Ceci est lié au fait que toutes les liaisons feu ensemble sur un seul élément. Voici un article qui décrit le comportement actuel: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html. Ceci est en train de changer dans KO 3.0 où les liaisons sont maintenues indépendamment sur un élément.

Un choix que vous pouvez utiliser pour est maintenant de mettre en place votre propre computed dans la fonction init comme:

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

Avec cette technique, vous simulez la fonction update, mais ce qui lui permet d'agir indépendamment de la autres liaisons sur l'élément. Le seul inconvénient mineur est que vous n'obtiendrez actuellement aucune dépendance des observables qui sont déballés dans la chaîne de liaison (comme fade: topMessageShow() plutôt que fade: topMessageShow).