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

时间:2013-10-18 11:08:26

标签: javascript knockout.js

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

例如,这个数据

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

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

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

我很感激一些指导。

1 个答案:

答案 0 :(得分:1)

基本上这就是我所做的

  1. 创建一个预定义的结构/类,它知道它是否包含列表 价值或只是一个价值。
  2. 在视图一侧显示下拉列表,如果其列表只显示文本。
  3. 在根vm上嵌套在第一步中创建的结构并创建字典。
  4. 这是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中的列表。
    • 如果一些可观察量不会改变,可以用简单的值替换(例如:名称)