RecursiveMarionette

by Nirvanachain

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.4.1-bundled/backbone.marionette.min.js"></script>
<body>
    <div id='myContainer'></div>
    <script type='text/template' id='my-item'>
        <%= name %><ul></ul>
    </script>
</body>

JavaScript

var jsonData = [{
    name: 'Bob',
    children: [{
        name: 'Jim'
    }, {
        name: 'Jane'
    }]
}, {
    name: 'Sally',
    children: [{
        name: 'Sue',
        children: [{
            name: 'John'
        }, {
            name: 'Lisa'
        }]
    }]
}];

console.log(jsonData);

var Item = Backbone.Model.extend({});

var ItemCollection = Backbone.Collection.extend({
    model: Item
});

var i = new Item();
console.log(i);

var Manager = new Marionette.Application();
Manager.addRegions({
    mainRegion: "#myContainer"
});

var RecursiveView = Marionette.CompositeView.extend({
    tagName: "li",
    template: '#my-item',
    initialize: function () {
        if (this.model.get('children')) {
            this.collection = new ItemCollection(this.model.get('children'));
        }
    },
    itemViewContainer: 'ul'
});

var root = new Item({ name: 'root', children: jsonData });
var x = new RecursiveView({
    model: root
});

Manager.mainRegion.show(x);