淘汰赛 js：范围滑块 - 更改属性的语法答案

【问题标题】：knockout js: range slider - syntax to change attribute淘汰赛 js：范围滑块 - 更改属性的语法
【发布时间】：2017-02-27 23:24:36
【问题描述】：

我正在使用范围滑块。滑块有一个属性sliderOptions，其中一个值用于设置最大范围。我不知道我这样做是否正确，在用户单击链接后访问此元素并更改“最大值”值的语法是什么？

在用户点击产品后尝试设置“最大值”的值。

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

【问题讨论】：

标签： knockout.js attributes

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

【讨论】：

太好了，非常感谢。这个滑块是否能够捕获幻灯片更改事件？
value observable 将被更新。您可以subscribe 以在更改时收到通知。（在这种情况下，它是numberAmount）。

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

【讨论】：