- How is this different than - SproutCore or - Cappuccino? - -
- -- This question is frequently asked, and all three projects apply general - Model-View-Controller - principles to JavaScript applications. However, there isn't much basis - for comparison. SproutCore and Cappuccino provide rich UI widgets, vast - core libraries, and determine the structure of your HTML for you. - Both frameworks measure in the hundreds of kilobytes when packed and - gzipped, and megabytes of JavaScript, CSS, and images when loaded in the browser - — there's a lot of room underneath for libraries of a more moderate scope. - Backbone is a 4 kilobyte include that provides - just the core concepts of models, events, collections, views, controllers, - and persistence. -
-Many of the examples that follow are runnable. Click the play button to execute them. @@ -550,16 +540,16 @@ new Book({ Get the current value of an attribute from the model. For example: note.get("title")
- +
escapemodel.escape(attribute)
Similar to get, but returns the HTML-escaped version
of a model's attribute. If you're interpolating data from the model into
- HTML, using escape to retrieve attributes will prevent
+ HTML, using escape to retrieve attributes will prevent
XSS attacks.
var hacker = new Backbone.Model({
name: "<script>alert('xss')</script>"
@@ -1833,6 +1823,127 @@ var DocumentView = Backbone.View.extend({
+ F.A.Q.
+
+
+ Catalog of Events
+
+ Here's a list of all of the built-in events that Backbone.js can fire.
+ You're also free to trigger your own events on Models and Views as you
+ see fit.
+
+
+
+ Nested Models & Collections
+
+ It's common to nest collections inside of models with Backbone. For example,
+ consider a Mailbox model that contains many Message models.
+ One nice pattern for handling this is have a this.messages collection
+ for each mailbox, enabling the lazy-loading of messages, when the mailbox
+ is first opened ... perhaps with MessageList views listening for
+ "add" and "remove" events.
+
+var Mailbox = Backbone.Model.extend({
+
+ initialize: function() {
+ this.messages = new Messages;
+ this.messages.url = '/mailbox/' + this.id + '/messages';
+ this.messages.bind("refresh", this.updateCounts);
+ },
+
+ ...
+
+});
+
+var Inbox = new Mailbox;
+
+// And then, when the Inbox is opened:
+
+Inbox.messages.fetch();
+
+
+
+ How does Backbone relate to "traditional" MVC?
+
+ Different implementations of the
+ Model-View-Controller
+ pattern tend to disagree about the definition of a controller. If it helps any, in
+ Backbone, the View class can also be thought of as a
+ kind of controller, dispatching events that originate from the UI, with
+ the HTML template serving as the true view. We call it a View because it
+ represents a logical chunk of UI, responsible for the contents of a single
+ DOM element.
+
+ Binding "this"
+
+ Perhaps the single most common JavaScript "gotcha" is the fact that when
+ you pass a function as a callback, it's value for this is lost. With
+ Backbone, when dealing with events and callbacks,
+ you'll often find it useful to rely on
+ _.bind and
+ _.bindAll
+ from Underscore.js. _.bind takes a function and an object to be
+ used as this, any time the function is called in the future.
+ _.bindAll takes an object and a list of method names: each method
+ in the list will be bound to the object, so that it's this may
+ not change. For example, in a View that listens for
+ changes to a collection...
+
+var MessageList = Backbone.View.extend({
+
+ initialize: function() {
+ _.bindAll(this, "addMessage", "removeMessage", "render");
+
+ var messages = this.collection;
+ messages.bind("refresh", this.render);
+ messages.bind("add", this.addMessage);
+ messages.bind("remove", this.removeMessage);
+ }
+
+});
+
+// Later, in the app...
+
+Inbox.messages.add(newMessage);
+
+
+
+
+ How is Backbone different than
+ SproutCore or
+ Cappuccino?
+
+
+ This question is frequently asked, and all three projects apply general
+ Model-View-Controller
+ principles to JavaScript applications. However, there isn't much basis
+ for comparison. SproutCore and Cappuccino provide rich UI widgets, vast
+ core libraries, and determine the structure of your HTML for you.
+ Both frameworks measure in the hundreds of kilobytes when packed and
+ gzipped, and megabytes of JavaScript, CSS, and images when loaded in the browser
+ — there's a lot of room underneath for libraries of a more moderate scope.
+ Backbone is a 4 kilobyte include that provides
+ just the core concepts of models, events, collections, views, controllers,
+ and persistence.
+
@@ -1841,7 +1952,7 @@ var DocumentView = Backbone.View.extend({ jQuery, as a framework for DOM manipulation and Ajax support. Implemented Model#escape, to efficiently handle attributes intended for HTML interpolation. When trying to persist a model, - failed requests will now trigger an "error" event. The + failed requests will now trigger an "error" event. The ubiquitous options argument is now passed as the final argument to all "change" events.