knockout.js foreach, 2 개의 깊은 배열을 사용하여 listview 빌드

Question

knockout 및 jquery mobile을 사용하여 트리 구조를 만들려고합니다. listview를 사용하고 항목을 삽입하면, 내 객체는 1이 n 깊이 인 2 개의 배열을 가지며 다른 객체는 각 레벨의 첫 번째 배열 뒤에 listet되어야하는 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/를