How to Attach ItemView instances at runtime to Backbone.marionette.Composite View

Question

I am trying to add different views {Tabular View or Chart View} in a table. Each can have its own data. I am using Backbone Marionette for this and have following line of code. But item view is not render.

html

<script id="grid-template" type="text/template">
 <div>
     Data is displayed using Tabular View and Chart View !

    </div>
</script>

<script id="TabularViewTemplate" type="text/template">


    <table><tr><td>Value1</td><td>Value2</td></tr>         </table>

</script>

<script id="ChartTemplate" type="text/template">

    <table><tr><td>Value1</td><td>Value2</td></tr>         </table>

</script>


<div id="grid">
</div>

JS

var ANBaseModel= Backbone.Model.extend({

    name:"",
    type:""
});

  var SSANModel= ANBaseModel.extend({
      type:"SS"
});  



var BaseView=Backbone.Marionette.ItemView.extend({
template: "#row-template",
    tagName: "tr"  ,
    model:SSANModel





});
// A Spreadsheet View
var SSView= BaseView.extend({


    render: function(){
    alert(this.model.type);
    if(this.model.type=="SS")
    alert("Spreadsheet");
        else if(this.model.type=="ChartAN")
                alert("Chart");

    }  

});

// A Chart View
var ChartView = BaseView.extend({


    render: function(){
    alert(this.model.type);
    if(this.model.type=="SS")
    alert("Spreadsheet");
        else if(this.model.type=="ChartAN")
                alert("Chart");

    }  

});

// The grid view
var GridView = Backbone.Marionette.CompositeView.extend({
    tagName: "table",
    template: "#grid-template",



});



var SS= new SSANModel();
alert(SS.type);
var objSSView=new SSView ({model:SS,template:"TabularViewTemplate"});

var gridView = new GridView({

    itemView: objSSView
});


gridView.render();

console.log(gridView.el);
$("#grid").html(gridView.el);

JsFiddle: http://jsfiddle.net/Irfanmunir/ABdFj/

How i can attach ItemView instances to composite View. Using this i can create different views having its own data . I am not using collection for composite view.

Regards,

Ingro Ingro · Accepted Answer · 2012-12-18T18:15:53

Well you should create a collection with your models and pass it as argument when you create your gridView:

var gridView = new GridView({
    collection: SSCollection,
    itemView: objSSView
});

Each model of the collection will be a new istance of your defined itemView.

You also need to tell you CompositeView where to put your itemViews:

appendHtml: function(collectionView, itemView, index){
      collectionView.$("tbody").append(itemView.el);
},

You could also try to use use buildItemView method:

buildItemView: function(item, ItemViewType, itemViewOptions){
    var options = _.extend({model: item}, itemViewOptions);

    switch(item.type){
        case 'ss':
            ItemViewType = SSView;
        case 'another':
            ItemViewType = AnotherView;
    }
    var view = new ItemViewType(options);
    return view;
},

How to Attach ItemView instances at runtime to Backbone.marionette.Composite View

1 Answers