слайдов с jqSlider и нокаута JS

Question

У меня есть bindingHandler так:

ko.bindingHandlers.percentageSlider = { 
init: function (element, valueAccessor, allBindingsAccessor) { 
    var options = allBindingsAccessor().percentageSliderOptions || {}; 
    $(element).slider(options); 
    ko.utils.registerEventHandler(element, "slidechange", function() { 
     var observable = valueAccessor(); 
     observable($(element).slider("value")); 
    }); 
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).slider("destroy"); 
    }); 
    ko.utils.registerEventHandler(element, "slide", function() { 
     var observable = valueAccessor(); 
     observable($(element).slider("value")); 
    }); 
}, 
update: function (element, valueAccessor) { 
    var value = lo.unwrap(valueAccessor()); 
    $(element).slider("value", value); 

} 
}; 

и шаблон связывания ползунок следующим образом:

<tr> 
    <td class="caption-cell">@Translate("EditProbability")</td> 
    <td width="75%"> 
     <div style="float:left;" data-bind="percentageSlider: probability, percentageSliderOptions: {min: 0, max: 100, range: 'min', step: 10}"></div> 
     <div style="float:left;margin:0 0 0 10px" data-bind="dynamicText: function(){ return probability() + '%'; }"></div> 
    </td> 
</tr> 

Обработчик dynamicText выглядит следующим образом:

ko.bindingHandlers.dynamicText = { 
'update': function (element, valueAccessor) { 
    var value = lo.unwrap(valueAccessor()); 
    if (typeof value === 'function') { 
     value = value(element); 
    } 
    if ((value === null) || (value === undefined)) { 
     value = ""; 
    } 
    if (typeof element.innerText == "string") { element.innerText = value; } 
    else { element.textContent = value; } 
} 
}; 

Теперь моя проблема в том, что ползунок имеет неправильное поведение, иногда я не могу добраться до 100%, а иногда значение является переворотом в десятки от того, что должно быть. Если я просто нажимаю один раз на слайдер, он всегда переходит в правильное положение. Я хочу, чтобы процент обновлялся при сдвиге ползунка, и я также хочу, чтобы ползунок правильно обновлялся нокаутом (с событием обновления). Какой подход мне следует принять здесь? Спасибо за прочтение.

Answer 1

Вот рабочий jsFiddle: http://jsfiddle.net/jearles/yumLr/

Ваша проблема заключается в том, что вам нужно использовать: ui.value, чтобы получить обновленные значения ручки в слайд и slidechange обработчиков событий. Обратите внимание на измененные сигнатуры обработчика событий.

Answer 2

Johns, решение отличное, я просто отправляю это, потому что я не верю, что он действительно касался оригинальной проблемы.

Я считаю, что фактическая проблема заключается в том, как значение было вытащено в функции обновления. Линия:

var value = lo.unwrap(valueAccessor()); 

является ошибочным. Если я обновлю эту линию:

var value = ko.utils.unwrapObservable(valueAccessor()); 

как оригинальное решение, без использования параметров событий и пользовательского интерфейса, а также предлагаемое решение, кажется, функционирует одинаково.

Ссылка: http://jsfiddle.net/JTY8v/4/