Backbone Marionette 复合视图未在表中显示行答案

【问题标题】：Backbone Marionette composite view is not showing rows in the tableBackbone Marionette 复合视图未在表中显示行
【发布时间】：2014-07-19 14:56:54
【问题描述】：

我对骨干和木偶都是新手。这是我目前的进展。

<!DOCTYPE html>
<html>
  <head>
    <title>Marionette composite view test</title>

    <script src="./assets/libs/jquery.js"></script>
    <script src="./assets/libs/bootstrap/js/bootstrap.js"></script>
    <script src="./assets/libs/underscore.js"></script>
    <script src="./assets/libs/backbone.js"></script>
    <script src="./assets/libs/backbone.marionette.js"></script>

    <link href="./assets/css/style.css" rel="stylesheet">

  </head>
  <body>
    <div id="content"></div>

    <script type="text/template" id="fDD">
        <td><%= subtype %></td>
        <td><%= acs_code %></td>
    </script>

    <script type="text/template" id="fD">
    <caption><%= name %> ( <%= rollnum %> ), Project Code(<%= projectcode %>)</caption>
        <thead>
            <tr>
                <th> Submission Type </th>
                <th> Access number </th>
            </tr>
        </thead>
        <tbody id="sub-Region">
        </tbody>        
    </script>

    <script type="text/javascript">
    var data = {"name": "Mr XYZ", "rollnum": "53", "projectcode": "3526",
                "submissions": [{"subtype": "A5", "acs_code": "5689-64123"},
                {"subtype": "A8", "acs_code": "5689-64122"},
                {"subtype": "D1", "acs_code": "5689-64122"},
                {"subtype": "A5", "acs_code": "5689-64122"}]}

    MyApp = new Backbone.Marionette.Application();

    MyApp.addRegions({
      mainRegion: "#content"
    });

    Submission = Backbone.Model.extend({});
    Submissions = Backbone.Collection.extend({
        model: Submission
    });

    SubmissionInfo = Backbone.Model.extend({});
    MainInfo = Backbone.Collection.extend({
        model: SubmissionInfo
    });


    FilingView = Backbone.Marionette.ItemView.extend({
        tagName: "tr",
        template: "#fDD"

    });   

    TableView = Backbone.Marionette.CompositeView.extend({
       tagName: "table",
       itemView: FilingView,
       template: "#fD",
       itemViewContainer: "#sub-Region",
       className: "table table-hover table-condensed"
    });

    AccordionView = Backbone.Marionette.CollectionView.extend({
      itemView: TableView
    }); 

    MyApp.addInitializer(function(options){
    var mainInfo = new MainInfo(options.data);
    mainInfo.each(function(iinfo){
        var ss = iinfo.get("submissions");
        var sss = new Submissions({collection: ss});
        iinfo.set("submissions", sss);
    });

    MyApp.mainRegion.show(new AccordionView({collection: mainInfo}));
    });

    MyApp.start({data: data});
    </script>
  </body>
</html>

我想渲染一个表格，在该表格中我将在其标题中显示一些信息，并在其行中显示其他详细信息。但是只有标题部分正在渲染，而行丢失了。即使这样也没有任何错误。这个怎么解决？？有没有更好的方法来实现这一点？？？

以上代码；我正在使用：
Backbone.js 1.0.0
MarionetteJS v1.0.3
jQuery JavaScript 库 v1.9.1
下划线.js 1.4.4

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

有一些基本错误：您应该如何初始化集合、主干对象的正确构造函数等。下面是您的代码的工作版本。

<script type="text/template" id="fDD">
    <td><%= subtype %></td>
    <td><%= acs_code %></td>
</script>

<script type="text/template" id="fD">
    <caption><%= name %> ( <%= rollnum %> ), Project Code(<%= projectcode %>)</caption>
    <thead>
    <tr>
        <th> Submission Type </th>
        <th> Access number </th>
    </tr>
    </thead>
    <tbody id="sub-Region">
    </tbody>
</script>

<script type="text/javascript">
    var data = {"name": "Mr XYZ", "rollnum": "53", "projectcode": "3526",
        "submissions": [{"subtype": "A5", "acs_code": "5689-64123"},
            {"subtype": "A8", "acs_code": "5689-64122"},
            {"subtype": "D1", "acs_code": "5689-64122"},
            {"subtype": "A5", "acs_code": "5689-64122"}]};

    MyApp = new Backbone.Marionette.Application();

    MyApp.addRegions({
        mainRegion: "#content"
    });

    var Submission = Backbone.Model.extend({});
    var SubmissionCollection = Backbone.Collection.extend({
        model: Submission
    });

    var Project = Backbone.Model.extend({});

    var FilingView = Backbone.Marionette.ItemView.extend({
        tagName: "tr",
        template: "#fDD"

    });

    var TableView = Backbone.Marionette.CompositeView.extend({
        tagName: "table",
        itemView: FilingView,
        template: "#fD",
        itemViewContainer: "#sub-Region",
        className: "table table-hover table-condensed"
    });

    MyApp.addInitializer(function(options){
        var projectInfo = new Project(options.data);
        var submissions = new SubmissionCollection(projectInfo.get("submissions"));

        MyApp.mainRegion.show(new TableView({model: projectInfo, collection: submissions}));
    });

    MyApp.start({data: data});
</script>
</body>

【讨论】：