Как присоединить экземпляры ItemView во время выполнения к Backbone.marionette.Composite View

Question

Я пытаюсь добавить разные таблицы {Табличный вид или Просмотр диаграммы} в таблице. Каждый может иметь свои собственные данные. Я использую Backbone Marionette для этого и имею следующую строку кода. Но представление позиции не отображается.

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/

Как я могу присоединить ItemView экземпляры к составным View. Используя это, я могу создавать разные представления, имеющие свои собственные данные. Я не использую сбор для композитного представления.

С уважением,

Answer 1

Ну вы должны создать коллекцию с вашими моделями и передать его в качестве аргумента при создании GridView:

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

Каждая модель коллекции будет новый istance из определенных itemView.

Вы также должны сказать вам CompositeView куда ставить itemViews:

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

Вы также можете попробовать использовать метод использования buildItemView:

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; 
},