1

レンジスライダーで作業しています。スライダーには、sliderOptions 属性があり、値の 1 つは最大範囲を設定するためのものです。これを正しい方法で行っているかどうかわかりません。この要素にアクセスし、ユーザーがリンクをクリックした後に「最大」値を変更する構文は何ですか?

ユーザーが製品をクリックした後、「最大」の値を設定しようとしています。

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

2 に答える 2

0

さて、ついに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>
于 2013-06-13T19:30:46.053 に答える