Knockout benutzerdefinierte Bindung Update-Funktion nicht feuern

Question

Ich habe eine benutzerdefinierte Knockout-Bindung, animiert einen Kippschalter auf eine "Ein" oder "Aus" -Position. Mein Problem ist, dass die Update-Funktion nur unmittelbar nach der Initialisierung ausgelöst wird und nicht, wenn sich der beobachtbare Wert ändert. Irgendwelche Ideen, was ich falsch mache?

ko.bindingHandlers.toggleSwitch = { 

    init: function (element, valueAccessor) { 
     var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()); 
     var value = valueUnwrapped.value; 
     var target = $(element); 
     var disabled = valueAccessor().disabled; 

     var id = 'ul' + (++ko.bindingHandlers['uniqueId'].currentIndex); 
     var html = ['<div class="switch-mask"><ul id="' + id + '"', 'class="on-off-switch">', '<li class="on-switch">' + valueAccessor().on + '</li>', '<li class="on-off-knob"></li>', '<li class="off-switch">' + valueAccessor().off + '</li>', '</ul></div>'].join(''); 

     target.replaceWith(html); 

     var mainTarget = $('#' + id); 
     if (value()) { 
      mainTarget.children('.on-switch').animate({ 'margin-left': '0px' }); 
      mainTarget.children('.on-off-knob').animate({ 'margin-left': '0px' }); 
     } 
     else { 
      mainTarget.children('.on-switch').animate({ 'margin-left': '-28px' }); 
      mainTarget.children('.on-off-knob').animate({ 'margin-left': '-1px' }); 
     }; 

     if (!disabled) { 
      mainTarget.on('click', function() { 
       //this fires every time the toggle switch is clicked. 
       var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()); 
       if (value()) { 
        mainTarget.children('.on-switch').animate({ 'margin-left': '0px' }); 
        mainTarget.children('.on-off-knob').animate({ 'margin-left': '0px' }); 
        value(false); 
       } else { 
        mainTarget.children('.on-switch').animate({ 'margin-left': '-28px' }); 
        mainTarget.children('.on-off-knob').animate({ 'margin-left': '-1px' }); 
        value(true); 
       } 

       value.valueHasMutated(); 
      }); 
     } 
    }, 
    update: function (element, valueAccessor) { 
     var value = valueAccessor(); 
     var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()); 
     console.log('update called'); 
    } 
}; 

ko.virtualElements.allowedBindings.toggleSwitch = true; 

Dies ist meine Bindung:

<!-- ko toggleSwitch:{value:data.model.Settings.HtmlEmail,on:'On',off:'Off'}--> 
<!-- /ko --> 

Answer 1

Das Update-Ereignis nicht ausgelöst wird, weil man nicht direkt auf die beobachtbare Bindung, sondern auf ein Objekt eine Eigenschaft enthält value Satz auf die beobachtbaren benannt . Wie ich dies in der Vergangenheit erreicht haben, ist die Update-Funktion auf dem benutzerdefinierten Bindung und einfach einstellen ein Abonnement auf dem beobachtbaren in der in der init-Funktion, wie dies zu unterlassen:

ko.bindingHandlers.toggleSwitch = { 

    init: function (element, valueAccessor) { 
    var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()); 
    var value = valueUnwrapped.value; 

    /// logic omitted for clarity 

    value.subscribe(function(newValue) { 
     console.log('update called'); 
    }); 

    if (!disabled) { 
     /// omitted for clarity 
    } 
    } 
};