Question

我正在尝试在表格中添加不同的视图{Tabular View或Chart View}。每个人都可以拥有自己的数据。我正在使用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实例附加到复合视图。使用此我可以创建具有自己的数据的不同视图。我没有使用合成视图的集合。

此致

Answer 1

您应该使用模型创建一个集合，并在创建gridView时将其作为参数传递：

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

该集合的每个模型都将是您定义的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;
},

如何在运行时将ItemView实例附加到Backbone.marionette.Composite View

1 个答案: