Selected Nodes
';
//the template to display each node, notice the recursive template binding with UL
var nodeTmpl = '';
//the item inside the node, a checkbox and a label.
var itemTmpl =''
//append templates
if ( !document.getElementById('ko-treeview-root-tmpl') ) {
document.body.insertAdjacentHTML('beforeend', rootTmpl);
}
if ( !document.getElementById('ko-treeview-node-tmpl') ) {
document.body.insertAdjacentHTML('beforeend', nodeTmpl);
}
if ( !document.getElementById('ko-treeview-item-tmpl') ) {
document.body.insertAdjacentHTML('beforeend', itemTmpl);
}
//apply first binding
ko.applyBindingsToNode(rootElement,{template:{name:"ko-treeview-root-tmpl"}},options);
},
init: function(element, valueAccessor) {
//style element
element.className = "ko-treeview-container";
var options = valueAccessor();
if ( !options.data ) {
throw new Error("ko.bindingHandlers.treeView: No data to display");
}
//extend options with search
options.search = ko.observable("");
//set default data values
if (!options.label) options.label = 'id';
if (!options.childNode) options.childNode = 'children';
//create the tree
ko.bindingHandlers.treeView.createNodes(element,options);
valueAccessor().data.subscribe(function() {
ko.bindingHandlers.treeView.createNodes(element,options);
});
//let this handler control its descendants.
return { controlsDescendantBindings: true };
}
};
function vm(){
this.selectedNodes = ko.observableArray([]);
this.data = ko.observableArray([
{
id:"Level 1",
children:[
{id:"Level 1-1",children:[
{id:"Level 1-1-1",children:[
{id:"Level 1-1-1-1"}
]}
]},
{id:"Level 1-2"},
]
},
{
id:"Level 2",
children:[
{id:"Level 2-1",children:[
{id:"Level 2-1-1"}
]},
{id:"Level 2-2"},
]
},
]);
}
var myVM = new vm();
ko.applyBindings(myVM);