Question

是否可以使用KO从字典对象创建可重用的级联组合框？

例如，这个数据

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

会产生两个级联盒子，第一个带有选项＆＃39; A，B，C＆＃39;。第二个将根据选择更新。字典可能会改变高度，但树总是平衡的。

是否可以在自定义绑定中创建元素？自定义绑定可以包含其他自定义绑定并订阅它们吗？是自定义绑定甚至是正确的方法吗？

我很感激一些指导。

Answer 1

基本上这就是我所做的

创建一个预定义的结构/类，它知道它是否包含列表价值或只是一个价值。
在视图一侧显示下拉列表，如果其列表只显示文本。
在根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中的列表。
如果一些可观察量不会改变，可以用简单的值替换（例如：名称）

Knockout.js - 创建可重复使用的级联选择

1 个答案: