0

テーブルに別のビュー {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 インスタンスを複合ビューにアタッチする方法。これを使用して、独自のデータを持つさまざまなビューを作成できます。複合ビューにコレクションを使用していません。

よろしく、

4

1 に答える 1

1

モデルでコレクションを作成し、gridView を作成するときに引数として渡す必要があります。

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

コレクションの各モデルは、定義された itemView の新しいインスタンスになります。

また、itemView を配置する CompositeView を指定する必要があります。

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 に答える