javascript - jqxDropDownList with knockout cannot bind selectedvalue -
i trying bind jqxdropdownlist selected value ko.observable , can't figure out wrong. working regular <select> tags , not working <div> element, showing in html bellow. need replace <select> jqwidgets dropdownlist , bind accordingly stated in working code.
viewmodel: var viewmodel = function(){ var self = this; self.patternselectedindex = ko.observable(0); self.windowselectedindex = ko.observable(0); self.colorselectedindex = ko.observable(0); self.hardwareselectedindex = ko.observable(0); self.selectedmake = ko.observable(); self.selectedtype = ko.observable(); self.makes = [ {id:1, name: 'northwoods prestige', dimensions:true}, {id:2, name: 'forest bay', dimensions:true}, {id:3, name: 'timberland', dimensions:true} ]; self.types = [ {id: 1, make:1, name:'special reserve 138', patterns:[{file:'fb_classic', name:'fb clasic'},{file:'fb_long', name:'fb long'},{file:'fb_flush', name:'fb flush'}], colors:[{file:'brown', name:'brown'},{file:'oak', name:'oak'},{file:'cherry', name:'cherry'},{file:'green', name:'green'}], windows:[{file:'cascade', name:'cascade'},{file:'longpanel', name:'longpanel'},{file:'plain', name:'plain'},{file:'savanna', name:'savanna'},{file:'sunburst', name:'sunburst'},{file:'sherwood', name:'sherwood'}], hardware:[{file:'hardware1', name:'strap hinge'},{file:'hardware2', name:'door stud'},{file:'hardware3', name:'lift handle'}]}, {id: 2, make:1, name:'special reserve ii', patterns:[{file:'sr_81', name:'sr 81'}], colors:[{file:'almond', name:'almond'},{file:'white', name:'white'}], windows:[{file:'heritage', name:'colonial'},{file:'cascade', name:'cascade'}], hardware:[{file:'hardware1', name:'strap hinge'},{file:'hardware3', name:'lift handle'}]}, {id: 3, make:2, name:'tf 138', patterns:[{file:'rec_carraige', name:'rec carraige'}], colors:[{file:'green', name:'green'}, {file:'sepia', name:'sepia'}], windows:[{file:'cathedral', name:'cathedral'},{file:'cascade', name:'cascade'}], hardware:[{file:'hardware1', name:'strap hinge'},{file:'hardware3', name:'lift handle'}]}, {id: 4, make:2, name:'tf ii', patterns:[{file:'raised_carriage', name:'raised carriage'}], colors:[{file:'almond', name:'almond'}], windows:[{file:'cathedral', name:'cathedral'},{file:'cascade', name:'cascade'}], hardware:[{file:'hardware1', name:'strap hinge'},{file:'hardware3', name:'lift handle'}]}, {id: 5, make:3, name:'rp 25', patterns:[{file:'fb_classic', name:'fb classic'}], colors:[{file:'cherry', name:'cherry'}], windows:[{file:'cathedral', name:'cathedral'},{file:'cascade', name:'cascade'}], hardware:[{file:'hardware1', name:'strap hinge'},{file:'hardware3', name:'lift handle'}]}, {id: 6, make:3, name:'lp 25', patterns:[{file:'fb_long', name:'fb long'}], colors:[{file:'green', name:'green'}], windows:[{file:'cathedral', name:'cathedral'},{file:'cascade', name:'cascade'}], hardware:[{file:'hardware1', name:'strap hinge'},{file:'hardware3', name:'lift handle'}]} ]; self.doortypes = ko.computed(function(){ return ko.utils.arrayfilter(self.types, function(item){ return item.make === self.selectedmake(); }); }); self.matchingtypes = ko.computed(function () { return ko.utils.arrayfilter(self.doortypes(), function (item, index) { return item.id === self.selectedtype(); }); }); }; var model = new viewmodel(); ko.applybindings(model); (not working): in bellow markup there no way of binding value selectedmake in working example *2.
<div id="make" data-bind="jqxdropdownlist: {source: makes, autodropdownheight: true, height: 25, width: 200, displaymember : 'name'}"></div> 2* html (working):
<select id="make" class="form-control select pull-left" data-bind="options: makes, value: selectedmake, optionstext : 'name', optionsvalue : 'id'"></select> please take look: jsfiddle.net/euto6vmj
it looks jqxknockout supports selecting items array index, need add function grabs selected index. here 2 functions sync selectedmake , selectedtype observables selected index:
self.selectedmakeindex = ko.computed(function() { return self.makes.map(function(e) { return e.id; }).indexof(self.selectedmake()); }); self.selectedtypeindex = ko.computed(function() { return self.types.map(function(e) { return e.id; }).indexof(self.selectedtype()); }); every time set selectedmake() observable, these automatically updated. use in data-bind:
<div id="make" data-bind="jqxdropdownlist: {source: makes, autodropdownheight: true, height: 25, width: 200, displaymember : 'name', selectedindex: selectedmakeindex }"></div> ... , similar type.
updated jsfiddle: http://jsfiddle.net/euto6vmj/1/
Comments
Post a Comment