Question

I’m a little lost with my view rendering–first time trying to do this. I have my templates set up similar to this application.

So far I have it rendering the template for the CompositeView but it doesn’t render any of the ItemViews. It doesn’t even trigger the rendering method to try to debug so I’m not sure where I can log pieces to see where it’s getting stuck… Here’s the code:

This is my ItemView:

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

This is my CompositeView: Update: Added in my requirejs code to show that ServiceItemView is loaded before 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);
            }
        });
    }
);

Here’s where I attempt to render it:

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

Update: Here are the two templates:

ServiceItemView Template:

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

ServiceTableView Template:

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

Again, the ServiceTableView template is rendered, but none of the Services are rendered underneath.

Any help is appreciated. Even pointers on where to stick log statements to get more information.

Thanks!

Answer 1

Turns out the Collections I had created were written:

Backbone.Model.extend instead of Backbone.Collection.extend. I must have copied the code from the model when creating the collection to speed up writing it.

Fixed now and working if anyone would like to use the above code for an example for their own projects.