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

【问题标题】：KnockoutJS set max option of jQuery Mobile sliderKnockoutJS 设置 jQuery Mobile 滑块的最大选项
【发布时间】：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');
            }
        }
    };

【问题讨论】：

标签： javascript jquery jquery-mobile knockout.js

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

【讨论】：