Maslosoft Binder Logo Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar

HTML Tree

HTML Tree Binding handler builds nested HTML list out of tree structure.

Tree structure should contain nested nodes in property children, example structure is included in this example.

Relevant code used in examples:

<ul data-bind="htmlTree: binder.model.Tree">
</ul>

<script>
	window.onload = (function () {­
		data = {­
			_class: 'Maslosoft.Koe.TreeItem',
			title: "Some container",
			children: [
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "One",
					children: [
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Two"
						­},
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Three",
							children: [
								{­
									_class: 'Maslosoft.Koe.TreeItem',
									title: "Three-Two"
								­},
								{­
									_class: 'Maslosoft.Koe.TreeItem',
									title: "Three-Three"
								­}
							]

						­},
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Four"
						­}
					]
				­}
			]
		­};
		binder.model.Tree = new Maslosoft.Koe.TreeItem(data);

		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>