Question

我使用解释的问题here创建一个范围滑块，但我对第二个答案的注释之一有同样的问题：更新我的绑定值后，它不会更新范围滑块这是我的代码：

HTML：

<div id="slider-range" style="border: 1px solid #787878;" data-bind="slider: range, sliderOptions: { min: minPrice(), max: maxPrice(), step: 1, range:true }">

// flexslider绑定处理程序

 ko.bindingHandlers.slider = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = allBindingsAccessor().sliderOptions || {};
            var observable = valueAccessor();

            if (observable().splice) {
                options.range = true;
            }

            options.slide = function (e, ui) {
                observable(ui.values ? ui.values : ui.value);
            };

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).slider("destroy");
            });

            ko.utils.registerEventHandler(element, "slide", function (event, ui) {
                observable(ui.values ? ui.values : ui.value);
            });

            $(element).slider(options);
        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            if (value instanceof Array) {
                var value1 = ko.utils.unwrapObservable(value[0]);
                var value2 = ko.utils.unwrapObservable(value[1]);
                if (value1) {
                    value = [value1, value2];
                }
                else value = 0;
            }
            else if (isNaN(value)) value = 0;
            $(element).slider(value.slice ? "values" : "value", value);
            //  $(element).slider(value.slice ? "values" : "value", value);
        }
    };

我的viewmodel：

function viewmodel() {
self.minPrice = ko.observable(0);
        self.maxPrice = ko.observable(2000);
self.range= ko.observableArray([self.minPrice(), self.maxPrice()]);
};

当我应用$ ajax请求时，我使用如下函数重新加载数据：

 self.loadDataFromServer = function (data) {

            self.minPrice(data.minPrice);
            self.maxPrice(data.maxPrice);
            self.range([self.minPrice(), self.maxPrice()]);

        }

但页面不会更新范围。我会提供一些帮助。

Answer 1

我在另一个问题上找到答案here

使用以下命令更改更新部分：

 update: function (element, valueAccessor, allBindingsAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            $(element).slider(value.slice ? "values" : "value", value);
            $(element).slider("option", allBindingsAccessor().sliderOptions)
        }

一个更新的示例here

绑定更新后更新范围滑块

1 个答案: