Selected Nodes
';
var nodeTmpl = '';
var itemTmpl =''
//append templates
document.body.insertAdjacentHTML('beforeend', rootTmpl);
document.body.insertAdjacentHTML('beforeend', nodeTmpl);
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";
//extend options with search
var options = valueAccessor();
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);