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％，有时这个值距离它应该是几十。如果我只是在滑块上单击一次，它总是会转到正确的位置。我想在滑动滑块时更新百分比，我还希望滑块能够通过knockout（使用更新事件）正确更新。我应该采取什么方法？谢谢你的阅读。

Answer 1

这是一个有效的jsFiddle：http://jsfiddle.net/jearles/yumLr/

您的问题是您需要使用：ui.value来获取slide和slidechange事件处理程序中更新的句柄值。请注意已更改的事件处理程序签名。

Answer 2

约翰斯，解决方案非常好，我只是发布这个，因为我不相信它实际上解决了原始问题。

我认为实际问题是在更新功能中提取值的方式。这一行：

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

是错误的。如果我将该行更新为：

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

原始解决方案，不使用事件和ui参数，并且所提出的解决方案似乎功能相同。

参考：http://jsfiddle.net/JTY8v/4/

使用jqSlider和knockout js滑动事件

2 个答案: