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

Backbone Application Walkthrough Part 4: It Lives!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

JavaScript Code

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

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!

About the Author

Author: Joe Zim

Joe Zim

Joe Zimmerman has been doing web development ever since he found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become passionate about it. He also loves to teach others though his blog and other popular blogs. When he's not writing code, he's spending time with his wife and children and leading them in God's Word.


  • Carlos

    The link to part 5 is broken here for some reason.

    • http://www.joezimjs.com Joe Zimmerman

      Thank you for pointing that out. I fixed it.

  • Apoplectix

    Hi Joe, thank you for your tutorial everything was going great till I tried running my version in the browser and I keep getting file not found. For some reason I get a 404 error for the wines/ url, allthough everything I have seems ok. I have a link here:

    http://www.techfolio.me/sandbox/wine-cellar/

    Do you have any idea what the issue might be, the .htaccess file maybe?

    Anyway thanks again for your tutorial, really very helpful.

    Jake

    • http://www.joezimjs.com Joe Zimmerman

      The 404 message is coming from Slim (the PHP framework), which means that the .htaccess file is at lesat getting the request to the correct PHP file. Likely the issue has something to do with the routes in the PHP file. Slim’s routing patterns are kinda finicky and it’s hard to know which parts of the URL should be included. Did you change them at all? I guess some changes to the .htaccess file could also throw Slim off. Did you change that at all?

      Without access to the server/code directly, my debugging is limited.

      • Apoplectix

        Hi Joe,

        Ah, I’ve been a bit dumb was very tired last night. What happened was that I used the Slm files from Christophe Coenraets original download which I had found before finding your great video. I was having trouble with his tutorial. Now I switched his Slim files for yours and the browser can now find them. However I don’t get any wines displaying yet, everything is blank, which happens also when I downloaded your files from github. Must be something wrong my end, not sure what at the moment. Any idea why all is blank?

        Thank you for getting back to me,.

        Jake

        • http://www.joezimjs.com Joe Zimmerman

          Did you import the data into the database?