带剔除的 jqxDropDownList 无法绑定选定值
jqxDropDownList with knockout cannot bind selectedvalue
我正在尝试将 jqxDropDownList 选定值与 ko.observable 绑定,但我不知道哪里出了问题。它与常规的 <select>
标签一起工作,而不与 <div>
元素一起工作,正如我在下面的 HTML 中显示的那样。我需要用 jqwidgets dropdownlist 替换 <select>
并按照工作代码中的说明进行相应绑定。
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);
(不工作):在下面的标记中,无法像工作示例 *2 那样将值与 selectedMake 绑定。
<div id="make" data-bind="jqxDropDownList: {source: makes, autoDropDownHeight: true, height: 25, width: 200, displayMember : 'name'}"></div>
2* HTML(工作):
<select id="make" class="form-control select pull-left" data-bind="options: makes, value: selectedMake, optionsText : 'name', optionsValue : 'id'"></select>
请看:jsfiddle.net/euto6vmj
看来jqxknockout只支持按数组索引选择项目,所以你需要添加一个函数来抓取当前选择的索引。这里有两个函数与您的 selectedMake 和 selectedType observables 同步以获取选定的索引:
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());
});
每次设置 selectedMake() observable 时,这些都会自动更新。只需在您的数据绑定中使用它:
<div id="make" data-bind="jqxDropDownList: {source: makes, autoDropDownHeight: true, height: 25, width: 200, displayMember : 'name', selectedIndex: selectedMakeIndex }"></div>
...和类似的类型。
更新了 jsfiddle:http://jsfiddle.net/euto6vmj/1/
我正在尝试将 jqxDropDownList 选定值与 ko.observable 绑定,但我不知道哪里出了问题。它与常规的 <select>
标签一起工作,而不与 <div>
元素一起工作,正如我在下面的 HTML 中显示的那样。我需要用 jqwidgets dropdownlist 替换 <select>
并按照工作代码中的说明进行相应绑定。
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);
(不工作):在下面的标记中,无法像工作示例 *2 那样将值与 selectedMake 绑定。
<div id="make" data-bind="jqxDropDownList: {source: makes, autoDropDownHeight: true, height: 25, width: 200, displayMember : 'name'}"></div>
2* HTML(工作):
<select id="make" class="form-control select pull-left" data-bind="options: makes, value: selectedMake, optionsText : 'name', optionsValue : 'id'"></select>
请看:jsfiddle.net/euto6vmj
看来jqxknockout只支持按数组索引选择项目,所以你需要添加一个函数来抓取当前选择的索引。这里有两个函数与您的 selectedMake 和 selectedType observables 同步以获取选定的索引:
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());
});
每次设置 selectedMake() observable 时,这些都会自动更新。只需在您的数据绑定中使用它:
<div id="make" data-bind="jqxDropDownList: {source: makes, autoDropDownHeight: true, height: 25, width: 200, displayMember : 'name', selectedIndex: selectedMakeIndex }"></div>
...和类似的类型。
更新了 jsfiddle:http://jsfiddle.net/euto6vmj/1/