0

我想我显然做错了什么。
我用 ICanHaz 替换了下划线模板，所以现在我不知道问题是来自那个还是来自 CompositeView 中的另一个错误。无论如何，我觉得我在 Marionette 视图类型和区域之间有点迷失。
这是我的代码：

//ItemView
define(['jquery','underscore','backbone','iCanHaz','models/Job','text!templates/JobItemView.tpl','marionette'], 
    function( $, _, Backbone, ich, Job, jobTemplate, Marionette) { 
        var JobView = Marionette.ItemView.extend({
            tagName: 'tr',
            template: jobTemplate,
        });
        return JobView;
});

// CompositeView  
define(['jquery','underscore','backbone','collections/JobList','views/JobItemView','marionette','text!templates/JobListView.tpl'], 
    function( $, _, Backbone, JobCollection, JobView, Marionette, JobListTpl ) { /*function for instantiating the module or object*/
        var JobListView = Marionette.CompositeView.extend({
            itemView: JobView,
            template: JobListTpl,
            itemViewContainer: "tbody",
        });
        return JobListView;
});



// Item Template (jobTemplate)
<td>
    <a href="{{ url }}" rel="nofollow" target="_blank">
        {{ title }}
    </a>
</td>
<td>{{ status }}</td>
<td>{{ created_at }}</td>

// Composite Template (JobListTpl)
<table class="table table-striped" id="jobs-table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Status</th>
            <th>created</th>

        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <td colspan="8">
                Stuff in here
            </td>
        </tr>
    </tfoot>
</table>


//Main HTML page
<div class="tab-content">
    <div class="tab-pane active" id="jobPanel">
        //stuff in here        
    </div>
//other stuff in here

//app.js
define(['backbone','marionette','iCanHaz','collections/JobList','views/JobListView'],
  function(Backbone, marionette, ich, JobList, JobListView){

    var app = new marionette.Application(),
    jobList = new JobList();

    app.addRegions({
        main   : '#content',
        jobsPanel: "#jobPanel"
    });

    app.addInitializer(function(){
        //For using Marionette with ICH
        Backbone.Marionette.Renderer.render = function(template, data){
            if (_.isUndefined(ich[templateName])){ 
                  var templateName;
                  ich.addTemplate(templateName, template);
            };
            return ich[templateName](data); 
        }

        var viewOptions = {
            collection : jobList
        };

        app.jobsPanel.show(new JobListView(viewOptions)); 
        jobList.fetch({validate:true});
    });
    return app;

  }
);


//main.js for RequireJS config
    require.config({
        shim: {
            underscore: {
                exports: '_'
            },
            backbone: {
                deps: [
                    'underscore',
                    'jquery'
                ],
                exports: 'Backbone'
            },
            backboneLocalstorage: {
                deps: ['backbone'],
                exports: 'Store'
            },
            marionette : {
                exports : 'Backbone.Marionette',
                deps : ['backbone']
            },
            iCanHaz:{
                deps: ['jquery'],
                exports: 'ich'
            }
        },
        optimize: "none", 
        paths: {
            jquery: "require-jquery",
            underscore: '../lib/backbone/underscore-min',
            backbone: '../lib/backbone/backbone',
            marionette : '../lib/backbone/backbone.marionette.min',
            iCanHaz: '../lib/backbone/ICanHaz_ReqJS_Compatible',
            backboneLocalstorage: '../lib/backbone/extras/backbone.localStorage',
            text: '../lib/require/text',
        }

    });

    require(['app','backbone'],function(app,Backbone){
      app.start();
    });

这应该创建一个包含 3 行的普通表，但它实际上创建了 3 个嵌套表。这是（非常）丑陋在此处输入图像描述 的结果：检索到 3 条记录但未显示。所以现在我不知道我在搞砸哪一部分。

4

0 回答 0