0

我正在尝试在表格中添加不同的视图 {Tabular View or 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 实例附加到复合视图。使用它我可以创建具有自己数据的不同视图。我没有将集合用于复合视图。

问候，

4

1 回答 1

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;
},
于 2012-12-18T18:15:53.217 回答