knockout.js - knockout js: range slider - syntax to change attribute -
i working range slider. slider has attribute slideroptions, 1 of values setting maximum range. cannot figure out if doing right way, syntax access element , change "max" value after user clicks link?
trying set value of 'max' after user clicks on product.
<a href="#" onclick="setcategory(500)">set option 2</a> | <a href="#" onclick="setcategory(1000)">set option 2</a>
the function trying call:
function setcategory(maxnum){ /// code stuck on $('#numslider').attr('data-bind).slideroptions("max",maxnum); }
the slider element:
<div class="slider" data-bind="slider: numberamount, slideroptions: {min: 100, max: maxval, range: 'min', step: 10}" id="numslider"> </div>
the code substantiate slider:
//slider
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')); } };
those bindings not allow changing min- or max-values. if use knockout-jqueryui library instead, can though:
<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); }
Comments
Post a Comment