Funzione di aggiornamento binding a eliminazione diretta non attiva

Question

Ho un attacco a strappo personalizzato che anima un interruttore a levetta in posizione "on" o "off". Il mio problema è che la funzione di aggiornamento si attiva immediatamente dopo init e non quando il valore osservabile cambia. Qualche idea su cosa sto facendo male?

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; 

Questo è il mio vincolante:

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

Answer 1

L'evento update non viene licenziato perché non si è vincolante direttamente osservabile, ma a un oggetto che contiene una proprietà denominata value insieme al osservabile . Come ho compiuto questo in passato è quello di omettere la funzione di aggiornamento sulla personalizzato vincolante e solo impostare una sottoscrizione sul osservabile nella nella funzione init, in questo modo:

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 
    } 
    } 
};