How to create html list use marionette?

Question

• Slide View
• Select 1
  • Sub Select 1
  • Sub Select 2
  • Sub Select 3
• Select 2
  • Sub Select 1
  • Sub Select 2
  • Sub Select 3
• Select 3
  • Sub Select 1
  • Sub Select 2
  • Sub Select 3

Please create to me a simple above output use marionette.

here below i use marionette coding

var APP = new Backbone.Marionette.Application();

APP.addRegions({
    appMain:"#main"
});

APP.module("APP",function(module, app, Backbone, Marionette, $, _){
    module.title = Backbone.Model.extend({});
    module.titles = Backbone.Collection.extend({
        model:module.title
    });

    module.subtitle = Backbone.Model.extend({});
    module.subtitles = Backbone.Collection.extend({
        model:module.subtitle
    });

    module.iView = Backbone.Marionette.ItemView.extend({
        tagName:"li",
        template:"#temp-itemview"
    });

    module.csView = Backbone.Marionette.CompositeView.extend({
        template:"#temp-compositeview",
        childView:module.iView,
        itemViewContainer:"ul",
        initialize:function(){
            this.collection = this.model.get('subtitles');
        }
    });

    module.collView = Backbone.Marionette.CollectionView.extend({
        childView:module.csView
    });

    module.addInitializer(function(){
        var array = [   {title:"Show 1",array:[{title:"Sub Show 1"},{title:"Sub Show 2"},{title:"Sub Show 3"}]}, 
                        {title:"Show 2",array:[{title:"Sub Show 1"},{title:"Sub Show 2"},{title:"Sub Show 3"}]}, 
                        {title:"Show 3",array:[{title:"Sub Show 1"},{title:"Sub Show 2"},{title:"Sub Show 3"}]}];
        var titles = new module.titles(array);

        titles.each(function(title){
            var array = title.get('array');
            var subtitles = new module.subtitles(array);
            title.set("subtitles",subtitles);
        });

        var superView = new module.collView({
            collection:titles
        });

        APP.appMain.show(superView);
    });
});

APP.start();

html

<script type="text/template" id="temp-itemview">
    <%= title %>
</script>

<script type="text/template" id="temp-compositeview">
    <ul></ul>
</script>

Output is not clear.Please correct

Answer 1

The following solution is inspired from the Derick Bailey's post. The following one is adapted to backbone.marionette version 2.2.1:

---

<div id="tree"></div>

<script id="nodeTemplate" type="text/template">
    <li><%= nodeName %></li>
</script>

---

app = new Backbone.Marionette.Application();

app.addRegions({
    mainRegion: "#tree"
});

var TreeView = Backbone.Marionette.CompositeView.extend({
    template: "#nodeTemplate",    
    tagName: "ul",
    initialize: function(){
        this.collection = this.model.nodes;
    },
});

var TreeRoot = Backbone.Marionette.CollectionView.extend({
    childView: TreeView
});

---

treeData = [
    {nodeName: "Slide View"},
    {nodeName: "Select 1", 
     nodes: [
         {nodeName: "Sub Select 11"},
         {nodeName: "Sub Select 12"},
         {nodeName: "Sub Select 13"}
     ]},
    {nodeName: "Select 2", 
     nodes: [
         {nodeName: "Sub Select 21"},
         {nodeName: "Sub Select 22"},
         {nodeName: "Sub Select 23"}
     ]},
    {nodeName: "Select 3", 
     nodes: [
         {nodeName: "Sub Select 31"},
         {nodeName: "Sub Select 32"},
         {nodeName: "Sub Select 33"}
     ]},
];

TreeNode = Backbone.Model.extend({
    initialize: function(){
        var nodes = this.get("nodes");
        if (nodes){
            this.nodes = new TreeNodeCollection(nodes);
            this.unset("nodes");
        }
    }        
});

TreeNodeCollection = Backbone.Collection.extend({
    model: TreeNode
});

app.addInitializer(function(options){
    var treeView = new TreeRoot({
          collection: options.tree
    });
    app.mainRegion.show(treeView);
});

$(document).ready(function(){
    var tree = new TreeNodeCollection(treeData);
    app.start({tree: tree});
});

---

Check this example, to see how it works. Please,pay attention to the external resources.

You can read Derick Bailey's post for explication and details. If you want to understand something, or if you want me to adapt this solution to yours, I mean by putting the same variables names, etc. just let me know. I'll be very pleased to help.

Hope it's useful!

Answer 2

You would use the Marionette Composite View for this: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.compositeview.md

You want to set the collection for each view and specify a childViewContainer (a jquery selector). If you set a collection for a composite view it will use the same view to render the children in that collection.

You can specify a childView, but I normally don't set that attribute as it should be recursively calling the same view.