- When working on a web application that involved a lot of JavaScript, one + When working on a web application that involved a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in @@ -305,12 +305,12 @@ Loading the "Hello World" of SproutCore includes 2.5 megabytes of JavaScript on the page; the "Hello World" of Cappuccino includes 1.7 megabytes of JS and images, as measured with the Webkit inspector. - Backbone is a 2 kilobyte include (packed, gzipped) that provides - just the core concepts of models, events (key-value binding), collections, - views, and persistence. A much closer relative to Backbone is + Backbone is a 2 kilobyte include (packed, gzipped) that provides + just the core concepts of models, events (key-value binding), collections, + views, and persistence. A much closer relative to Backbone is js-model.
- +Many of the examples that follow are runnable. Click the play button to execute them. @@ -345,14 +345,14 @@ object.trigger("alert", "an event"); If you have many events on a page, the convention is to use colons to namespace them: "poll:start".
- +Callbacks bound to the special "all" event will be triggered when any event occurs, and are passed the name of the event as the first argument. For example, to proxy all events from one object to another:
- +
proxy.bind("all", function(eventName) {
object.trigger(eventName);
@@ -367,7 +367,7 @@ proxy.bind("all", function(eventName) {
removed. If no event is specified, all bound callbacks on the object
will be removed.
-
+
object.unbind("change", onChange); // Removes just the onChange callback.
@@ -424,24 +424,24 @@ sidebar.promptColor();
extendBackbone.Model.extend(properties, [classProperties])
To create a Model class of your own, you extend Backbone.Model
- and provide instance properties, as well as optional
+ and provide instance properties, as well as optional
classProperties to be attached directly to the constructor function.
-
+
extend correctly sets up the prototype chain, so subclasses created
with extend can be further extended and subclassed as far as you like.
-
+
var Note = Backbone.Model.extend({
-
+
author: function() { ... },
-
+
allowedToEdit: function(account) { ... },
-
+
coordinates: function() { ... }
-
+
});
@@ -452,7 +452,7 @@ var Note = Backbone.Model.extend({
of the attributes, which will be set on the
model.
-
+
new Book({
title: "One Thousand and One Nights",
@@ -476,8 +476,8 @@ new Book({
- If the model has a validate method,
- it will be validated before the attributes are set, and no changes will
+ If the model has a validate method,
+ it will be validated before the attributes are set, and no changes will
occur if the validation fails.
@@ -491,24 +491,24 @@ note.set({title: "October 12", content: "Lorem Ipsum Dolor Sit Amet..."});
Remove an attribute by deleting it from the internal attributes hash.
Fires a "change" event unless silent is passed as an option.
-
+
idmodel.id
A special property of models, the id is an arbitrary string
(integer id or UUID). If you set the id in the
- attributes hash, it will be copied onto the model as a direct property.
+ attributes hash, it will be copied onto the model as a direct property.
Models can be retrieved by id from collections, and the id is used to generate
model URLs by default.
-
+
cidmodel.cid
A special property of models, the cid or client id is a unique identifier
automatically assigned to all models when they're first created. Client ids
are handy when the model has not yet been saved to the server, and does not
- yet have its eventual true id, but already needs to be visible in the UI.
+ yet have its eventual true id, but already needs to be visible in the UI.
Client ids take the form: c1, c2, c3 ...
@@ -520,12 +520,12 @@ note.set({title: "October 12", content: "Lorem Ipsum Dolor Sit Amet..."});
them directly. If you'd like to retrieve and munge a copy of the model's
attributes, use toJSON instead.
-
+
toJSONmodel.toJSON
- Return a copy of the model's attributes for JSON stringification.
- This can be used for persistence, serialization, or for augmentation before
+ Return a copy of the model's attributes for JSON stringification.
+ This can be used for persistence, serialization, or for augmentation before
being handed off to a view.
@@ -546,13 +546,13 @@ alert(JSON.stringify(artist));
Save a model to your database (or alternative persistence layer),
by delegating to Backbone.sync. If the model has a validate
method, and validation fails, the model will not be saved. If the model
- isNew, the save will be a "create"
+ isNew, the save will be a "create"
(HTTP POST), if the model already
exists on the server, the save will be an "update" (HTTP PUT). Accepts
success and error callbacks in the options hash, which
are passed (model, response) as arguments.
-
+
In the following example, notice how because the model has never been
saved previously, our overridden version of Backbone.sync receives a "create" request.
@@ -728,7 +728,7 @@ bill.set({name : "Bill Jones"});
providing instance properties, as well as optional classProperties to be attached
directly to the collection's constructor function.
-
+
constructornew Collection([models], [options])
@@ -736,11 +736,11 @@ bill.set({name : "Bill Jones"});
The collection's comparator function
may be included as an option.
-
+
window.Tabs = new TabSet([tab1, tab2, tab3]);
-
+
modelscollection.models
@@ -837,7 +837,7 @@ ships.add([
Get a model from a collection, specified by id.
-
+
var book = Library.get(110);
@@ -858,30 +858,30 @@ var book = Library.get(110);
is sorted, and if your collection isn't sorted, at will still
retrieve models in insertion order.
-
+
lengthcollection.length
Like an array, a Collection maintains a length property, counting
the number of models it contains.
-
+
comparatorcollection.comparator
By default there is no comparator function on a collection.
- If you define a comparator, it will be used to maintain
+ If you define a comparator, it will be used to maintain
the collection in sorted order. This means that as models are added,
they are inserted at the correct index in collection.models.
Comparator functions take a model and return a numeric or string value
by which the model should be ordered relative to others.
-
+
Note how even though all of the chapters in this example are added backwards,
they come out in the proper order:
-
+
var Chapter = Backbone.Model;
var chapters = new Backbone.Collection;
@@ -964,7 +964,7 @@ var Notes = Backbone.Collection.extend({
Fetch the default set of models for this collection from the server,
refreshing the collection when they arrive. The options hash takes
success and error
- callbacks which will be passed (collection, response) as arguments.
+ callbacks which will be passed (collection, response) as arguments.
Delegates to Backbone.sync
under the covers, for custom persistence strategies.
@@ -974,7 +974,7 @@ var Notes = Backbone.Collection.extend({
models, namespaced under "models": {"models": [...]} —
additional information can be returned with the response under different keys.
-
+
Backbone.sync = function(method, model) {
alert(method + ": " + model.url);
@@ -1006,7 +1006,7 @@ accounts.fetch();
must have a model property, referencing the type of model that
the collection contains.
-
+
var Library = Backbone.Collection.extend({
model: Book
@@ -1040,23 +1040,23 @@ var othello = NYPL.create({
- When formulating server responses for Backbone.sync requests, + When formulating server responses for Backbone.sync requests, model attributes will be sent up, serialized as JSON, under the model parameter. When returning a JSON response, send down the model's representation under the model key, and other keys can be used for additional out-of-band information. When responding to a "read" request from a collection, send down the array of model attribute hashes under the models key.
- +For example, a Rails handler responding to an "update" call from Backbone.sync would look like this: (In real code, never use update_attributes blindly, and always whitelist the attributes you allow to be changed.)
- +
def update
account = Account.find(params[:id])
@@ -1068,58 +1068,58 @@ end
Backbone.View
- Backbone views are almost more convention than they are code — they
- don't determine anything about your HTML or CSS for you, and can be used
+ Backbone views are almost more convention than they are code — they
+ don't determine anything about your HTML or CSS for you, and can be used
with any JavaScript templating library.
The general idea is to organize your interface into logical views,
backed by models, each of which can be updated independently when the
- model changes, without having to redraw the page. Instead of digging into
- a JSON object, looking up an element in the DOM, and updating the HTML by hand,
+ model changes, without having to redraw the page. Instead of digging into
+ a JSON object, looking up an element in the DOM, and updating the HTML by hand,
it should look more like:
model.bind('change', view.render) — and now everywhere that
model data is displayed in the UI, it is always immediately up to date.
-
+
extendBackbone.View.extend(properties, [classProperties])
Get started with views by creating a custom view class. You'll want to
override the render function, specify your
declarative events, and perhaps the
- tagName, className, or id of the View's root
+ tagName, className, or id of the View's root
element.
-
+
var DocumentRow = Backbone.View.extend({
-
+
tagName: "li",
-
+
className: "document-row",
-
+
events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
},
-
+
render: function() {
...
}
-
+
});
-
+
constructornew View([options])
- When creating a new View, the options you pass are attached to the view
+ When creating a new View, the options you pass are attached to the view
as this.options, for future reference. There are several special
- options that, if passed, will be attached directly to the view:
+ options that, if passed, will be attached directly to the view:
model, collection,
el, id, className, and tagName.
-
+
var doc = Documents.first();
@@ -1138,7 +1138,7 @@ new DocumentRow({
at once, in order to get high-performance UI rendering with as few
reflows and repaints as possible.
-
+
this.el is created from the view's tagName, className,
and id properties, if specified. If not, el is an empty div.
@@ -1173,8 +1173,8 @@ ui.Chapter = Backbone.View.extend({
function with your code that renders the view template from model data,
and updates this.el with the new HTML. You can use any flavor of
JavaScript templating or DOM-building you prefer. Because Underscore.js
- is already on the page,
- _.template
+ is already on the page,
+ _.template
is already available. A good
convention is to return this at the end of render to
enable chained calls.
@@ -1196,7 +1196,7 @@ var Bookmark = Backbone.View.extend({
with optional attributes and HTML content. Used internally to create the
initial view.el.
-
+
var view = new Backbone.View;
@@ -1250,15 +1250,15 @@ var DocumentView = Backbone.View.extend({
this.handleEvents();
return this;
},
-
+
open: function() {
window.open(this.model.get("viewer_url"));
},
-
+
select: function() {
this.model.set({selected: true});
},
-
+
...
});