Question

我是骨干和牵线木偶的新手;以下是我目前的进展

<!DOCTYPE html>
<html>
  <head>
    <title>Marionette test</title>
    <link  rel="stylesheet" media="screen" href="./assets/libs/bootstrap/css/bootstrap.css">

    <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>
  </head>
  <body>
  <br>
  <br>
  <br>
    <div id="content" class="container"></div>

    <script type="text/template" id="fDD">
        <% _.each(dataD, function(dD) { %>
            <td><%= dD %>
        <% }); %>
    </script>

    <script type="text/template" id="fD2">
        <h3> Zone: <%= zone %> </h3>
        <div> Zone Data: <br> <%= zonedata %> </div>
        <hr>
    </script>

    <script type="text/template" id="fD">
        <caption><%= name %> ( <%= rollnum %> ), Project Code(<%= projectcode %>)</caption>
        <thead>
            <tr>                
                <% _.each(header, function(hh) { %>
                    <th><%= hh[1] %></th>
                 <% }); %>
            </tr>
        </thead>
        <tbody id="sub-Region">
        </tbody>
    </script>

    <script type="text/javascript">             
    var dataX = [{"zone": "X", "zonedata": {"name": "Mr XYZ", "rollnum": "51", "projectcode": "0256",
                                        "header": [[0, "subtype"], [1, "Access Number"]],
                                        "submissions": [{"dataD": ["A5", "5689-64123"]},
                                        {"dataD": ["A8", "5689-64122"]},
                                        {"dataD": ["D1", "5689-64122"]},
                                        {"dataD": ["A5", "5689-64122"]}]}},
                {"zone": "Y", "zonedata": {"name": "Mr ABC", "rollnum": "52", "projectcode": "3526",
                                        "header": [[0, "subtype"], [1, "Access Number"]],
                                        "submissions": [{"dataD": ["A5", "5689-64123"]},
                                        {"dataD": ["A8", "5689-64122"]},
                                        {"dataD": ["D1", "5689-64122"]},
                                        {"dataD": ["A5", "5689-64122"]}]}},
                {"zone": "Z", "zonedata": {"name": "Mr OPQ", "rollnum": "53", "projectcode": "4006",
                                        "header": [[0, "subtype"], [1, "Access Number"]],
                                        "submissions": [{"dataD": ["A5", "5689-64123"]},
                                        {"dataD": ["A8", "5689-64122"]},
                                        {"dataD": ["D1", "5689-64122"]},
                                        {"dataD": ["A5", "5689-64122"]}]}}

    ];

    MyApp = new Backbone.Marionette.Application();

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

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

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

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

    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"
    });

    var MyZoneView = Backbone.Marionette.ItemView.extend({
      template: "#fD2"
    });
    var MyZoneCollection = Backbone.Marionette.CollectionView.extend({
      itemView: MyZoneView
    });


    MyApp.addInitializer(function(options){
        mycollection = []
        _.each(options.data, function(d){
            var projectInfo = new Project(d.zonedata);
            var submissions = new Submissions(projectInfo.submissions);
            var nn = new TableView({collection: submissions, model: projectInfo});
            mycollection.push({"zone": d.zone, "zonedata": nn});
        });
        var myZoneCollection = new MyZoneCollection({collection: new MainInfo(mycollection)});
        MyApp.mainRegion.show(myZoneCollection);    
    });

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

  </body>
</html>

它将TableView呈现为Object;不是一个HTML。有什么方法可以解决这个问题吗？

以上代码;我在用： Backbone.js 1.0.0 MarionetteJS v1.0.3 jQuery JavaScript Library v1.9.1 Underscore.js 1.4.4

Backbone Marionette CollectionView将CompositeView显示为＆＃34; Object＆＃34;

0 个答案: