How to pass a template to a view in Backbone

Question

I'm trying to pass a template to my view. I have several different templates I want to use and want to be able to switch them up in my router. I get no errors, but I get no results. It looks like the initialize method isn't being called in my second view. Here is my code:

   (function() {
        window.App = {
            Models: {},
            Collections: {},
            Views: {},
            Router: {}
        };

        window.template = function(id) {
            return _.template( $('#' + id).html() );
        };

        var vent = _.extend({}, Backbone.Events);

        _.templateSettings.interpolate = /\[\[(.+?)\]\]/g;

        App.Router = Backbone.Router.extend({
            routes: {
                '' : 'index',
                'send-message' : 'sendMessage',
                '*other' : 'other'
            },
            index: function() {
                t = new (App.Collections.Tables.extend({ url: 'main-contact'}))();
                tables = new (App.Views.Tables.extend({
     collection: t, template: template('mainContactTemplate')}))();
                $('#web-leads').html(tables.el);
            },
            sendMessage: function() {
                t = new (App.Collections.Tables.extend({ url: 'send-message'}))();
                tables = new App.Views.Tables.extend({
     collection: t, template: template('sendMessageTemplate')});
                $('#web-leads').html(tables.el);
            },
            other: function() {

            }
        });

        // Main Contact
        App.Models.Table = Backbone.Model.extend({});

        App.Collections.Tables = Backbone.Collection.extend({
            model: App.Models.Table,
            initialize: function(models, options) {
                this.fetch({
                    success: function(data) {
                        //console.log(data.models);
                    }
                });
                if (options) {
                    this.url = this.url || options.url;
                }
            }
        });

        App.Views.Tables = Backbone.View.extend({
            tagName: 'ul',
            initialize: function() {
                this.collection.on('reset', this.render, this);
            },
            render: function() {
                return this.collection.each(this.addOne, this);
            },
            addOne: function(model) {
                var t = new App.Views.Table({ model: model, template: template});
                this.$el.append(t.render().el);
                return this;
            }
        });

        App.Views.Table = Backbone.View.extend({
            tagName: 'li',
            template: this.template,
            initialize: function (attrs) {
                this.options = attrs;
                console.log(this.options);
            },
            render: function() {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }
        });



        new App.Router();
        Backbone.history.start();
    })();

EDIT: I was missing some parenthesis. But now I get an error of an unrecognized expression. Initialize is now being called.

Answer 1

The way you are doing it in App.Views.Table is (as far as I can tell) the "standard" way of using templates with Backbone. There are of course several alternatives though, and none of them are "wrong" per say.

That being said, you do have a couple problems in your code. Let's start with:

template: this.template,

At the time that code runs you're not in an instance of App.Views.Tables, you're in the global space declaring a class that (later) will be used to make instances. At that moment though, this just refers to window. What you really want to do is set the template in your initialize, which leads me to:

initialize: function(options) {
     this.template = options.template;
},

But then there's one last problem:

var t = new App.Views.Table({ model: model, template: template});

there is no template variable in that function, so you're really doing template: undefined. That should use a real template.

All that being said, you might want to just consider putting the template on the view directly, the way you sort of tried to:

template: Handlebars.compile('<span>{{test}}</span>'),

After all, any given view should always use the same template, right? Also, you might want to consider moving the:

render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
}

in to a parent class, so that you can share it between all of your templated views, instead of having to repeat it.