Knockout.js - 創建可重用的級聯選擇

Question

是否可以使用KO從字典對象創建可重用的級聯組合框？

例如，該數據

{'A' : { 'A1':11, 'A2':12} , 
'B' : { 'B1':21, 'B2':22, 'B3':33}, 
'C' : { 'C1':31}} 

會產生兩個級聯盒，所述第一與所述選項 'A，B，C'。第二個會根據選擇進行更新。字典可能會改變高度，但樹會始終保持平衡。

是否可以從自定義綁定中創建元素？一個自定義綁定是否可以包含其他自定義綁定並訂閱它們？是自定義綁定，甚至在這裏的正確方法？

我將不勝感激一些指導。

Answer 1

基本上這就是我所做的

1. 創建一個預定義的結構/類，它知道它是否有 值或只是一個值的列表。
2. 在視圖方面顯示下拉列表，如果其他列表只顯示文本。
3. 在根vm上嵌套第一步創建的結構並創建字典。

這裏是VM

var optionVM = function (name,isList, v) { 
    var self = this; 
    self.name=ko.observable(name); 
    if (isList) self.values = ko.observableArray(v); 
    else self.value = ko.observable(v); 
    self.isList = ko.observable(isList); 
    self.selected = ko.observable(); 
} 
var vm = function() { 
    var self = this; 
    var a1Vm = new optionVM('A1',true, [new optionVM('A11',false,111), new optionVM('A12',false,122)]); 
    var aVm = new optionVM('A',true, [new optionVM('A2',false,'21'), a1Vm]); 

    var d = new optionVM('Root',true, [aVm, new optionVM('B',false,'B1'),new optionVM('C',false,'C1')]); 
    self.dict = ko.observable(d); 

} 

ko.applyBindings(new vm()); 

下面是這個視圖

<select data-bind='options:dict().values,optionsText:"name",value:dict().selected'> 
</select> 

<div data-bind="template: {name: 'template-detail', data: dict().selected}"></div> 

<script type="text/html" id='template-detail'> 
    <!-- ko if:$data.isList --> 
    <span> List:</span> 
    <select data-bind='options:values,optionsText:"name",value:selected'> 
    </select> 
     <div data-bind="template: {name: 'template-detail', data: selected}"></div> 
    <!-- /ko --> 
    <!-- ko ifnot:$data.isList --> 
    Value:<span data-bind="text:value"></span> 
    <!-- /ko --> 

</script> 

這裏是jsFiddle

改進：

• 可以使用isArray來標識optionVM中的列表。
• 一些觀察量可以用簡單的值替換，如果他們不打算改變（例如：姓名）