Question

我的Jquery Slider与Knockout JS结合使用时遇到了一个小问题我想通过observable值绑定slider max选项。

以下是我的滑块类：

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

Answer 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());
    }
};

Answer 2

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

它允许我从knockout observable动态设置jQuery Slider Option，如“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>

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

2 个答案: