Função de atualização de ligação personalizada nocauteada não ativada
Eu tenho um enlace de nocaute personalizado que anima um comutador para uma posição 'on' ou 'off'. Meu problema é a função de atualização só é acionada imediatamente após o init e não quando o valor observável é alterado. Alguma idéia do que estou fazendo de errado?
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;
Esta é minha ligação:
<!-- ko toggleSwitch:{value:data.model.Settings.HtmlEmail,on:'On',off:'Off'}-->
<!-- /ko -->