淘汰賽js：範圍滑塊 - 更改屬性的語法

我正在使用範圍滑塊。滑塊具有屬性sliderOptions，其中一個值用於設置最大範圍。我無法弄清楚我是否以正確的方式進行操作，在用戶單擊鏈接後訪問此元素並更改「最大」值的語法是什麼？淘汰賽js：範圍滑塊 - 更改屬性的語法

嘗試在用戶點擊產品後設置「最大值」的值。

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

來源

2013-05-21 scotty doesnt know

這些綁定不允許更改最小值或最大值。如果您使用Knockout-jQueryUI library相反，你可以很容易地做到這一點，但：

http://jsfiddle.net/3UvRh/

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

function ViewModel() { 
    var self = this; 

    self.numberAmount = ko.observable(200); 
    self.maxVal = ko.observable(500); 
} 

$(function() { 
    var vm = new ViewModel(); 
    window.viewModel = vm; 
    ko.applyBindings(vm); 
}); 

function setCategory(maxnum) { 
    var vm = window.viewModel; 
    vm.maxVal(maxnum); 
}

來源

2013-05-21 06:17:39

太好了，非常感謝。此滑塊是否有能力捕捉幻燈片更改事件？ –

'value'可觀察值將被更新。您可以[訂閱]（http://knockoutjs.com/documentation/observables.html#explicitly_subscribing_to_observables），以便在更改時收到通知。（在這種情況下，它是'numberAmount'）。 –

嗯，我終於得到了jQuery Mobile的V1.3.1 RangeSlider與淘汰賽工作

//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-13 19:30:46 Atul

淘汰賽js：範圍滑塊 - 更改屬性的語法

回答

相關問題