knockout.js foreach，用2 n深度數組構建listview

Question

試圖用knockout和jquery mobile構建樹結構。使用列表視圖和插入項目，我的對象有2個數組，其中1是深的，另一個擁有應該在每個級別上的第一個數組之後進行監聽的n個對象。

已經讓2個小提琴更容易解釋我正在嘗試做什麼。

它所要達到：http://jsfiddle.net/Qwark/gDTtd/

我有什麼：http://jsfiddle.net/Qwark/NJZrN/13/

編輯：在這裏添加源。以防萬一小事發生。

它所要達到：

<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/