2013-08-27 3 views
10

У меня есть пользовательская привязка нокаута, которая анимирует тумблер в положение «включено» или «выключено». Моя проблема заключается в том, что функция обновления запускается только сразу после инициализации, а не при изменении наблюдаемого значения. Любые идеи, что я делаю неправильно?Функция обновления нестандартного привязки нокаута не работает

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; 

Это мое связывание:

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

ответ

16

Событие обновление не увольняют, потому что вы не являются обязательными непосредственно наблюдаемой, а объект, содержащий свойство с именем value набор к наблюдаемым , Как я совершил это в прошлом, чтобы опустить функцию обновления на пользовательские привязки и просто установить подписку на наблюдаемое в в функции инициализации, например:

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

дракончика, похоже, я назвав моего следующего ребенка XDumaine. Большое вам спасибо за вашу помощь. – SquidScareMe

Смежные вопросы