Backbone Application Walkthrough Part 4: It Lives! - Video Tutorial

We’ve made it to part 4 of this Backbone application walkthrough series. This time we finally get the app to do something worthwhile… like work! The application finally lives as we implement the router and hit the “GO” button. Check out the power of the router and don’t forget that just because it’s running, does not mean we’re done. The next and final video in this series converts the application to work with AMD and RequireJS.

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

"js/main.js"

Backbone.View.prototype.close = function(listitem) {
    console.log( 'Closing view ' + this );

    if ( this.beforeClose ) {
        this.beforeClose();
    }

    this.remove();
    this.unbind();
}

var AppRouter = Backbone.Router.extend({

    initialize: function () {
        $('#header').html(new HeaderView().render());
    },

    routes: {
        "": "list",
        "wines/new": "newWine",
        "wines/:id": "wineDetails"
    },

    list: function () {
        this.before(function () {
            this.showView('#content', new StartView());
        });
    },

    wineDetails: function (id) {
        this.before(function () {
            var wine = this.wineList.get(id);
            this.showView('#content', new WineView({
                model: wine
            }));
        });
    },

    newWine: function () {
        this.before(function () {
            this.showView('#content', new WineView({
                model: new Wine()
            }));
        });
    },

    showView: function (selector, view) {
        if (this.currentView) this.currentView.close();

        $(selector).html(view.render());
        this.currentView = view;

        return view;
    },

    before: function (callback) {
        if (this.wineList) {
            if (callback) callback.call(this);
        } else {
            this.wineList = new WineCollection();
            var self = this;
            this.wineList.fetch({
                success: function () {
                    var winelist = new WineListView({
                        model: self.wineList
                    }).render();
                    $('#sidebar').html(winelist);
                    if (callback) callback.call(self);
                }
            });
        }
    }

});

tpl.loadTemplates(['header', 'wine-details', 'wine-list-item', 'start'], function () {
    app = new AppRouter();
    Backbone.history.start();
});

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

It’s Alive!

Yes, this application is technically finished and running just like it’s supposed to be, but we’re not finished. The way Backbone.js is built allows it to be easily converted to work with AMD and RequireJS, so in the next video you’ll see how that’s done. Then, after that video, we’ll be going through the poll and starting to create articles for your favorite topics. God bless and Happy Coding!