Knockoutjs Recurring Array

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?

Ah so rather than foreach use a template instead! Is it easy to loop through these items in a function later? — user1166905
– user1166905, Commented Aug 29, 2014 at 9:15
Thanks it was my misunderstanding of using foreach in table/div rather than using a template. I'll give it a go with that, do you want to put in as answer or do you think I should just delete the question? — user1166905
– user1166905, Commented Aug 29, 2014 at 9:18

Artur Krajewski · Accepted Answer · 2014-09-01 18:54:32Z

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>

Collectives™ on Stack Overflow

Knockoutjs Recurring Array

1 Answer 1

Fiddle Demo

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related