jqxDropDownList與淘汰賽不能綁定selectedvalue

Question

我想綁定一個jqxDropDownList選擇值與ko.observable，我不知道什麼是錯的。它正在使用常規的<select>標籤，並且它不適用於<div>元素，正如我在HTML中顯示的那樣。我需要用jqwidgets下拉列表替換<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

Answer 1

它看起來像jqxknockout只支持選擇由數組索引項，所以你會需要添加一個抓取當前選定索引的函數。這裏有兩個功能，與你的selectedMake和selectedType觀測同步來獲得所選擇的指標：

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> 

...類似的類型。

更新的jsfiddle：http://jsfiddle.net/euto6vmj/1/