Knockout.js knockout js:range slider-更改属性的语法

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

尝试在用户单击产品后设置“max”的值

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

滑块元素：

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

---

这些绑定不允许更改最小值或最大值。如果改用，您可以轻松做到：

函数ViewModel（）{
var self=这个；
self.numberAmount=ko.可观察（200）；
self.maxVal=ko.可观察（500）；
}
$（函数（）{
var vm=new ViewModel（）；
window.viewModel=vm；
ko.应用绑定（vm）；
});
函数集合类别（maxnum）{
var vm=window.viewModel；
vm.maxVal（maxnum）；
}

我终于让jQuery Mobile v1.3.1 RangeSloider与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>

标签：
标签：

太好了，非常感谢。此滑块是否能够捕获幻灯片更改事件？可观察的

值将被更新。您可以更改此设置，以便在更改时得到通知。（在本例中，它是
numberAmount
）。
    //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>