绑定更新后更新范围滑块答案

【问题标题】：Update range slider afer binding update绑定更新后更新范围滑块
【发布时间】：2015-02-20 20:28:52
【问题描述】：

我使用解释的问题here 制作了一个范围滑块，但我在第二个答案中遇到了与其中一个 cmets 相同的问题：更新我的绑定值后，它不会更新范围滑块这是我的代码：

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);
        }
    };

我的视图模型：

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()]);

        }

但页面没有更新范围。我会寻求帮助。

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案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

【讨论】：