Trying to build a tree structure with knockout and jquery mobile. using a listview and insert items, my object have 2 arrays where 1 is n deep, and the otherone holding n objects that should be listet after the first array on each level.
Have made 2 fiddles to easier explain what I’m trying to do.
What it trying to achieve: http://jsfiddle.net/Qwark/gDTtd/
What I have: http://jsfiddle.net/Qwark/NJZrN/13/
EDIT: adding source here. Just in case something happens to the fiddles.
What it trying to achieve:
<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>
What I have 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>
What I have 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);
});
Try this example: http://jsfiddle.net/NJZrN/17/