javascript - CompositeView 不呈现 ItemView,甚至不触发 appendHtml

标签 javascript backbone.js requirejs marionette

我对我的 View 渲染有点迷茫——第一次尝试这样做。我的模板设置与此应用程序类似。

到目前为止,我已经渲染了 CompositeView 的模板,但它没有渲染任何 ItemView。它甚至不会触发渲染方法来尝试调试,所以我不确定我可以在哪里记录片段以查看它卡在哪里......这是代码:

这是我的 ItemView:

define([
    'jquery', 
    'underscore', 
    'backbone',  
    'text!templates/service/item.ejs'
], function($, _, Backbone, template) {
        ServiceItemView = Backbone.Marionette.ItemView.extend({
            tagName: 'tr',
            template: '#service-item-template'
        });
    }
);

这是我的 CompositeView:更新: 添加到我的 requirejs 代码中以显示 ServiceItemView 在 ServiceTableView 之前加载

define([
    'jquery', 
    'underscore', 
    'backbone', 
    'views/service/item', 
    'text!templates/service/table.ejs'
], function($, _, Backbone, ServiceItemView, template) {
    var ServiceTableView;
        ServiceTableView = Backbone.Marionette.CompositeView.extend({
            tagName: 'table',
            id: 'service-table', 
            itemView: ServiceItemView, 
            itemViewContainer: 'tbody', 
            template: '#service-table-template', 

            appendHtml: function(collectionView, itemView){
                console.log("here");
                //collectionView.$("tbody").append(itemView.el);
            }
        });
    }
);

这是我尝试渲染它的地方:

    service_collection = new ServiceCollection([
        new Service({ 
            name: "Men's Cut", 
            length: 108000, 
            price: 2500
        }), 
        new Service({
            name: "Women's Cut", 
            length: 324000, 
            price: 5000
        })
    ]);

    service_table = new ServiceTableView({
        collection: service_collection
    });

    App.main_region.show(service_table);

更新:这是两个模板:

ServiceItemView 模板:

<script type="text/html" id="service-item-template">
    <td><%= name %></td>
    <td><%= length %></td>
    <td><%= price %></td>
    <td class="actions">
        <input type="button" class="icon" value="Delete" />
    </td>
</script>

服务 TableView 模板:

<script type="text/html" id="service-table-template">
    <thead>
        <tr>
            <th>Name</td>
            <th>Time allotment</th>
            <th>Pricing</th>
            <th class="actions">Actions</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</script>

再次呈现 ServiceTableView 模板,但下方没有呈现任何服务。

感谢任何帮助。甚至还有关于将日志语句粘贴到何处以获取更多信息的指示。

谢谢!

最佳答案

原来我创建的Collections是这样写的:

Backbone.Model.extend 而不是 Backbone.Collection.extend。我一定是在创建集合时从模型中复制了代码以加快编写速度。

如果有人想将上面的代码用作他们自己项目的示例,现在已修复并可以使用。

关于javascript - CompositeView 不呈现 ItemView,甚至不触发 appendHtml,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12906184/

相关文章:

javascript - 使用不受信任的字符串调用 require() 会出现安全问题 (require.js)

javascript - 使用变量时无效的 JSON 原语

javascript - Resolve Pouch Couch 数据库

javascript - 如何从 Backbone View 中创建多个跨度

backbone.js - 使用主干复杂模型渲染带有下划线模板引擎的 html 表

javascript - 在 RequireJS 环境下模拟使用 Lo-Dash 和 Underscore

javascript - 在没有 jQuery 的 Backbonejs 中滑出

javascript - 未定义 JSON 变量的问题

javascript - 单击后如何使徽章通知在所有网页上消失

backbone.js - Backbone.Collection#where 上的 toJSON?