Question

我正在使用范围滑块。滑块具有属性sliderOptions，其中一个值用于设置最大范围。我无法弄清楚我是否以正确的方式执行此操作，访问此元素的语法是什么，并在用户单击链接后更改“max”值？

尝试在用户点击产品后设置'max'的值。

 <a href="#" onclick="setCategory(500)">Set Option 2</a> | <a href="#" onclick="setCategory(1000)">Set Option 2</a>

我试图打电话的功能：

function setCategory(maxnum){
   /// code I am stuck on
   $('#numslider').attr('data-bind).sliderOptions("max",maxnum);
}

滑块元素：

 <div class="slider" data-bind="slider: numberAmount, sliderOptions: {min: 100, max: maxVal, range: 'min', step: 10}" id="numslider"> </div>

用于证实滑块的代码：

//滑块

ko.bindingHandlers.slider = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    $(element).slider(options);
    ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
        var observable = valueAccessor();
        observable(ui.value);
    });
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).slider("destroy");
    });
    ko.utils.registerEventHandler(element, "slide", function (event, ui) {
        var observable = valueAccessor();
        observable(ui.value);
    });
  },
  update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (isNaN(value)) value = 0;
    $(element).slider("value", value);

    //console.log($(element).attr('data-bind'));
  }
};

Answer 1

这些绑定不允许更改最小值或最大值。如果您使用Knockout-jQueryUI library，则可以轻松地执行此操作：

http://jsfiddle.net/3UvRh/

<div class="slider" data-bind="slider: { value: numberAmount, min: 100, max: maxVal,
    range: 'min', step: 10}" id="numslider"></div>

function ViewModel() {
    var self = this;

    self.numberAmount = ko.observable(200);
    self.maxVal = ko.observable(500);
}

$(function () {
    var vm = new ViewModel();
    window.viewModel = vm;
    ko.applyBindings(vm);
});

function setCategory(maxnum) {
    var vm = window.viewModel;
    vm.maxVal(maxnum);
}

Answer 2

好吧，我终于让jQuery Mobile v1.3.1 RangeSlider与KnockOut一起使用

    //Slider event handler
    ko.bindingHandlers.slider = {
        init: function (element, valueAccessor) {
            var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()); // Get the current value of the current property we're bound to
            $(element).slider();
            element.type = 'number';
            $(element).attr('data-type', 'range');
            $(element).val(valueUnwrapped).slider('refresh');
            ko.utils.registerEventHandler(element, "change", function (event, ui) {
                var observable = valueAccessor();
                observable($(element).val());
            });
        },
        update: function (element, valueAccessor, allBindingsAccessor) {
            var value = valueAccessor();
            var valueUnwrapped = ko.utils.unwrapObservable(value);

            $(element).val(valueUnwrapped).slider('refresh');
        }
    };

这就是你如何使用它

<div data-role="fieldcontain">
   <div data-role="rangeslider" data-mini="true" >
     <label for="slider-Min">Label:</label>
     <input type="range" name="slider-Min" id="slider-Min" min="0" max="10000" data-bind="slider: minVal">
     <label for="slider-Max">Label:</label>
     <input type="range" name="slider-Max" id="slider-Max" min="0" max="10000" data-bind="slider: maxVal">
   </div>
</div>

knockout js：range slider - 更改属性的语法

2 个答案: