Knockoutjs Recurring Array - asp.net

Question

I am creating a treeview styled object using KnockoutJS and need to be able to have x number of children folders and items. Has anyone done a recurring array on screen, I usually use foreach and I can put one child within another but I can't figure out how to change the template to make them recurring, is it even possible? To clarify I can get the items into knockout fine it's simply getting them displayed on screen.
Looked everywhere on the internet but can only find nested templates rather than recurring ones. Can anyone help?

Answer 1

Let me demonstrate how you can achieve this using a template.
Let suppose you have the following viewmodel:
var comments = [{
id: 1,
comment: 'How can i use knockoutjs?',
childrenLength: 3,
children: [{
id: 2,
comment: 'Please search before asking',
childrenLength: 0,
children: []
}, {
id: 3,
comment: 'Please read the documentation',
childrenLength: 0,
children: []
}, {
id: 4,
comment: 'You can see the blog posts on this',
childrenLength: 2,
children: [{
id: 5,
comment: 'Please search before asking',
childrenLength: 0,
children: []
}, {
id: 6,
comment: 'Please search before asking',
childrenLength: 0,
children: []
}]
}]
}, {
id: 7,
comment: 'You question is not sufficient to be asked here?',
childrenLength: 3,
children: [{
id: 8,
comment: 'Please seach before asking',
childrenLength: 0,
children: []
}, {
id: 9,
comment: 'Please read the documentation',
childrenLength: 0,
children: []
}, {
id: 10,
comment: 'You can see the blog posts on this',
childrenLength: 0,
children: []
}]
}]
var vm = function(){
var self = this
self.comments = ko.observableArray(comments)
}
$('document').ready(function () {
ko.applyBindings(new vm())
})
You can see here is multilevel branching. Now you can achieve this with recursion.
<div class="body" data-bind="foreach: comments">
<div data-bind="template: { name: 'childTemplate', data: $data }"></div>
</div>
<script type="text/html" id="childTemplate">
<span data-bind="text:comment"></span>
<!-- ko if: $data.childrenLength > 0 -->
<!-- ko foreach: children -->
<div data-bind="template: { name: 'childTemplate', data: $data }" style="padding-left:35px;"></div>
<!-- /ko -->
<!-- /ko -->
</script>
Fiddle Demo