Backbone.js Application Walkthrough Part 3: New View and External Templating – Video Tutorial

Moving on to part 3 of the Backbone Application Walkthrough video series, we work on moving all of the templates to external files to reduce the dependency on the templates being included in the index.html file and so that they might become available if we use these views on different pages. Also, I added an extra view that wasn’t in the original application because, as you’ll see in the video, it makes things a little nicer.

Backbone.js Video Tutorial Series

• Backbone.js Part 1: Models
• Backbone.js Part 2: Views
• Backbone.js Part 3: Routers
• Backbone.js Part 4: Collections
• Backbone.js Part 5: AJAX
• Backbone App Walkthrough Part 1: HTML and Models
• Backbone App Walkthrough Part 2: Views and Templates
• Backbone App Walkthrough Part 3: New View and External Templating
• Backbone App Walkthrough Part 4: It Lives!
• Backbone App Walkthrough Part 5: RequireJS

JavaScript Code

I’ll just post some of the code on here because it isn’t really worth posting all of it. The first line tells you which file it is.

"js/views/start.js"

window.StartView = Backbone.View.extend({

    initialize: function() {
        this.template = _.template( tpl.get('start-template') );
    },

    render: function() {
        this.$el.html( this.template() );

        return this.el;
    }

});

"js/util.js"

tpl = {

    // Hash of preloaded templates for the app
    templates:{},

    // Recursively pre-load all the templates for the app.
    // This implementation should be changed in a production environment. All the template files should be
    // concatenated in a single file.
    loadTemplates:function (names, callback) {

        var that = this;

        var loadTemplate = function (index) {
            var name = names[index];
            console.log('Loading template: ' + name);
            $.get('templates/' + name + '.html', function (data) {
                that.templates[name] = data;
                index++;
                if (index < names.length) {
                    loadTemplate(index);
                } else {
                    callback();
                }
            });
        }

        loadTemplate(0);
    },

    // Get template by name from hash of preloaded templates
    get:function (name) {
        return this.templates[name];
    }

};

"js/main.js"

Backbone.View.prototype.close = function () {
    console.log('Closing view ' + this);
    if (this.beforeClose) {
        this.beforeClose();
    }
    this.remove();
    this.unbind();
};

tpl.loadTemplates(['header', 'wine-details', 'wine-list-item', 'start'], function () {
    ... // Run App
});

Backbone.js Video Tutorial Series

• Backbone.js Part 1: Models
• Backbone.js Part 2: Views
• Backbone.js Part 3: Routers
• Backbone.js Part 4: Collections
• Backbone.js Part 5: AJAX
• Backbone App Walkthrough Part 1: HTML and Models
• Backbone App Walkthrough Part 2: Views and Templates
• Backbone App Walkthrough Part 3: New View and External Templating
• Backbone App Walkthrough Part 4: It Lives!
• Backbone App Walkthrough Part 5: RequireJS

Looking Ahead

As I stated in the video, there should be 2 more video left in this series. The next one will be finishing up the application and getting it running. The one after that will be more of a RequireJS tutorial than anything, but will show you how to make your Backbone applications work with AMD. Part 4 should be out this Thursday, so look forward to that. God bless and happy coding!