Fatal编程技术网
  • backbone.js/
  • Backbone.js 主干木偶复合视图未显示表中的行

Backbone.js 主干木偶复合视图未显示表中的行

backbone.js

Backbone.js 主干木偶复合视图未显示表中的行,backbone.js,marionette,Backbone.js,Marionette,我对脊梁和木偶都是新手。 这是我目前的进展 <!DOCTYPE html> <html> <head> <title>Marionette composite view test</title> <script src="./assets/libs/jquery.js"></script> <script src="./assets/libs/bootstrap/js/boot

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

<!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>


木偶组合视图测试
（），工程项目代码（）
提交类型
访问号码
var data={“name”：“Mr XYZ”，“rollnum”：“53”，“projectcode”：“3526”，
“提交文件”：[{“子类型”：“A5”，“acs_代码”：“5689-64123”}，
{“子类型”：“A8”，“acs_代码”：“5689-64122”}，
{“子类型”：“D1”，“acs_代码”：“5689-64122”}，
{“子类型”：“A5”，“acs_代码”：“5689-64122”}]}
MyApp=new Backbone.marionete.Application（）；
MyApp.addRegions({
主区域：“#内容”
});
Submission=Backbone.Model.extend（{}）；
提交=Backbone.Collection.extend({
模型：提交
});
SubmissionInfo=Backbone.Model.extend（{}）；
mainfo=Backbone.Collection.extend({
型号：SubmissionInfo
});
FilingView=Backbone.marionete.ItemView.extend({
标记名：“tr”，
模板：“fDD”
});   
TableView=Backbone.marionete.CompositeView.extend({
标记名：“表”，
itemView:FilingView，
模板：“#fD”，
itemViewContainer:#子区域“，
类名：“表悬停表压缩”
});
AccordionView=Backbone.marionete.CollectionView.extend({
itemView:TableView
}); 
MyApp.addInitializer（函数（选项）{
var mainfo=新的mainfo（options.data）；
mainfo.each（功能（iinfo）{
var ss=信息获取（“提交”）；
var sss=新提交的文件（{collection:ss}）；
信息集（“提交文件”，sss）；
});
MyApp.mainRegion.show（新的AccordionView（{collection:mainInfo}））；
});
MyApp.start（{data:data}）；
我想呈现一个表，其中我将在标题中显示一些信息，并将其他详细信息显示为行。但只有标题部分正在呈现，而行丢失。即使这样也没有任何错误。如何解决这个问题？？有没有更好的方法来实现这一点

对于上述代码；我正在使用：
Backbone.js 1.0.0
提线木偶1.0.3版
jQuery JavaScript库v1.9.1
Underline.js 1.4.4有一些基本错误：如何初始化集合、主干对象的正确构造函数等。下面是代码的工作版本


（），工程项目代码（）
提交类型
访问号码
var data={“name”：“Mr XYZ”，“rollnum”：“53”，“projectcode”：“3526”，
“提交文件”：[{“子类型”：“A5”，“acs_代码”：“5689-64123”}，
{“子类型”：“A8”，“acs_代码”：“5689-64122”}，
{“子类型”：“D1”，“acs_代码”：“5689-64122”}，
{“子类型”：“A5”，“acs_代码”：“5689-64122”}]}；
MyApp=new Backbone.marionete.Application（）；
MyApp.addRegions({
主区域：“#内容”
});
var Submission=Backbone.Model.extend（{}）；
var SubmissionCollection=Backbone.Collection.extend({
模型：提交
});
var Project=Backbone.Model.extend（{}）；
var FilingView=Backbone.marionete.ItemView.extend({
标记名：“tr”，
模板：“fDD”
});
var TableView=Backbone.marionete.CompositeView.extend({
标记名：“表”，
itemView:FilingView，
模板：“#fD”，
itemViewContainer:#子区域“，
类名：“表悬停表压缩”
});
MyApp.addInitializer（函数（选项）{
var projectInfo=新项目（options.data）；
var提交=新提交集合（projectInfo.get（“提交”）；
show（新的TableView（{model:projectInfo，collection:submissions}））；
});
MyApp.start（{data:data}）；

<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>