square

by amit6june

HTML

<div data-bind="template: { name: 'template', foreach: employees }"></div>

<script id="template"  type="text/html">
   
    <div class="fixed-size-square"></div><br>
    <div data-bind="template: { name: 'template', foreach: employees }"></div>
</script>

CSS

.fixed-size-square {
    width: 50px;
    height: 50px;
    background: #4679BD;
}

JavaScript

var jsonModel = '{"employees":[{"name":"a1","employees":[{"name":"a2","employees":[{"name":"a3"},{"name":"a4"},{"name":"a5"}]}]}]}';

function Employee(name, boss) {
    this.name = name;
    this.boss = boss;
    this.employees = ko.observableArray([]);
   
}

function ViewModel() {
    initialiseModel(this, jsonModel);
}

function initialiseModel(model, jsonModel) {
    parsedModel = JSON.parse(jsonModel);
      //alert(JSON.stringify(parsedModel.employees))
    model.employees = ko.observableArray([]);
    //alert("hoe many times")
    addEmployees(model, parsedModel.employees);

}

function addEmployees(model, employees) {
//alert(JSON.stringify(employees))
//alert("bossModel"+JSON.stringify(bossModel))
    if (typeof employees === "undefined")
        return;
      // alert(JSON.stringify(employees))
    for (var i = 0; i < employees.length; i++) {
        var employee = employees[i];
        // alert(JSON.stringify(employee))
        //alert(employee.name)
        //alert(JSON.stringify(model))
        var employeeModel = new Employee(employee.name, model);
        model.employees.push(employeeModel);
        //alert("employee.employees"+JSON.stringify(employee.employees))
        addEmployees(employeeModel, employee.employees);
    }
}
 
ko.applyBindings(new ViewModel());;