Javascript 带敲除的jqxDropDownList无法绑定selectedvalue

我试图用ko.observable绑定jqxDropDownList选择的值，但我无法找出错误所在。它使用的是常规的

标记，而不是

元素，正如我在下面的HTML文件中所显示的那样。我需要用jqwidgets dropdownlist替换

，并按照工作代码中的说明进行相应的绑定

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

（不工作）：在下面的标记中，无法使用selectedMake绑定值，如工作示例*2所示

<div id="make" data-bind="jqxDropDownList: {source: makes, autoDropDownHeight: true, height: 25, width: 200, displayMember : 'name'}"></div>

2*HTML（工作模式）：

---

请看一看：jsfiddle.net/euto6vmj

看起来jqxknockout只支持按数组索引选择项，因此您需要添加一个函数来获取当前选择的索引。以下两个函数与selectedMake和selectedType Observable同步，以获取所选索引：

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（）设置为可观察时，这些都会自动更新。只需在数据绑定中使用它：

<div id="make" data-bind="jqxDropDownList: {source: makes, autoDropDownHeight: true, height: 25, width: 200, displayMember : 'name', selectedIndex: selectedMakeIndex }"></div>

。。。类型也差不多

---

更新的JSFIDLE:

看起来jqxknockout只支持按数组索引选择项，因此需要添加一个函数来获取当前选择的索引。以下两个函数与selectedMake和selectedType Observable同步，以获取所选索引：

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（）设置为可观察时，这些都会自动更新。只需在数据绑定中使用它：

<div id="make" data-bind="jqxDropDownList: {source: makes, autoDropDownHeight: true, height: 25, width: 200, displayMember : 'name', selectedIndex: selectedMakeIndex }"></div>

。。。类型也差不多

---

更新的JSFIDLE:

Whoops，你能发布你正在使用的自定义jqxDropDownList bindingHandler吗？哦，我明白了。。。您正在使用的这个jqxknockout包含自定义BindingHandler。看起来它们只支持按索引设置所选的值，因此您必须编写一个计算函数来获取索引请看一看：Fiddle有助于一吨。那么，您希望将其选择为make和type？没错，对于这两个hoops，您可以发布您正在使用的自定义jqxDropDownList bindingHandler吗？哦，我明白了。。。您正在使用的这个jqxknockout包含自定义BindingHandler。看起来它们只支持按索引设置所选的值，因此您必须编写一个计算函数来获取索引请看一看：Fiddle有助于一吨。所以你想把它的牌子和型号都选出来吗？没错，在我把它标为答案之前谢谢你，你能看看这个冰箱吗，我可以让dropdoewn正确地相互绑定：它们应该具有与前面的

相同的行为。是的，我认为您必须使用，因为它无法像在普通的旧敲除中那样指定单独的值/选项值。在dataadapter中，您必须将其连接起来，以便正确填充selectedMake（）。谢谢，在我将其标记为已回答之前，请您看看这台冰箱，我可以让dropdoewn正确地相互绑定：它们应该具有与前面的

相同的行为。是的，我认为您必须使用，因为它无法像在普通的旧敲除中那样指定单独的值/选项值。在dataadapter中，您必须将其连接起来，以便正确填充selectedMake（）