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

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

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

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.