Durandal/Knockout TreeView

view

<style>
	.treeList { list-style: none; }
</style>

<div>Hello</div>
<ul class="treeList" data-bind="template: { name: 'itemTmpl', foreach: hierarchy }"></ul>



<script id="itemTmpl" type="text/html">
	<li>
		<!-- ko if: hasChildren -->
		<i class="fa" data-bind="css: { 'fa-caret-down': expanded, 'fa-caret-right': collapsed }, click: toggle"></i>
		<!-- /ko -->
		
		<span data-bind="text:data.name"></span>: <span data-bind="text: data.desc"></span>
		<!-- ko if: expanded -->
		<ul class="treeList" data-bind="template: { name: 'itemTmpl', foreach: children }"></ul>
		<!-- /ko -->
	</li>
</script>

viewmodel

define(function(require) {
  var ko = require('knockout');

    function TreeNode(callingVM, data) {
		var self = this;

		self.rootVM = callingVM;
		self.data = data;
		self.expanded = ko.observable(false);
		self.collapsed = ko.computed(function () {
			return !self.expanded();
		});
		self.children = ko.observableArray([]);
		self.children.subscribe = function(data) {
			console.log("TESTES" + self.children());
		};
		self.hasChildren = ko.computed(function() {
			console.log(self.children());
			return self.children().length > 0;
		});
	}

	TreeNode.prototype.toggle = function (node) {
		this.expanded(!this.expanded());
	};
  
  var Entity = function(name, desc) {
	var self = this;
	self.name = name;
	self.desc = desc;
  }
  
  var vm_test = function() {
    var self = this;
    
	var root = new TreeNode(self, new Entity("Test1", "Desc1"));
	root.children([
		new TreeNode(self, new Entity("SubTest1", "SubDesc1"))
	]);
	
	var root2 = new TreeNode(self, new Entity("Test2", "Desc2"));
	root2.children([
		new TreeNode(self, new Entity("SubTest2", "SubDesc2"))
	]);
	
	console.log(root2.hasChildren());
	
	self.hierarchy = ko.observableArray([
		 root, root2
	]);

  };
  return vm_test;
});