KnockoutJS 设置 jQuery Mobile 滑块的最大选项

Posted 2023-05-09

【中文标题】KnockoutJS 设置 jQuery Mobile 滑块的最大选项

【英文标题】：KnockoutJS set max option of jQuery Mobile slider

【发布时间】：2015-02-13 20:51:30

【问题描述】：

我的 Jquery Slider 与 Knockout JS 结合使用时有一个小问题 我想通过可观察值绑定滑块最大选项。

这是我的滑块类：

<div>
            <label for="Range1Slider">GRP:</label>
            <input type="range" name="Range1Slider" id="Range1" data-track-theme="c" min="10" max="200" step="10" data-bind="value: value1, slider: value1" />
        </div>

和我的 bindingHandler 用于获取和设置滑块值：

 ko.bindingHandlers.slider = 
        init: function (element, valueAccessor) 
            // use setTimeout with 0 to run this after Knockout is done
            setTimeout(function () 
                // $(element) doesn't work as that has been removed from the DOM
                var curSlider = $('#' + element.id);
                // helper function that updates the slider and refreshes the thumb location
                function setSliderValue(newValue) 
                    curSlider.val(newValue).slider('refresh');
                
                // subscribe to the bound observable and update the slider when it changes
                valueAccessor().subscribe(setSliderValue);
                // set up the initial value, which of course is NOT stored in curSlider, but the original element :\
                setSliderValue($(element).val());
                // subscribe to the slider's change event and update the bound observable
                curSlider.bind('change', function () 
                    valueAccessor()(curSlider.val());
                );
            , 0);
        ,
        update: function (element, valueAccessor) 
            var newValue = ko.utils.unwrapObservable(valueAccessor());
            if (isNaN(newValue)) newValue = 0;
            var curSlider = $('#' + element.id);
            // helper function that updates the slider and refreshes the thumb location
            function setSliderValue(newValue) 
                curSlider.val(newValue).slider('refresh');
            
        
    ;

【参考方案1】：

html:

<div>
     <label for="Range1Slider">GRP:</label>
     <input type="range" name="Range1Slider" data-bind="slider:  theme: 'c', min: 10, max: yourObservable, step: 10 " />
</div>

自定义绑定：

ko.bindingHandlers.slider = 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) 
      var options = ko.unwrap(valueAccessor()),
          valueObservable = allBindings().value;

      // to your init work for the slider-plugin
      // maybe the following ?
      $(element).slider(options);

      // logic for element-disposal should be implemented

    ,
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) 
      var options = ko.unwrap(valueAccessor()),
          valueObservable = allBindings().value;

      // this will be called if the value-binding changed or the max-observable changed
      // update the max-option
      // maybe the following ?
      $(element).slider('max', options.max());
    
;

【讨论】：

非常感谢，但我收到一个错误“滑块小部件实例没有这样的方法'max'”可能是什么？

$(element).slider('option', 'max', options.max());

新年快乐:-) 新年好运。我已经尝试过您的更改，但仍然无法正常工作。得到一个新错误：无法在初始化之前调用滑块上的方法；试图调用方法'max'

【参考方案2】：

我现在有一个可行的解决方案。

它允许我从可观察到的淘汰赛中动态设置 jQuery 滑块选项，如“max”或“step”。

我还有一个问题。如何获取滑块值并将其绑定到我的 observable？

http://jsfiddle.net/AndyKay/dua7gkjo/

这是我现在的功能：

<div data-role="content">

    <div>
        <input data-bind="textinput: max"></input>
    </div>
    <div>
        <input data-bind="textinput: step"></input>
    </div>
    <div>
        <span data-bind="text: value1"></span>
    </div>

    <div>
        <label for="Range1Slider">GRP:</label>
        <input type="range" name="Range1Slider" data-bind="slider:  value: value1, min: 10, max: max, step: step " />
    </div>


</div>


<script type="text/javascript">

    function ViewModel() 
        var self = this;
        self.max = ko.observable(500);
        self.value1 = ko.observable(50);
        self.step = ko.observable(100);
    


    ko.bindingHandlers.slider = 
        init: function (element, valueAccessor, allBindings, ViewModel, bindingContext) 
            var options = ko.unwrap(valueAccessor()),
                valueObservable = allBindings().value;
            //var value = ko.utils.unwrapObservable(valueAccessor());
            //if (isNaN(value)) value = 0;
            $(element).prop(
                min: 0,
                max: options.max(),
                step: options.step(),
                value: options.value()
            ).slider("refresh");
        ,
        update: function (element, valueAccessor, allBindings, ViewModel, bindingContext) 
            var options = ko.unwrap(valueAccessor()),
                valueObservable = allBindings().value;
            $(element).prop('step', options.step());
            $(element).prop('max', options.max());

        
    
    $(document).on("pagecreate", function () 
        ko.applyBindings(ViewModel);
    );


</script>