javascript - knockout.js foreach，构建具有 2 n 个深数组的 ListView

Question

尝试使用knockout和jquery mobile构建树结构。使用 ListView 并插入项目，我的对象有 2 个数组，其中 1 个为 n 深，另一个包含 n 个对象，这些对象应在每个级别的第一个数组之后列出。

制作了 2 个 fiddle 来更容易地解释我想要做什么。

它试图实现什么:http://jsfiddle.net/Qwark/gDTtd/

我有:http://jsfiddle.net/Qwark/NJZrN/13/

编辑:在此处添加源。以防万一 fiddle 出了问题。

它试图实现的目标:

<div id="myPage" data-role="page" data-theme="b">
  <div data-role="header">The header</div>
  <div data-role="content">        
    <div id="orgjson">
        <ul data-role="listview">
            <li>
                <span>CompanyRoot</span>
                <ul data-role="listview">
                    <li><span>Department1</span>
                        <ul data-role="listview">
                            <li>
                                <span>Department1.1</span>
                                <ul data-role="listview">
                                    <li><span>Dep1.1 Employee1</span></li>
                                    <li><span>Dep1.1 Employee2</span></li>
                                </ul>
                            </li>
                            <li>
                                <span>Department1.2</span>
                                <ul data-role="listview">
                                    <li><span>Dep1.2 Employee1</span></li>
                                    <li><span>Dep1.2 Employee2</span></li>
                                    <li><span>Dep1.3 Employee1</span></li>
                                </ul>
                            </li>                                
                            <li><span>Dep1 Employee1</span></li>
                            <li><span>Dep1 Employee2</span></li>
                            <li><span>Dep1 Employee3</span></li>
                        </ul>  
                    </li>
                    <li><span>Department2</span>
                        <ul data-role="listview">
                            <li>
                                <span>Department2.1</span>
                                <ul data-role="listview">
                                    <li><span>Dep2.1 Employee1</span></li>
                                    <li><span>Dep2.1 Employee2</span></li>
                                </ul>
                            </li>
                            <li>
                                <span>Department2.2</span>
                                <ul data-role="listview">
                                    <li><span>Dep2.2 Employee1</span></li>
                                    <li><span>Dep2.2 Employee2</span></li>
                                </ul>
                            </li>                                
                            <li><span>Dep2 Employee1</span></li>
                            <li><span>Dep2 Employee2</span></li>
                        </ul>  
                    </li>

                    <li><span>Root Employee1</span></li>
                    <li><span>Root Employee2</span></li>
                </ul>                                        
            </li>                                
        </ul>          

    </div>
</div>    

我有什么html:

<div id="myPage" data-role="page" data-theme="b">
   <div data-role="header">The header</div>
   <div data-role="content">        
      <ul data-bind="listview: true, template: {name: 'depTmpl', foreach: DepTree         }"></ul>   
    </div>    
</div>

<script id="depTmpl" type="text/html">
  <li>
    <span data-bind="text: depname"></span>
    <ul data-bind="listview: true, template: {name: 'depTmpl', foreach: departments}">
      </ul>
   </li>

    <!-- I do not know what should go here or if this is the right place at all -->
    <!-- I want to list employes after all Departments -->    
</script>

我有什么js:

    function Department(depid, depname) {
    this.depid = depid;
    this.depname = depname;
    this.departments = new Array();
    this.employees = new Array();

    this.addDepartment = function (newdep) {
        this.departments.push(newdep);
    };
    this.addEmployee = function (newEmp) {
        this.employees.push(newEmp);
    };
};

function Employee(empid, empname) {
    this.empid = empid;
    this.empname = empname;
};

ko.bindingHandlers.listview = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        setTimeout(function () {
            $(element).attr('data-role', 'listview');
            $(element).listview();
        }, 0);
    }
};   

DepViewModel = function () {
    this.DepTree = SetupDepTree();
};

SetupDepTree = function () {//testdata, indented for easy reading
    var CompanyRoot= new Department("D0", "Root");
    var dep1 = new Department("D1", "Department1");        
        var dep11 = new Department("D1.1", "Department1.1");    
            var REmp111 = new Employee("E1.1.1", "Employee111");
            var REmp112 = new Employee("E1.1.2", "Employee112");                
            dep11.addEmployee(REmp111);
            dep11.addEmployee(REmp112);
        var dep12 = new Department("D1.2", "Department1.2");
            var REmp121 = new Employee("E1.2.1", "Employee121");            
            var REmp122 = new Employee("E1.2.2", "Employee122");
            var REmp123 = new Employee("E1.2.3", "Employee123");
            dep12.addEmployee(REmp121);
            dep12.addEmployee(REmp122);
            dep12.addEmployee(REmp123);            
        var REmp11 = new Employee("E1.1", "Employee11");
        var REmp12 = new Employee("E1.2", "Employee12");        
        dep1.addDepartment(dep11);
        dep1.addDepartment(dep12);
        dep1.addEmployee(REmp11);
        dep1.addEmployee(REmp12);        
    var dep2 = new Department("D2", "Department2");
        var dep21 = new Department("D2.1", "Department2.1");    
            var REmp211 = new Employee("E2.1.1", "Employee211");
            var REmp212 = new Employee("E2.1.2", "Employee212");                
            dep21.addEmployee(REmp211);
            dep21.addEmployee(REmp212);
        var dep22 = new Department("D2.2", "Department2.2");
            var REmp221 = new Employee("E2.2.1", "Employee221");            
            var REmp222 = new Employee("E2.2.2", "Employee222");
            var REmp223 = new Employee("E2.2.3", "Employee223");
            dep22.addEmployee(REmp221);
            dep22.addEmployee(REmp222);
            dep22.addEmployee(REmp223);            
        var REmp21 = new Employee("E2.1", "Employee21");
        var REmp22 = new Employee("E2.2", "Employee22");        
        dep2.addDepartment(dep21);
        dep2.addDepartment(dep22);
        dep2.addEmployee(REmp21);
        dep2.addEmployee(REmp22);
    var REmp1 = new Employee("E0.1", "Employee01");
    var REmp2 = new Employee("E0.2", "Employee02");
    CompanyRoot.addDepartment(dep1);
    CompanyRoot.addDepartment(dep2);
    CompanyRoot.addEmployee(REmp1);
    CompanyRoot.addEmployee(REmp2);    
    return CompanyRoot;
};

$(document).ready(function () {
        var vm = new DepViewModel ();
        ko.applyBindings(vm);
});

Answer 1

试试这个例子:http://jsfiddle.net/NJZrN/17/