Developing single page web apps with Backbone.js is an interesting experience. Each individual part of the UI is considered to be a View.
So, for example, if you wanted to display one of Twitter Bootstrap’s alerts you might create a template:
<div id="alert" class="alert-message error fade in"> <a class="close" href="#">x</a> <p><strong><%= title %></strong> <%= message %></p> </div>
And a module to display it:
MyApp.Errors = {}; (function(ns, $) { var Error = Backbone.Model.extend(); var errorAlertTemplate = $.get("templates/errors/error-alert.htm", function(data) { errorAlertTemplate = _.template(data); }); var renderTemplate = function(self, url, render) { if (!self.template) { $.get(url, function(data) { self.template = _.template(data); render(); }); } else { render(); } }; var ErrorAlertView = Backbone.View.extend({ el: $('#alert'), render: function(eventName) { var self = this; renderTemplate(self, "templates/errors/error-alert.htm", function() { $(self.el).html(self.template(self.model.toJSON())); }); return this; } }); ns.errorAlert = function(title, message) { var error = new Error({ title: title, message: message }); app.error = new ErrorAlertView({ model: error }); app.error.render(); $(".alert-message").alert(); }; })(MyApp.Errors, jQuery);
You can then use this in your routes:
MyApp.MyModule = {}; (function(ns, $, errors) { ns.someRoute = function() { var somethings = new SomethingCollection(); somethings.fetch({ success: function() { var view = new SomethingListView({model: somethings}); view.render(); }, error: function() { errors.errorAlert("ERROR:", "Failed to retrieve somethings"); } }); }; })(MyApp.MyModule, jQuery, MyApp.Errors);
Great example! Thanks!
You’re welcome :)