Treview with Knockout

by Luiz Augusto Volpi Nascimento

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" data-bind="click: $root.addData">Adicionar filho</button>
<button type="button" data-bind="click: $root.addDataWithChildren">Adicionar filho com netos</button>


<ul style="list-style-type:none" data-bind="template: { name: 'itemTmpl', foreach: data }"></ul>

<script id="itemTmpl" type="text/html">
    <li>
		<div class="panel panel-default" style="margin: 0 0 0 0; padding: 0 0 0 0; border-radius:0">
			<div class="panel-heading" style="background-color: white">
				<a data-toggle="collapse" data-bind="attr:{href: $root.ref(true,$data)}">
    				<span class="glyphicon glyphicon-plus"></span> 				</a>
				<a data-bind="text: name"></a>
				<a class="pull-right" data-bind="click: $root.removerItem"><span class="glyphicon glyphicon-remove"></span></a>
			</div>
			<div data-bind="attr:{id: $root.ref(false,$data)}" class="panel-collapse collapse">
				<div  class="panel-body" style="margin: 0 0 0 0; padding: 0 0 0 0 " >
					<ul style="list-style-type:none" data-bind="template: { name: 'itemTmpl', foreach: $data.items }"></ul>
				</div>
			</div>
		</div>
    </li>
</script>

JavaScript

var ViewModel = function(){
	self = this;
	self.data = ko.mapping.fromJS(data.items);
	self.addData = function(){
	var tmp = ko.mapping.fromJS({"name": "TESTE","items":[] });
	self.data.push(tmp);
	debugger;
	}
	self.addDataWithChildren = function(){
		var tmp = ko.mapping.fromJS({"name": "TESTEcomfilhos","items":[{"name": "TESTE1","items":[]},
		{"name": "TESTE2","items":[{"name": "TESTE5","items":[]}]}] });
		self.data.push(tmp);
	}
	
	self.ref = function(isref,data){
		debugger;
		if(isref)
			return "#" + data.name();
		else
			return data.name();
	}
	
	
	self.removerItem = function(item){
		debugger;
		self.Remover(self.data,item);
	}
	
   	self.Remover = function(data,item){
		debugger;
		
		for(i = 0; i < data().length; i++){
			
			if(item.CategoryId == data()[i].CategoryId){
				debugger;
				data.remove(item);
				return;
			}
			else{
				debugger;
        if(data()[i].items() != null && data()[i].items() != undefined && data()[i].items().length > 0)
        	arguments.callee(data()[i].items,item);
			
			}
				
		}
	}	
 
}

var data = {
    items: [{
		"CategoryId": 65,
        "name": "MORPHED",
        "items": [{
            "name": "5 Day",
            "items": [{
                "CategoryId": 20,
                "name": "30 day countdown"
            }, {
                "CategoryId": 19,
                "name": "Staffing your program"
            }, {
                "CategoryId": 22,
                "name": "Emergency/Medical Information"
            }, {
                "CategoryId": 18,
                "name": "Promoting your program"
            }, {
                "CategoryId": 21,
                "name": "Week of camp"
            }]
        }, {
			"CategoryId": 245,
            "name": "47 Day",
            "items": []
        }, {
			"CategoryId": 222,
            "name": "1/27 Day",
            "items": []
        }, {
			"CategoryId": 2222,
            "name": "Age Targeted",
            "items": []
        }]
    }, {
       ...