Funkcja aktualizacji węzła niestandardowego nie wyzwala

Question

Mam niestandardowe powiązanie, które powoduje przełączenie przełącznika do pozycji "włączony" lub "wyłączony". Mój problem polega na tym, że funkcja aktualizacji uruchamia się natychmiast po inicjacji, a nie wtedy, gdy zmienia się obserwowalna wartość. Jakieś pomysły, co robię źle?

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; 

To jest mój wiązania:

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

Answer 1

Impreza aktualizacja nie jest wyrzuceniu, ponieważ nie jesteś wiążące bezpośrednio do zaobserwowania, ale do obiektu zawierającego właściwość o nazwie value zestaw do zaobserwowania . Jak ja tego dokonał w przeszłości jest pominięcie funkcji aktualizacji na zwyczaj wiązania i po prostu ustawić subskrypcji na zaobserwować w w funkcji init, tak:

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