Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

adding first betabetabeta release

  • Loading branch information...
commit 7353399930dada7bbc829dcd2a98c494934dca62 1 parent 64c3d6a
@addyosmani authored
Showing with 3,321 additions and 0 deletions.
  1. +4 −0 README
  2. +84 −0 backbone-localstorage.js
  3. +985 −0 backbone.js
  4. +473 −0 backbonestore.nw
  5. +78 −0 data/album1.json
  6. +373 −0 gallery.js
  7. BIN  images/1.jpg
  8. BIN  images/2,.jpg
  9. BIN  images/3.jpg
  10. BIN  images/4.jpg
  11. BIN  images/4large.jpg
  12. BIN  images/5.jpg
  13. BIN  images/54.jpg
  14. BIN  images/5large.jpg
  15. BIN  images/6.jpg
  16. BIN  images/7.jpg
  17. BIN  images/8.jpg
  18. BIN  images/9.jpg
  19. BIN  images/AdventuresInOdyssey.jpg
  20. BIN  images/AdventuresInOdyssey_t.jpg
  21. BIN  images/AmericanAttorneys.jpg
  22. BIN  images/AmericanAttorneys_t.jpg
  23. BIN  images/BritishCivilLightTransport.jpg
  24. BIN  images/BritishCivilLightTransport_t.jpg
  25. BIN  images/PeriodsofMentalAssimilation.jpg
  26. BIN  images/PeriodsofMentalAssimilation_t.jpg
  27. BIN  images/Pulaski.jpg
  28. BIN  images/Pulaski_t.jpg
  29. BIN  images/StealthMonkeyVirus.png
  30. BIN  images/StealthMonkeyVirus_t.jpg
  31. BIN  images/SumsofMagnolia.jpg
  32. BIN  images/SumsofMagnolia_t.jpg
  33. BIN  images/testfolder.jpg
  34. +69 −0 index.html
  35. +167 −0 jquery-1.4.4.min.js
  36. +1 −0  jquery.tmpl.min.js
  37. +283 −0 jquery.validjson.js
  38. +58 −0 jsongallery.css
  39. +24 −0 underscore-min.js
  40. +722 −0 underscore.js
View
4 README
@@ -0,0 +1,4 @@
+
+## Backbone.js Multi-level Image Gallery
+
+Inspired by the store example by Elf M. Sternberg I decided to try taking this concept a few levels further by creating a multi-level Backbone based image gallery which supports album covers, albums and sub-albums. With three views this project aims to provide a lightweight, clean solution that can be used for personal projects easily [If I can ever get it finished!].
View
84 backbone-localstorage.js
@@ -0,0 +1,84 @@
+// A simple module to replace `Backbone.sync` with *localStorage*-based
+// persistence. Models are given GUIDS, and saved into a JSON object. Simple
+// as that.
+
+// Generate four random hex digits.
+function S4() {
+ return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
+};
+
+// Generate a pseudo-GUID by concatenating random hexadecimal.
+function guid() {
+ return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
+};
+
+// Our Store is represented by a single JS object in *localStorage*. Create it
+// with a meaningful name, like the name you'd give a table.
+var Store = function(name) {
+ this.name = name;
+ var store = localStorage.getItem(this.name);
+ this.data = (store && JSON.parse(store)) || {};
+};
+
+_.extend(Store.prototype, {
+
+ // Save the current state of the **Store** to *localStorage*.
+ save: function() {
+ localStorage.setItem(this.name, JSON.stringify(this.data));
+ },
+
+ // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
+ // have an id of it's own.
+ create: function(model) {
+ if (!model.id) model.id = model.attributes.id = guid();
+ this.data[model.id] = model;
+ this.save();
+ return model;
+ },
+
+ // Update a model by replacing its copy in `this.data`.
+ update: function(model) {
+ this.data[model.id] = model;
+ this.save();
+ return model;
+ },
+
+ // Retrieve a model from `this.data` by id.
+ find: function(model) {
+ return this.data[model.id];
+ },
+
+ // Return the array of all models currently in storage.
+ findAll: function() {
+ return _.values(this.data);
+ },
+
+ // Delete a model from `this.data`, returning it.
+ destroy: function(model) {
+ delete this.data[model.id];
+ this.save();
+ return model;
+ }
+
+});
+
+// Override `Backbone.sync` to use delegate to the model or collection's
+// *localStorage* property, which should be an instance of `Store`.
+Backbone.sync = function(method, model, success, error) {
+
+ var resp;
+ var store = model.localStorage || model.collection.localStorage;
+
+ switch (method) {
+ case "read": resp = model.id ? store.find(model) : store.findAll(); break;
+ case "create": resp = store.create(model); break;
+ case "update": resp = store.update(model); break;
+ case "delete": resp = store.destroy(model); break;
+ }
+
+ if (resp) {
+ success(resp);
+ } else {
+ error("Record not found");
+ }
+};
View
985 backbone.js
@@ -0,0 +1,985 @@
+// Backbone.js 0.3.2
+// (c) 2010 Jeremy Ashkenas, DocumentCloud Inc.
+// Backbone may be freely distributed under the MIT license.
+// For all details and documentation:
+// http://documentcloud.github.com/backbone
+
+(function(){
+
+ // Initial Setup
+ // -------------
+
+ // The top-level namespace. All public Backbone classes and modules will
+ // be attached to this. Exported for both CommonJS and the browser.
+ var Backbone;
+ if (typeof exports !== 'undefined') {
+ Backbone = exports;
+ } else {
+ Backbone = this.Backbone = {};
+ }
+
+ // Current version of the library. Keep in sync with `package.json`.
+ Backbone.VERSION = '0.3.2';
+
+ // Require Underscore, if we're on the server, and it's not already present.
+ var _ = this._;
+ if (!_ && (typeof require !== 'undefined')) _ = require("underscore")._;
+
+ // For Backbone's purposes, jQuery owns the `$` variable.
+ var $ = this.jQuery;
+
+ // Turn on `emulateHTTP` to use support legacy HTTP servers. Setting this option will
+ // fake `"PUT"` and `"DELETE"` requests via the `_method` parameter and set a
+ // `X-Http-Method-Override` header.
+ Backbone.emulateHTTP = false;
+
+ // Turn on `emulateJSON` to support legacy servers that can't deal with direct
+ // `application/json` requests ... will encode the body as
+ // `application/x-www-form-urlencoded` instead and will send the model in a
+ // form param named `model`.
+ Backbone.emulateJSON = false;
+
+ // Backbone.Events
+ // -----------------
+
+ // A module that can be mixed in to *any object* in order to provide it with
+ // custom events. You may `bind` or `unbind` a callback function to an event;
+ // `trigger`-ing an event fires all callbacks in succession.
+ //
+ // var object = {};
+ // _.extend(object, Backbone.Events);
+ // object.bind('expand', function(){ alert('expanded'); });
+ // object.trigger('expand');
+ //
+ Backbone.Events = {
+
+ // Bind an event, specified by a string name, `ev`, to a `callback` function.
+ // Passing `"all"` will bind the callback to all events fired.
+ bind : function(ev, callback) {
+ var calls = this._callbacks || (this._callbacks = {});
+ var list = this._callbacks[ev] || (this._callbacks[ev] = []);
+ list.push(callback);
+ return this;
+ },
+
+ // Remove one or many callbacks. If `callback` is null, removes all
+ // callbacks for the event. If `ev` is null, removes all bound callbacks
+ // for all events.
+ unbind : function(ev, callback) {
+ var calls;
+ if (!ev) {
+ this._callbacks = {};
+ } else if (calls = this._callbacks) {
+ if (!callback) {
+ calls[ev] = [];
+ } else {
+ var list = calls[ev];
+ if (!list) return this;
+ for (var i = 0, l = list.length; i < l; i++) {
+ if (callback === list[i]) {
+ list.splice(i, 1);
+ break;
+ }
+ }
+ }
+ }
+ return this;
+ },
+
+ // Trigger an event, firing all bound callbacks. Callbacks are passed the
+ // same arguments as `trigger` is, apart from the event name.
+ // Listening for `"all"` passes the true event name as the first argument.
+ trigger : function(ev) {
+ var list, calls, i, l;
+ if (!(calls = this._callbacks)) return this;
+ if (list = calls[ev]) {
+ for (i = 0, l = list.length; i < l; i++) {
+ list[i].apply(this, Array.prototype.slice.call(arguments, 1));
+ }
+ }
+ if (list = calls['all']) {
+ for (i = 0, l = list.length; i < l; i++) {
+ list[i].apply(this, arguments);
+ }
+ }
+ return this;
+ }
+
+ };
+
+ // Backbone.Model
+ // --------------
+
+ // Create a new model, with defined attributes. A client id (`cid`)
+ // is automatically generated and assigned for you.
+ Backbone.Model = function(attributes, options) {
+ attributes || (attributes = {});
+ if (this.defaults) attributes = _.extend({}, this.defaults, attributes);
+ this.attributes = {};
+ this.cid = _.uniqueId('c');
+ this.set(attributes, {silent : true});
+ this._previousAttributes = _.clone(this.attributes);
+ if (options && options.collection) this.collection = options.collection;
+ this.initialize(attributes, options);
+ };
+
+ // Attach all inheritable methods to the Model prototype.
+ _.extend(Backbone.Model.prototype, Backbone.Events, {
+
+ // A snapshot of the model's previous attributes, taken immediately
+ // after the last `"change"` event was fired.
+ _previousAttributes : null,
+
+ // Has the item been changed since the last `"change"` event?
+ _changed : false,
+
+ // Initialize is an empty function by default. Override it with your own
+ // initialization logic.
+ initialize : function(){},
+
+ // Return a copy of the model's `attributes` object.
+ toJSON : function() {
+ return _.clone(this.attributes);
+ },
+
+ // Get the value of an attribute.
+ get : function(attr) {
+ return this.attributes[attr];
+ },
+
+ // Set a hash of model attributes on the object, firing `"change"` unless you
+ // choose to silence it.
+ set : function(attrs, options) {
+
+ // Extract attributes and options.
+ options || (options = {});
+ if (!attrs) return this;
+ if (attrs.attributes) attrs = attrs.attributes;
+ var now = this.attributes;
+
+ // Run validation.
+ if (!options.silent && this.validate && !this._performValidation(attrs, options)) return false;
+
+ // Check for changes of `id`.
+ if ('id' in attrs) this.id = attrs.id;
+
+ // Update attributes.
+ for (var attr in attrs) {
+ var val = attrs[attr];
+ if (!_.isEqual(now[attr], val)) {
+ now[attr] = val;
+ if (!options.silent) {
+ this._changed = true;
+ this.trigger('change:' + attr, this, val);
+ }
+ }
+ }
+
+ // Fire the `"change"` event, if the model has been changed.
+ if (!options.silent && this._changed) this.change();
+ return this;
+ },
+
+ // Remove an attribute from the model, firing `"change"` unless you choose
+ // to silence it.
+ unset : function(attr, options) {
+ options || (options = {});
+ var value = this.attributes[attr];
+
+ // Run validation.
+ var validObj = {};
+ validObj[attr] = void 0;
+ if (!options.silent && this.validate && !this._performValidation(validObj, options)) return false;
+
+ // Remove the attribute.
+ delete this.attributes[attr];
+ if (!options.silent) {
+ this._changed = true;
+ this.trigger('change:' + attr, this);
+ this.change();
+ }
+ return this;
+ },
+
+ // Clear all attributes on the model, firing `"change"` unless you choose
+ // to silence it.
+ clear : function(options) {
+ options || (options = {});
+ var old = this.attributes;
+
+ // Run validation.
+ var validObj = {};
+ for (attr in old) validObj[attr] = void 0;
+ if (!options.silent && this.validate && !this._performValidation(validObj, options)) return false;
+
+ this.attributes = {};
+ if (!options.silent) {
+ this._changed = true;
+ for (attr in old) {
+ this.trigger('change:' + attr, this);
+ }
+ this.change();
+ }
+ return this;
+ },
+
+ // Fetch the model from the server. If the server's representation of the
+ // model differs from its current attributes, they will be overriden,
+ // triggering a `"change"` event.
+ fetch : function(options) {
+ options || (options = {});
+ var model = this;
+ var success = function(resp) {
+ if (!model.set(model.parse(resp), options)) return false;
+ if (options.success) options.success(model, resp);
+ };
+ var error = options.error && _.bind(options.error, null, model);
+ (this.sync || Backbone.sync)('read', this, success, error);
+ return this;
+ },
+
+ // Set a hash of model attributes, and sync the model to the server.
+ // If the server returns an attributes hash that differs, the model's
+ // state will be `set` again.
+ save : function(attrs, options) {
+ options || (options = {});
+ if (attrs && !this.set(attrs, options)) return false;
+ var model = this;
+ var success = function(resp) {
+ if (!model.set(model.parse(resp), options)) return false;
+ if (options.success) options.success(model, resp);
+ };
+ var error = options.error && _.bind(options.error, null, model);
+ var method = this.isNew() ? 'create' : 'update';
+ (this.sync || Backbone.sync)(method, this, success, error);
+ return this;
+ },
+
+ // Destroy this model on the server. Upon success, the model is removed
+ // from its collection, if it has one.
+ destroy : function(options) {
+ options || (options = {});
+ var model = this;
+ var success = function(resp) {
+ if (model.collection) model.collection.remove(model);
+ if (options.success) options.success(model, resp);
+ };
+ var error = options.error && _.bind(options.error, null, model);
+ (this.sync || Backbone.sync)('delete', this, success, error);
+ return this;
+ },
+
+ // Default URL for the model's representation on the server -- if you're
+ // using Backbone's restful methods, override this to change the endpoint
+ // that will be called.
+ url : function() {
+ var base = getUrl(this.collection);
+ if (this.isNew()) return base;
+ return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
+ },
+
+ // **parse** converts a response into the hash of attributes to be `set` on
+ // the model. The default implementation is just to pass the response along.
+ parse : function(resp) {
+ return resp;
+ },
+
+ // Create a new model with identical attributes to this one.
+ clone : function() {
+ return new this.constructor(this);
+ },
+
+ // A model is new if it has never been saved to the server, and has a negative
+ // ID.
+ isNew : function() {
+ return !this.id;
+ },
+
+ // Call this method to manually fire a `change` event for this model.
+ // Calling this will cause all objects observing the model to update.
+ change : function() {
+ this.trigger('change', this);
+ this._previousAttributes = _.clone(this.attributes);
+ this._changed = false;
+ },
+
+ // Determine if the model has changed since the last `"change"` event.
+ // If you specify an attribute name, determine if that attribute has changed.
+ hasChanged : function(attr) {
+ if (attr) return this._previousAttributes[attr] != this.attributes[attr];
+ return this._changed;
+ },
+
+ // Return an object containing all the attributes that have changed, or false
+ // if there are no changed attributes. Useful for determining what parts of a
+ // view need to be updated and/or what attributes need to be persisted to
+ // the server.
+ changedAttributes : function(now) {
+ now || (now = this.attributes);
+ var old = this._previousAttributes;
+ var changed = false;
+ for (var attr in now) {
+ if (!_.isEqual(old[attr], now[attr])) {
+ changed = changed || {};
+ changed[attr] = now[attr];
+ }
+ }
+ return changed;
+ },
+
+ // Get the previous value of an attribute, recorded at the time the last
+ // `"change"` event was fired.
+ previous : function(attr) {
+ if (!attr || !this._previousAttributes) return null;
+ return this._previousAttributes[attr];
+ },
+
+ // Get all of the attributes of the model at the time of the previous
+ // `"change"` event.
+ previousAttributes : function() {
+ return _.clone(this._previousAttributes);
+ },
+
+ // Run validation against a set of incoming attributes, returning `true`
+ // if all is well. If a specific `error` callback has been passed,
+ // call that instead of firing the general `"error"` event.
+ _performValidation : function(attrs, options) {
+ var error = this.validate(attrs);
+ if (error) {
+ if (options.error) {
+ options.error(this, error);
+ } else {
+ this.trigger('error', this, error);
+ }
+ return false;
+ }
+ return true;
+ }
+
+ });
+
+ // Backbone.Collection
+ // -------------------
+
+ // Provides a standard collection class for our sets of models, ordered
+ // or unordered. If a `comparator` is specified, the Collection will maintain
+ // its models in sort order, as they're added and removed.
+ Backbone.Collection = function(models, options) {
+ options || (options = {});
+ if (options.comparator) {
+ this.comparator = options.comparator;
+ delete options.comparator;
+ }
+ this._boundOnModelEvent = _.bind(this._onModelEvent, this);
+ this._reset();
+ if (models) this.refresh(models, {silent: true});
+ this.initialize(models, options);
+ };
+
+ // Define the Collection's inheritable methods.
+ _.extend(Backbone.Collection.prototype, Backbone.Events, {
+
+ // The default model for a collection is just a **Backbone.Model**.
+ // This should be overridden in most cases.
+ model : Backbone.Model,
+
+ // Initialize is an empty function by default. Override it with your own
+ // initialization logic.
+ initialize : function(){},
+
+ // The JSON representation of a Collection is an array of the
+ // models' attributes.
+ toJSON : function() {
+ return this.map(function(model){ return model.toJSON(); });
+ },
+
+ // Add a model, or list of models to the set. Pass **silent** to avoid
+ // firing the `added` event for every new model.
+ add : function(models, options) {
+ if (_.isArray(models)) {
+ for (var i = 0, l = models.length; i < l; i++) {
+ this._add(models[i], options);
+ }
+ } else {
+ this._add(models, options);
+ }
+ return this;
+ },
+
+ // Remove a model, or a list of models from the set. Pass silent to avoid
+ // firing the `removed` event for every model removed.
+ remove : function(models, options) {
+ if (_.isArray(models)) {
+ for (var i = 0, l = models.length; i < l; i++) {
+ this._remove(models[i], options);
+ }
+ } else {
+ this._remove(models, options);
+ }
+ return this;
+ },
+
+ // Get a model from the set by id.
+ get : function(id) {
+ if (id == null) return null;
+ return this._byId[id.id != null ? id.id : id];
+ },
+
+ // Get a model from the set by client id.
+ getByCid : function(cid) {
+ return cid && this._byCid[cid.cid || cid];
+ },
+
+ // Get the model at the given index.
+ at: function(index) {
+ return this.models[index];
+ },
+
+ // Force the collection to re-sort itself. You don't need to call this under normal
+ // circumstances, as the set will maintain sort order as each item is added.
+ sort : function(options) {
+ options || (options = {});
+ if (!this.comparator) throw new Error('Cannot sort a set without a comparator');
+ this.models = this.sortBy(this.comparator);
+ if (!options.silent) this.trigger('refresh', this);
+ return this;
+ },
+
+ // Pluck an attribute from each model in the collection.
+ pluck : function(attr) {
+ return _.map(this.models, function(model){ return model.get(attr); });
+ },
+
+ // When you have more items than you want to add or remove individually,
+ // you can refresh the entire set with a new list of models, without firing
+ // any `added` or `removed` events. Fires `refresh` when finished.
+ refresh : function(models, options) {
+ models || (models = []);
+ options || (options = {});
+ this._reset();
+ this.add(models, {silent: true});
+ if (!options.silent) this.trigger('refresh', this);
+ return this;
+ },
+
+ // Fetch the default set of models for this collection, refreshing the
+ // collection when they arrive.
+ fetch : function(options) {
+ options || (options = {});
+ var collection = this;
+ var success = function(resp) {
+ collection.refresh(collection.parse(resp));
+ if (options.success) options.success(collection, resp);
+ };
+ var error = options.error && _.bind(options.error, null, collection);
+ (this.sync || Backbone.sync)('read', this, success, error);
+ return this;
+ },
+
+ // Create a new instance of a model in this collection. After the model
+ // has been created on the server, it will be added to the collection.
+ create : function(model, options) {
+ var coll = this;
+ options || (options = {});
+ if (!(model instanceof Backbone.Model)) {
+ model = new this.model(model, {collection: coll});
+ } else {
+ model.collection = coll;
+ }
+ var success = function(nextModel, resp) {
+ coll.add(nextModel);
+ if (options.success) options.success(nextModel, resp);
+ };
+ return model.save(null, {success : success, error : options.error});
+ },
+
+ // **parse** converts a response into a list of models to be added to the
+ // collection. The default implementation is just to pass it through.
+ parse : function(resp) {
+ return resp;
+ },
+
+ // Proxy to _'s chain. Can't be proxied the same way the rest of the
+ // underscore methods are proxied because it relies on the underscore
+ // constructor.
+ chain: function () {
+ return _(this.models).chain();
+ },
+
+ // Reset all internal state. Called when the collection is refreshed.
+ _reset : function(options) {
+ this.length = 0;
+ this.models = [];
+ this._byId = {};
+ this._byCid = {};
+ },
+
+ // Internal implementation of adding a single model to the set, updating
+ // hash indexes for `id` and `cid` lookups.
+ _add : function(model, options) {
+ options || (options = {});
+ if (!(model instanceof Backbone.Model)) {
+ model = new this.model(model, {collection: this});
+ }
+ var already = this.getByCid(model);
+ if (already) throw new Error(["Can't add the same model to a set twice", already.id]);
+ this._byId[model.id] = model;
+ this._byCid[model.cid] = model;
+ model.collection = this;
+ var index = this.comparator ? this.sortedIndex(model, this.comparator) : this.length;
+ this.models.splice(index, 0, model);
+ model.bind('all', this._boundOnModelEvent);
+ this.length++;
+ if (!options.silent) model.trigger('add', model, this);
+ return model;
+ },
+
+ // Internal implementation of removing a single model from the set, updating
+ // hash indexes for `id` and `cid` lookups.
+ _remove : function(model, options) {
+ options || (options = {});
+ model = this.getByCid(model) || this.get(model);
+ if (!model) return null;
+ delete this._byId[model.id];
+ delete this._byCid[model.cid];
+ delete model.collection;
+ this.models.splice(this.indexOf(model), 1);
+ this.length--;
+ if (!options.silent) model.trigger('remove', model, this);
+ model.unbind('all', this._boundOnModelEvent);
+ return model;
+ },
+
+ // Internal method called every time a model in the set fires an event.
+ // Sets need to update their indexes when models change ids. All other
+ // events simply proxy through.
+ _onModelEvent : function(ev, model) {
+ if (ev === 'change:id') {
+ delete this._byId[model.previous('id')];
+ this._byId[model.id] = model;
+ }
+ this.trigger.apply(this, arguments);
+ }
+
+ });
+
+ // Underscore methods that we want to implement on the Collection.
+ var methods = ['forEach', 'each', 'map', 'reduce', 'reduceRight', 'find', 'detect',
+ 'filter', 'select', 'reject', 'every', 'all', 'some', 'any', 'include',
+ 'invoke', 'max', 'min', 'sortBy', 'sortedIndex', 'toArray', 'size',
+ 'first', 'rest', 'last', 'without', 'indexOf', 'lastIndexOf', 'isEmpty'];
+
+ // Mix in each Underscore method as a proxy to `Collection#models`.
+ _.each(methods, function(method) {
+ Backbone.Collection.prototype[method] = function() {
+ return _[method].apply(_, [this.models].concat(_.toArray(arguments)));
+ };
+ });
+
+ // Backbone.Controller
+ // -------------------
+
+ // Controllers map faux-URLs to actions, and fire events when routes are
+ // matched. Creating a new one sets its `routes` hash, if not set statically.
+ Backbone.Controller = function(options) {
+ options || (options = {});
+ if (options.routes) this.routes = options.routes;
+ this._bindRoutes();
+ this.initialize(options);
+ };
+
+ // Cached regular expressions for matching named param parts and splatted
+ // parts of route strings.
+ var namedParam = /:([\w\d]+)/g;
+ var splatParam = /\*([\w\d]+)/g;
+
+ // Set up all inheritable **Backbone.Controller** properties and methods.
+ _.extend(Backbone.Controller.prototype, Backbone.Events, {
+
+ // Initialize is an empty function by default. Override it with your own
+ // initialization logic.
+ initialize : function(){},
+
+ // Manually bind a single named route to a callback. For example:
+ //
+ // this.route('search/:query/p:num', 'search', function(query, num) {
+ // ...
+ // });
+ //
+ route : function(route, name, callback) {
+ Backbone.history || (Backbone.history = new Backbone.History);
+ if (!_.isRegExp(route)) route = this._routeToRegExp(route);
+ Backbone.history.route(route, _.bind(function(fragment) {
+ var args = this._extractParameters(route, fragment);
+ callback.apply(this, args);
+ this.trigger.apply(this, ['route:' + name].concat(args));
+ }, this));
+ },
+
+ // Simple proxy to `Backbone.history` to save a fragment into the history,
+ // without triggering routes.
+ saveLocation : function(fragment) {
+ Backbone.history.saveLocation(fragment);
+ },
+
+ // Bind all defined routes to `Backbone.history`.
+ _bindRoutes : function() {
+ if (!this.routes) return;
+ for (var route in this.routes) {
+ var name = this.routes[route];
+ this.route(route, name, this[name]);
+ }
+ },
+
+ // Convert a route string into a regular expression, suitable for matching
+ // against the current location fragment.
+ _routeToRegExp : function(route) {
+ route = route.replace(namedParam, "([^\/]*)").replace(splatParam, "(.*?)");
+ return new RegExp('^' + route + '$');
+ },
+
+ // Given a route, and a URL fragment that it matches, return the array of
+ // extracted parameters.
+ _extractParameters : function(route, fragment) {
+ return route.exec(fragment).slice(1);
+ }
+
+ });
+
+ // Backbone.History
+ // ----------------
+
+ // Handles cross-browser history management, based on URL hashes. If the
+ // browser does not support `onhashchange`, falls back to polling.
+ Backbone.History = function() {
+ this.handlers = [];
+ this.fragment = this.getFragment();
+ _.bindAll(this, 'checkUrl');
+ };
+
+ // Cached regex for cleaning hashes.
+ var hashStrip = /^#*/;
+
+ // Set up all inheritable **Backbone.History** properties and methods.
+ _.extend(Backbone.History.prototype, {
+
+ // The default interval to poll for hash changes, if necessary, is
+ // twenty times a second.
+ interval: 50,
+
+ // Get the cross-browser normalized URL fragment.
+ getFragment : function(loc) {
+ var frag = (loc || window.location).hash.replace(hashStrip, '');
+ return frag;
+ },
+
+ // Start the hash change handling, returning `true` if the current URL matches
+ // an existing route, and `false` otherwise.
+ start : function() {
+ var docMode = document.documentMode;
+ var oldIE = ($.browser.msie && (!docMode || docMode <= 7));
+ if (oldIE) {
+ this.iframe = $('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
+ }
+ if ('onhashchange' in window && !oldIE) {
+ $(window).bind('hashchange', this.checkUrl);
+ } else {
+ setInterval(this.checkUrl, this.interval);
+ }
+ return this.loadUrl();
+ },
+
+ // Add a route to be tested when the hash changes. Routes are matched in the
+ // order they are added.
+ route : function(route, callback) {
+ this.handlers.push({route : route, callback : callback});
+ },
+
+ // Checks the current URL to see if it has changed, and if it has,
+ // calls `loadUrl`, normalizing across the hidden iframe.
+ checkUrl : function() {
+ var current = this.getFragment();
+ if (current == this.fragment && this.iframe) {
+ current = this.getFragment(this.iframe.location);
+ }
+ if (current == this.fragment ||
+ current == decodeURIComponent(this.fragment)) return false;
+ if (this.iframe) {
+ window.location.hash = this.iframe.location.hash = current;
+ }
+ this.loadUrl();
+ },
+
+ // Attempt to load the current URL fragment. If a route succeeds with a
+ // match, returns `true`. If no defined routes matches the fragment,
+ // returns `false`.
+ loadUrl : function() {
+ var fragment = this.fragment = this.getFragment();
+ var matched = _.any(this.handlers, function(handler) {
+ if (handler.route.test(fragment)) {
+ handler.callback(fragment);
+ return true;
+ }
+ });
+ return matched;
+ },
+
+ // Save a fragment into the hash history. You are responsible for properly
+ // URL-encoding the fragment in advance. This does not trigger
+ // a `hashchange` event.
+ saveLocation : function(fragment) {
+ fragment = (fragment || '').replace(hashStrip, '');
+ if (this.fragment == fragment) return;
+ window.location.hash = this.fragment = fragment;
+ if (this.iframe && (fragment != this.getFragment(this.iframe.location))) {
+ this.iframe.document.open().close();
+ this.iframe.location.hash = fragment;
+ }
+ }
+
+ });
+
+ // Backbone.View
+ // -------------
+
+ // Creating a Backbone.View creates its initial element outside of the DOM,
+ // if an existing element is not provided...
+ Backbone.View = function(options) {
+ this._configure(options || {});
+ this._ensureElement();
+ this.delegateEvents();
+ this.initialize(options);
+ };
+
+ // jQuery lookup, scoped to DOM elements within the current view.
+ // This should be prefered to global jQuery lookups, if you're dealing with
+ // a specific view.
+ var jQueryDelegate = function(selector) {
+ return $(selector, this.el);
+ };
+
+ // Cached regex to split keys for `delegate`.
+ var eventSplitter = /^(\w+)\s*(.*)$/;
+
+ // Set up all inheritable **Backbone.View** properties and methods.
+ _.extend(Backbone.View.prototype, Backbone.Events, {
+
+ // The default `tagName` of a View's element is `"div"`.
+ tagName : 'div',
+
+ // Attach the jQuery function as the `$` and `jQuery` properties.
+ $ : jQueryDelegate,
+ jQuery : jQueryDelegate,
+
+ // Initialize is an empty function by default. Override it with your own
+ // initialization logic.
+ initialize : function(){},
+
+ // **render** is the core function that your view should override, in order
+ // to populate its element (`this.el`), with the appropriate HTML. The
+ // convention is for **render** to always return `this`.
+ render : function() {
+ return this;
+ },
+
+ // Remove this view from the DOM. Note that the view isn't present in the
+ // DOM by default, so calling this method may be a no-op.
+ remove : function() {
+ $(this.el).remove();
+ return this;
+ },
+
+ // For small amounts of DOM Elements, where a full-blown template isn't
+ // needed, use **make** to manufacture elements, one at a time.
+ //
+ // var el = this.make('li', {'class': 'row'}, this.model.get('title'));
+ //
+ make : function(tagName, attributes, content) {
+ var el = document.createElement(tagName);
+ if (attributes) $(el).attr(attributes);
+ if (content) $(el).html(content);
+ return el;
+ },
+
+ // Set callbacks, where `this.callbacks` is a hash of
+ //
+ // *{"event selector": "callback"}*
+ //
+ // {
+ // 'mousedown .title': 'edit',
+ // 'click .button': 'save'
+ // }
+ //
+ // pairs. Callbacks will be bound to the view, with `this` set properly.
+ // Uses jQuery event delegation for efficiency.
+ // Omitting the selector binds the event to `this.el`.
+ // This only works for delegate-able events: not `focus`, `blur`, and
+ // not `change`, `submit`, and `reset` in Internet Explorer.
+ delegateEvents : function(events) {
+ if (!(events || (events = this.events))) return;
+ $(this.el).unbind();
+ for (var key in events) {
+ var methodName = events[key];
+ var match = key.match(eventSplitter);
+ var eventName = match[1], selector = match[2];
+ var method = _.bind(this[methodName], this);
+ if (selector === '') {
+ $(this.el).bind(eventName, method);
+ } else {
+ $(this.el).delegate(selector, eventName, method);
+ }
+ }
+ },
+
+ // Performs the initial configuration of a View with a set of options.
+ // Keys with special meaning *(model, collection, id, className)*, are
+ // attached directly to the view.
+ _configure : function(options) {
+ if (this.options) options = _.extend({}, this.options, options);
+ if (options.model) this.model = options.model;
+ if (options.collection) this.collection = options.collection;
+ if (options.el) this.el = options.el;
+ if (options.id) this.id = options.id;
+ if (options.className) this.className = options.className;
+ if (options.tagName) this.tagName = options.tagName;
+ this.options = options;
+ },
+
+ // Ensure that the View has a DOM element to render into.
+ _ensureElement : function() {
+ if (this.el) return;
+ var attrs = {};
+ if (this.id) attrs.id = this.id;
+ if (this.className) attrs.className = this.className;
+ this.el = this.make(this.tagName, attrs);
+ }
+
+ });
+
+ // The self-propagating extend function that Backbone classes use.
+ var extend = function (protoProps, classProps) {
+ var child = inherits(this, protoProps, classProps);
+ child.extend = extend;
+ return child;
+ };
+
+ // Set up inheritance for the model, collection, and view.
+ Backbone.Model.extend = Backbone.Collection.extend =
+ Backbone.Controller.extend = Backbone.View.extend = extend;
+
+ // Map from CRUD to HTTP for our default `Backbone.sync` implementation.
+ var methodMap = {
+ 'create': 'POST',
+ 'update': 'PUT',
+ 'delete': 'DELETE',
+ 'read' : 'GET'
+ };
+
+ // Backbone.sync
+ // -------------
+
+ // Override this function to change the manner in which Backbone persists
+ // models to the server. You will be passed the type of request, and the
+ // model in question. By default, uses jQuery to make a RESTful Ajax request
+ // to the model's `url()`. Some possible customizations could be:
+ //
+ // * Use `setTimeout` to batch rapid-fire updates into a single request.
+ // * Send up the models as XML instead of JSON.
+ // * Persist models via WebSockets instead of Ajax.
+ //
+ // Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests
+ // as `POST`, with a `_method` parameter containing the true HTTP method,
+ // as well as all requests with the body as `application/x-www-form-urlencoded` instead of
+ // `application/json` with the model in a param named `model`.
+ // Useful when interfacing with server-side languages like **PHP** that make
+ // it difficult to read the body of `PUT` requests.
+ Backbone.sync = function(method, model, success, error) {
+ var type = methodMap[method];
+ var modelJSON = (method === 'create' || method === 'update') ?
+ JSON.stringify(model.toJSON()) : null;
+
+ // Default JSON-request options.
+ var params = {
+ url: getUrl(model),
+ type: type,
+ contentType: 'application/json',
+ data: modelJSON,
+ dataType: 'json',
+ processData: false,
+ success: success,
+ error: error
+ };
+
+ // For older servers, emulate JSON by encoding the request into an HTML-form.
+ if (Backbone.emulateJSON) {
+ params.contentType = 'application/x-www-form-urlencoded';
+ params.processData = true;
+ params.data = modelJSON ? {model : modelJSON} : {};
+ }
+
+ // For older servers, emulate HTTP by mimicking the HTTP method with `_method`
+ // And an `X-HTTP-Method-Override` header.
+ if (Backbone.emulateHTTP) {
+ if (type === 'PUT' || type === 'DELETE') {
+ if (Backbone.emulateJSON) params.data._method = type;
+ params.type = 'POST';
+ params.beforeSend = function(xhr) {
+ xhr.setRequestHeader("X-HTTP-Method-Override", type);
+ };
+ }
+ }
+
+ // Make the request.
+ $.ajax(params);
+ };
+
+ // Helpers
+ // -------
+
+ // Shared empty constructor function to aid in prototype-chain creation.
+ var ctor = function(){};
+
+ // Helper function to correctly set up the prototype chain, for subclasses.
+ // Similar to `goog.inherits`, but uses a hash of prototype properties and
+ // class properties to be extended.
+ var inherits = function(parent, protoProps, staticProps) {
+ var child;
+
+ // The constructor function for the new subclass is either defined by you
+ // (the "constructor" property in your `extend` definition), or defaulted
+ // by us to simply call `super()`.
+ if (protoProps && protoProps.hasOwnProperty('constructor')) {
+ child = protoProps.constructor;
+ } else {
+ child = function(){ return parent.apply(this, arguments); };
+ }
+
+ // Set the prototype chain to inherit from `parent`, without calling
+ // `parent`'s constructor function.
+ ctor.prototype = parent.prototype;
+ child.prototype = new ctor();
+
+ // Add prototype properties (instance properties) to the subclass,
+ // if supplied.
+ if (protoProps) _.extend(child.prototype, protoProps);
+
+ // Add static properties to the constructor function, if supplied.
+ if (staticProps) _.extend(child, staticProps);
+
+ // Correctly set child's `prototype.constructor`, for `instanceof`.
+ child.prototype.constructor = child;
+
+ // Set a convenience property in case the parent's prototype is needed later.
+ child.__super__ = parent.prototype;
+
+ return child;
+ };
+
+ // Helper function to get a URL from a Model or Collection as a property
+ // or as a function.
+ var getUrl = function(object) {
+ if (!(object && object.url)) throw new Error("A 'url' property or function must be specified");
+ return _.isFunction(object.url) ? object.url() : object.url;
+ };
+
+})();
View
473 backbonestore.nw
@@ -0,0 +1,473 @@
+\documentclass{article}
+\usepackage{noweb}
+\usepackage{hyperref}
+\begin{document}
+
+% Generate code and documentation with:
+%
+% noweave -filter l2h -delay -x -html backbonestore.nw | htmltoc > backbonestore.html
+% notangle -Rstore.js backbonestore.nw > store.js
+% notangle -Rindex.html backbonestore.nw > index.html
+
+I've been learning how to use \nwanchorto{http://documentcloud.github.com/backbone/}{Backbone.js}, a nifty little library for
+organizing your client-side Javascript into a classic
+Model-View-Controller paradigm while trying (and to some extent,
+succeeding) in trying to burden you, the user, with as little
+additional learning as possible. I consider this a good thing; the
+overhead of learning a library and its accompaning DSL represent
+additional cognitive loads that developers can better use elsewhere.
+Keeping as much as possible within familiar paradigms is not just
+useful, it's necessary as our programs get bigger.
+
+The tutorial for Backbone is woefully lacking in specifics, and the
+example program, Todo, doesn't really have much chops in teaching you
+the ins and outs of Backbone, especially not its new Controller and
+History modules. But in the announcement for Backbone.Controller,
+Jeremy Ashkenas hid a clue: There's another library, Sammy.js, that
+does something similar, and they do have a tutorial called \nwanchorto{http://code.quirkey.com/sammy/tutorials/json_store_part1.html}{The JsonStore}.
+
+In the spirit of The JSON Store, I present The Backbone Store, and
+online store written entirely in JSON and operating entirely within a
+single page.
+
+Let's start by showing you the HTML that we're going to be exploiting:
+
+<<index.html>>=
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+ <title>The Backbone Store</title>
+ <link rel="stylesheet" href="jsonstore.css" type="text/css" media="screen" charset="utf-8" />
+
+ <<index template>>
+
+ <<product template>>
+
+ </head>
+ <body>
+ <div id="container">
+ <div id="header">
+ <h1>
+ The Backbone Store
+ </h1>
+
+ <div class="cart-info">
+ My Cart (<span class="cart-items">0</span> items)
+ </div>
+ </div>
+
+ <div id="main">
+ </div>
+ </div>
+ <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
+ <script src="jquery.tmpl.min.js" type="text/javascript"></script>
+ <script src="underscore.js" type="text/javascript"></script>
+ <script src="backbone.js" type="text/javascript"></script>
+ <script src="store.js" type="text/javascript"></script>
+ </body>
+</html>
+@
+
+This is taken, more or less, straight from The JSON Store. I've
+included one extra thing, aside from jQuery and Backbone, and that's
+the \nwanchorto{https://github.com/jquery/jquery-tmpl}{jQuery Templates kit}. We'll discuss those in a minute. There's a
+simplified JSON file that comes in the download; it contains six
+record albums that the store sells. (Unlike the JSON store, these
+albums don't exist; the covers were generated during a round of \nwanchorto{http://elfs.livejournal.com/756709.html}{The Album Cover
+Game}.)
+
+There are two views, the index and the item. So, using
+[[Backbone.Controller]], we're going to route the following:
+
+<<routes>>=
+ routes: {
+ "": "index",
+ "item/:id": "item",
+ },
+@
+
+Unlike Sammy, Backbone mostly only routes GET commands. Routes are to
+routes to views; everything else happens more or less under the
+covers.
+
+As Backbone is running, the [[Backbone.History]] module is listening to
+the hash object, waiting for it to change so that it can trigger a
+``route'' event, in which case the function named as the value in the
+route is called.
+
+There are a few things I want to track: the index view, the individual
+product views, and the shopping cart.
+
+<<application variables>>=
+ _index: null,
+ _products: null,
+ _cart :null,
+@
+
+Using backbone, I have a list of products. So, I should declare
+those. The basic product is just a model, with nothing to show for
+it; the list of products is a [[Backbone.Collection]], with one feature,
+the [[comparator]], which sorts the albums in order by album title.
+
+<<product models>>=
+var Product = Backbone.Model.extend({});
+
+var ProductCollection = Backbone.Collection.extend({
+ model: Product,
+ comparator: function(item) {
+ return item.get('title');
+ }
+});
+@
+
+That's not very exciting. Let's show this list, with a View. Let's
+call it IndexView:
+
+<<index view>>=
+var IndexView = Backbone.View.extend({
+ el: $('#main'),
+ indexTemplate: $("#indexTmpl").template(),
+
+ render: function() {
+ var sg = this;
+ this.el.fadeOut('fast', function() {
+ sg.el.empty();
+ $.tmpl(sg.indexTemplate, sg.model.toArray()).appendTo(sg.el);
+ sg.el.fadeIn('fast');
+ });
+ return this;
+ }
+
+});
+@
+
+This code defines a [[Backbone.View]] object, in which the parent element
+is \#main, the render function fades out the existing elements in that
+position and replaces them with the contents of a rendered jQuery
+template, and then fades the element back in.
+
+The index template looks like this:
+
+<<index template>>=
+ <script id="indexTmpl" type="text/x-jquery-tmpl">
+ <div class="item">
+ <div class="item-image">
+ <a href="#item/${cid}"><img src="${attributes.image}" alt="${attributes.title}" /></a>
+ </div>
+ <div class="item-artist">${attributes.artist}</div>
+ <div class="item-title">${attributes.title}</div>
+ <div class="item-price">$${attributes.price}</div>
+ </div>
+ </script>
+@
+
+There's some
+ \nwanchorto{http://en.wikipedia.org/wiki/Law_of_Demeter}{Demeter violations}
+going on here, in that I have to know about the [[attributes]] of a
+Backbone model, something that's normally hidden within the class.
+But this is good enough for our purposes. The above is a jQuery
+template, and the [[\$\{\}]] syntax is what's used to dereference
+variables within a template.
+
+(As an aside, I think that the [[set]] and [[get]] methods of
+[[Backbone.Model]] are a poor access mechanism. I understand why they're
+there, and I can only hope that someday
+ \nwanchorto{http://ejohn.org/blog/javascript-getters-and-setters/}{Javascript
+ Getter and Setters} become so well-established as to make [[set]]
+and [[get]] irrelevant.)
+
+Now, we can render the index view:
+
+<<index render call>>=
+ index: function() {
+ this._index.render();
+ },
+@
+
+At this point, well, we need an application. A controller. And we
+need to initialize it, and call it. Here's what it looks like (some
+of this, you've already seen):
+
+<<workspace>>=
+var Workspace = Backbone.Controller.extend({
+<<application variables>>
+
+<<routes>>
+
+<<initialization>>
+
+<<index render call>>
+
+<<product render call>>
+});
+
+workspace = new Workspace();
+Backbone.history.start();
+@
+
+There are two things left in our workspace, that we haven't defined.
+The intialization, and the product render.
+
+Initialization consists of getting our product list, creating a
+shopping cart to hold ``desired'' products (and in quantity!), and
+creating the index view. (Product views, we'll discuss in a moment).
+
+<<initialization>>=
+ initialize: function() {
+ var ws = this;
+ if (this._index === null) {
+ $.ajax({
+ url: 'data/items.json',
+ dataType: 'json',
+ data: {},
+ success: function(data) {
+ ws._cart = new Cart();
+ new CartView({model: ws._cart});
+ ws._products = new ProductCollection(data);
+ ws._index = new IndexView({model: ws._products});
+ Backbone.history.loadUrl();
+ }
+ });
+ return this;
+ }
+ return this;
+ },
+@
+
+We haven't defined the Cart yet, but that's all right. We'll get to
+it.) But here you see a lot of what's already existent being used: we
+get a ProductCollection, and an IndexView.
+
+That last line is curious. It's an instruction to Backbone to look at
+the URL; if the user navigated to something other than the home page,
+it's to use the routes defined to go there. Users can now bookmark
+places in your site other than the home page. Yes, the bookmark will
+be funny and have at least one
+ \nwanchorto{http://en.wiktionary.org/wiki/octothorpe}{octothorpe} in it, but
+it will work.
+
+Let's deal with the shopping cart:
+
+<<shopping cart models>>=
+var CartItem = Backbone.Model.extend({
+ update: function(amount) {
+ this.set({'quantity': this.get('quantity') + amount});
+ }
+});
+
+
+var Cart = Backbone.Collection.extend({
+ model: CartItem,
+ getByPid: function(pid) {
+ return this.detect(function(obj) { return (obj.get('product').cid == pid); });
+ },
+});
+@
+
+A little rocket science here: A [[Cart]] contains [[CartItems]]. Each
+``item'' represents a quantity of a [[Product]]. (I know, that always
+struck me as odd, but that's how most online stores do it.)
+[[CartItem]] has an update method that allows you to add more (but not
+remove any-- hey, the Sammy store wasn't any smarter, and this is For
+Demonstration Purposes Only), and we use the [[set]] method to make
+sure that a ``change'' event is triggered.
+
+The [[Cart]], in turn, has a method, getByPid (``Product ID''), which
+is meant to assist other objects in finding the [[CartItem]]
+associated with a specific product. Here, I'm just using the Backbone
+default client id.
+
+The cart is represented by a little tag in the upper right-hand corner
+of the view; it never goes away, and its count is always the total
+number of [[Products]] (not [[CartItem]]s) ordered. So the
+[[CartView]] needs to update whenever a [[CartItem]] is added or
+updated. And we want a nifty little animation to go with it:
+
+<<shopping cart view>>=
+var CartView = Backbone.View.extend({
+ el: $('.cart-info'),
+
+ initialize: function() {
+ this.model.bind('change', _.bind(this.render, this));
+ },
+
+ render: function() {
+ var sum = this.model.reduce(function(m, n) { return m + n.get('quantity'); }, 0);
+ this.el
+ .find('.cart-items').text(sum).end()
+ .animate({paddingTop: '30px'})
+ .animate({paddingTop: '10px'});
+ }
+});
+@
+
+A couple of things here: the render is rebound to [[this]] to make
+sure it renders in the context of the view. I found that that was not
+always happening. Note the use of [[reduce]], a nifty method from
+[[underscore.js]] that allows you to build a result out an array using
+an anonymous function. This reduce, obviously, sums up the total
+quantity of items in the cart. Also, jQuery enthusiasts could learn
+(I certainly did!) from the [[.find()]] and [[.end()]] methods, which
+push a child object onto the stack to be animated, and then pop it off
+after the operation has been applied.
+
+The biggest thing left is the [[ProductView]]. It's skeleton looks
+like this:
+
+<<product view>>=
+var ProductView = Backbone.View.extend({
+ el: $('#main'),
+ itemTemplate: $("#itemTmpl").template(),
+
+<<product events>>
+
+ initialize: function(options) {
+ this.cart = options.cart;
+ },
+
+<<update product>>
+
+<<render product>>
+});
+
+@
+
+First, we find the element we're going to work with, and the template.
+I expect the ProductView to be where we'll add items to the cart, so
+the initializer here expects to have a handle on the cart.
+
+And the template:
+
+<<product template>>=
+ <script id="itemTmpl" type="text/x-jquery-tmpl">
+ <div class="item-detail">
+ <div class="item-image"><img src="${attributes.large_image}" alt="${attributes.title}" /></div>
+ <div class="item-info">
+ <div class="item-artist">${attributes.artist}</div>
+ <div class="item-title">${attributes.title}</div>
+ <div class="item-price">$${attributes.price}</div>
+ <div class="item-form">
+ <form action="#/cart" method="post">
+ <input type="hidden" name="item_id" value="${cid}" />
+ <p>
+ <label>Quantity:</label>
+ <input type="text" size="2" name="quantity" value="1" class="uqf" />
+ </p>
+ <p><input type="submit" value="Add to Cart" class="uq" /></p>
+ </form>
+ </div>
+ <div class="item-link"><a href="${attributes.url}">Buy this item on Amazon</a></div>
+ <div class="back-link"><a href="#">&laquo; Back to Items</a></div>
+ </div>
+ </div>
+ </script>
+@
+
+One extra item: note the octothorpe used as the target link for
+``Home''. I kept thinking an empty link or just ``/'' would be
+appropriate, but no, it's an octothorpe.
+
+Rendering the product is not difficult:
+
+<<render product>>=
+ render: function() {
+ var sg = this;
+ this.el.fadeOut('fast', function() {
+ sg.el.empty();
+ $.tmpl(sg.itemTemplate, sg.model).appendTo(sg.el);
+ sg.el.fadeIn('fast');
+ });
+ return this;
+ }
+@
+
+That looks familiar.
+
+Updating the product, however, is a whole 'nother story. Note that
+each product has a form associated with it. We need to intercept any
+form update events and manipulate our shopping cart. We have two
+objects that can do that: the input field, and the submit button. I
+need to intercept those events:
+
+<<product events>>=
+ events: {
+ "keypress .uqf" : "updateOnEnter",
+ "click .uq" : "update",
+ },
+@
+
+Backbone uses a curious definition of an event with an ``event
+selector'', followed by a target method of the View class. Backbone
+is also limited about what events can be used here, as the following
+events cannot be wrapped by jQuery's delegate method and do not work:
+``focus'', ``blur'', ``change'', ``submit'', and ``reset''.
+
+The update then becomes straightforward. We're in a view for a
+specific product; we must see if the customer has a [[CartItem]] for
+that product in the [[Cart]], and add or update it as needed. Like
+so:
+
+<<update product>>=
+ update: function(e) {
+ e.preventDefault();
+ var cart_item = this.cart.getByPid(this.model.cid);
+ if (_.isUndefined(cart_item)) {
+ cart_item = new CartItem({product: this.model, quantity: 0});
+ this.cart.add(cart_item, {silent: true});
+ }
+ cart_item.update(parseInt($('.uqf').val()));
+ },
+
+ updateOnEnter: function(e) {
+ if (e.keyCode == 13) {
+ return this.update(e);
+ }
+ },
+@
+
+We [[preventDefault]] to keep the traditional meaning of the submit
+button from triggering. When the [[CartItem]] is updated, it triggers
+a ``change'' event, and the [[CartView]] will update itself
+automatically. I added the ``silent'' option to keep the ``change''
+event from triggering twice when adding a new [[CartItem]] to the
+[[Cart]].
+
+And now I'm down to one last thing. I haven't defined that product
+render call in the application controller. The one thing I don't want
+to do is have [[ProductViews]] for every product, if I don't need
+them. So I want to build them as-needed, but keep them, and associate
+them with the local [[Product]], so they can be recalled whenever we
+want. The underscore function [[isUndefined]] is excellent for this.
+
+<<product render call>>=
+ item: function(id) {
+ if (_.isUndefined(this._products.getByCid(id)._view)) {
+ this._products.getByCid(id)._view = new ProductView({model: this._products.getByCid(id),
+ cart: this._cart});
+ }
+ this._products.getByCid(id)._view.render();
+ }
+@
+
+And now my store looks like
+
+<<store.js>>=
+<<product models>>
+
+<<shopping cart models>>
+
+<<shopping cart view>>
+
+<<product view>>
+
+<<index view>>
+
+<<workspace>>
+@
+
+As always, this code is available at github.
+
+\end{document}
View
78 data/album1.json
@@ -0,0 +1,78 @@
+[
+
+ {
+ "title": "Pop Music",
+ "artist": "Bruno Mars and Others",
+ "image": "images/1.jpg",
+ "large_image": "images/1.jpg",
+ "price": 13.98,
+ "url": "http://www.amazon.com/Bitte-Orca-Dirty-Projectors/dp/B0026T4RTI/ref=pd_sim_m_12?tag=quirkey-20",
+ "subalbum": [
+ {
+ "title": "19",
+ "artist": "Adele",
+ "image": "images/4.jpg",
+ "large_image": "images/4large.jpg",
+ "price": 13.99,
+ "pid": 0,
+ "url": "http://www.amazon.co.uk/19-Adele/dp/B000XGDO04"
+ },
+ {
+ "title": "Doo Wops and Hooligans",
+ "artist": "Bruno Mars",
+ "image": "images/5.jpg",
+ "large_image": "images/5large.jpg",
+ "price": 13.99,
+ "pid": 1,
+ "url": "http://www.amazon.com/Doo-Wops-Hooligans-Bruno-Mars/dp/B003ZJ0ZX0"
+ }
+ ]
+ },
+ {
+ "title": "Pop Music 2",
+ "artist": "Bruno Mars and Others",
+ "image": "images/54.jpg",
+ "large_image": "images/54.jpg",
+ "price": 13.98,
+ "url": "http://www.amazon.com/Bitte-Orca-Dirty-Projectors/dp/B0026T4RTI/ref=pd_sim_m_12?tag=quirkey-20",
+ "subalbum": [
+ {
+ "title": "19",
+ "artist": "Adele 2",
+ "image": "images/4.jpg",
+ "large_image": "images/4large.jpg",
+ "price": 13.99,
+ "pid": 0,
+ "url": "http://www.amazon.co.uk/19-Adele/dp/B000XGDO04"
+ },
+ {
+ "title": "Doo Wops and Hooligans 2",
+ "artist": "Bruno Mars 2",
+ "image": "images/5.jpg",
+ "large_image": "images/5large.jpg",
+ "price": 13.99,
+ "pid": 1,
+ "url": "http://www.amazon.com/Doo-Wops-Hooligans-Bruno-Mars/dp/B003ZJ0ZX0"
+ }
+ ]
+ },
+ {
+ "title": "Keenly Developed Moral Bankruptcy",
+ "artist": "Stealth Monkey Virus",
+ "image": "images/testfolder.jpg",
+ "large_image": "images/testfolder.jpg",
+ "price": 13.99,
+ "url": "http://www.amazon.com/",
+ "subalbum": [ {}
+
+ ]
+ },
+ {
+ "title": "My Mistress's Sparrow is Dead",
+ "artist": "Sums of Mongolia",
+ "image": "images/testfolder.jpg",
+ "large_image": "images/testfolder.jpg",
+ "price": 13.99,
+ "url": "http://www.amazon.com/"
+ }
+]
View
373 gallery.js
@@ -0,0 +1,373 @@
+var Photo = Backbone.Model.extend({});
+
+var PhotoCollection = Backbone.Collection.extend({
+ model: Photo,
+ comparator: function(item) {
+ return item.get('title');
+ }
+});
+
+var AlbumItem = Backbone.Model.extend({
+
+ initialize: function(){
+
+ this.set({
+ subid : 'sub_' + this.cid
+ })
+ },
+
+ update: function(amount) {
+ //this.set({'quantity': this.get('quantity') + amount});
+ }
+});
+
+//new
+var SubalbumItem = Backbone.Model.extend({
+ update: function(amount) {
+ //this.set({'quantity': this.get('quantity') + amount});
+ }
+});
+
+
+var Album = Backbone.Collection.extend({
+ model: AlbumItem,
+ getByPid: function(pid) {
+ return this.detect(function(obj) { return (obj.get('photo').cid == pid); });
+ },
+});
+
+
+//this can be removed...
+var SubalbumView = Backbone.View.extend({
+ el: $('.album-info'),
+
+ initialize: function() {
+ this.model.bind('change', _.bind(this.render, this));
+
+
+ },
+
+ render: function() {
+
+
+ /*
+ var sum = this.model.reduce(function(m, n) { return m + n.get('quantity'); }, 0);
+ this.el
+ .find('.album-items').text(sum).end()
+ .animate({paddingTop: '30px'})
+ .animate({paddingTop: '10px'});
+ */
+ }
+});
+
+//this can be removed...
+var AlbumView = Backbone.View.extend({
+ el: $('.album-info'),
+
+ initialize: function() {
+ this.model.bind('change', _.bind(this.render, this));
+ },
+
+ render: function() {
+
+
+ /*
+ var sum = this.model.reduce(function(m, n) { return m + n.get('quantity'); }, 0);
+ this.el
+ .find('.album-items').text(sum).end()
+ .animate({paddingTop: '30px'})
+ .animate({paddingTop: '10px'});
+ */
+ }
+});
+
+
+var PhotoView = Backbone.View.extend({
+ el: $('#main'),
+ itemTemplate: $("#itemTmpl").template(),
+
+
+ events: {
+ "keypress .uqf" : "updateOnEnter",
+ "click .uq" : "update",
+ },
+
+ initialize: function(options) {
+ this.album = options.album;
+ },
+
+ update: function(e) {
+ e.preventDefault();
+ var album_item = this.album.getByPid(this.model.cid);
+ if (_.isUndefined(album_item)) {
+ album_item = new AlbumItem({photo: this.model, quantity: 0});
+ this.album.add(album_item, {silent: true});
+ }
+ album_item.update(parseInt($('.uqf').val()));
+ },
+
+ updateOnEnter: function(e) {
+ if (e.keyCode == 13) {
+ return this.update(e);
+ }
+ },
+
+ render: function() {
+ var sg = this;
+ this.el.fadeOut('fast', function() {
+ sg.el.empty();
+ $.tmpl(sg.itemTemplate, sg.model).appendTo(sg.el);
+ sg.el.fadeIn('fast');
+ });
+ return this;
+ }
+});
+
+
+var IndexView = Backbone.View.extend({
+ el: $('#main'),
+ indexTemplate: $("#indexTmpl").template(),
+
+ render: function() {
+ var sg = this;
+ this.el.fadeOut('fast', function() {
+ sg.el.empty();
+ $.tmpl(sg.indexTemplate, sg.model.toArray()).appendTo(sg.el);
+ sg.el.fadeIn('fast');
+ });
+ return this;
+ }
+
+});
+
+var SubalbumView = Backbone.View.extend({
+ el: $('#main'),
+ indexTemplate: $("#subindexTmpl").template(),
+
+ render: function() {
+ var sg = this;
+ this.el.fadeOut('fast', function() {
+ sg.el.empty();
+ $.tmpl(sg.indexTemplate, sg.model.toArray()).appendTo(sg.el);
+ sg.el.fadeIn('fast');
+ });
+ return this;
+ }
+
+});
+
+
+
+//this is a fake version of photoview which we're trying to hack
+//to view subalbums instead. .subalbum needs to be the updated
+//data source.
+var SubindexView = Backbone.View.extend({
+ el: $('#main'),
+ //itemTemplate: $("#itemTmpl").template(),
+ itemTemplate: $("#subindexTmpl").template(),
+
+
+ events: {
+ "keypress .uqf" : "updateOnEnter",
+ "click .uq" : "update",
+ },
+
+ initialize: function(options) {
+ this.album = options.album;
+ },
+
+ update: function(e) {
+ e.preventDefault();
+ var album_item = this.album.getByPid(this.model.cid);
+
+ if (_.isUndefined(album_item)) {
+ album_item = new AlbumItem({photo: this.model, quantity: 0});
+ this.album.add(album_item, {silent: true});
+ }
+ //album_item.update(parseInt($('.uqf').val()));
+ },
+
+ updateOnEnter: function(e) {
+ if (e.keyCode == 13) {
+ return this.update(e);
+ }
+ },
+
+ render: function() {
+ var sg = this;
+ this.el.fadeOut('fast', function() {
+ sg.el.empty();
+ $.tmpl(sg.itemTemplate, sg.model).appendTo(sg.el);
+ sg.el.fadeIn('fast');
+ });
+ return this;
+ }
+});
+
+
+/*
+Backbone.Controller = function(options){
+ options || (options = {});
+ if(options.routes) this.routes = options.routes;
+ this._bindRoutes();
+ this.initialize(options);
+
+ alert(options);
+
+};
+*/
+
+
+var Workspace = Backbone.Controller.extend({
+ _index: null,
+ _photos: null,
+ _album :null,
+ _subalbums:null,
+ _subphotos:null,
+ _data:null,
+ _photosview:null,
+
+ routes: {
+ "": "index",
+ "subalbum/:id": "subindex",
+ "subalbum/:id/pho/:num": "photo"
+ },
+
+ initialize: function(options) {
+
+
+ var ws = this;
+ var ic = 0;
+ if (this._index === null) {
+ $.ajax({
+ url: 'data/album1.json',
+ dataType: 'json',
+ data: {},
+ success: function(data) {
+ ////
+ ws._data = data;
+ ///////
+ ws._album = new Album();
+ new AlbumView({model: ws._album});
+
+ ws._photos = new PhotoCollection(ws._data);
+
+
+ ws._index = new IndexView({model: ws._photos});
+
+ Backbone.history.loadUrl();
+ }
+ });
+ return this;
+ }
+ return this;
+ },
+
+ index: function() {
+ this._index.render();
+ },
+
+ subindex:function(id){
+
+
+ /*
+ a lot of improvements need to be made here wrt caching
+ of variables and collections across all functions.
+
+ */
+
+ var properindex = id.replace('c','');
+
+ //if(this._subphotos == undefined)
+ {
+ this._subphotos = new PhotoCollection(this._data[properindex].subalbum);
+ }
+
+ this._subalbums = new SubalbumView({model: this._subphotos});
+ this._subalbums.render();
+
+
+ },
+
+ photo: function(id, num){
+
+
+ //alert('show me subalbum ' + id +' and photo number ' + num + ' in there ');
+
+
+ var properindex = id.replace('c','');
+ var cid = id; //reads any first level thing fine..
+
+ this._subphotos.getByCid(cid)._view = new PhotoView({model: this._subphotos.getByCid(cid), album: this._album});
+ this._subphotos.getByCid(cid)._view.render();
+
+
+ /*
+ this._photos.getByCid(cid)._view = new PhotoView({model: this._photos.getByCid(cid), album: this._album});
+ this._photos.getByCid(cid)._view.render();
+ */
+
+
+
+ /*
+ prolly need to a) get the second ID ie ID of the subalbum, then need to
+ append to hash and load as per subindex rather than indiv off of the photos
+ tree.
+
+ so...subid and actual imageid...
+
+ NOT the auto id...
+
+
+ */
+
+
+
+
+ /*
+ var subalbumid = 0;
+ var imageid = 1;
+ var subphotos = new PhotoCollection(this._data[subalbumid].subalbum);
+ this._subalbums = new SubalbumView({model: subphotos});
+ this._subalbums.render();
+
+ */
+
+
+
+
+ /*
+
+ var properindex = id.replace('c','');
+ var cid = 'c1';
+ this._photos.getByCid(cid)._view = new PhotoView({model: this._photos.getByCid(cid), album: this._album});
+ this._photos.getByCid(cid)._view.render();
+ */
+
+ /*
+ var cid = 'c' + imageid;
+
+ subphotos.getByCid(cid)._view = new PhotoView({model: subphotos.getByCid(cid), album: this._album});
+ subphotos.getByCid(cid)._view.render();
+ */
+
+ /*
+ var properindex = id.replace('c','');
+ var cid = 'c1';
+ this._photos.getByCid(cid)._view = new PhotoView({model: this._photos.getByCid(cid), album: this._album});
+ this._photos.getByCid(cid)._view.render();
+ */
+
+/*
+ if (_.isUndefined(this._photos.getByCid(id)._view))
+ {
+ this._photos.getByCid(id)._view = new PhotoView({model: this._photos.getByCid(id), album: this._album});
+ }
+
+ this._photos.getByCid(id)._view.render();
+ */
+ }
+});
+
+workspace = new Workspace();
+Backbone.history.start();
View
BIN  images/1.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/2,.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/4.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/4large.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/5.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/54.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/5large.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/6.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/7.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/8.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/9.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/AdventuresInOdyssey.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/AdventuresInOdyssey_t.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/AmericanAttorneys.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/AmericanAttorneys_t.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/BritishCivilLightTransport.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/BritishCivilLightTransport_t.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/PeriodsofMentalAssimilation.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/PeriodsofMentalAssimilation_t.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/Pulaski.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/Pulaski_t.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/StealthMonkeyVirus.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/StealthMonkeyVirus_t.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/SumsofMagnolia.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/SumsofMagnolia_t.jpg
Diff not rendered
View
BIN  images/testfolder.jpg
Diff not rendered
View
69 index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+ <title>Addy's Backbone Image Gallery</title>
+ <link rel="stylesheet" href="jsongallery.css" type="text/css" media="screen" charset="utf-8" />
+
+ <script id="indexTmpl" type="text/x-jquery-tmpl">
+ <div class="item">
+ <div class="item-image">
+ <a href="#subalbum/${cid}"><img src="${attributes.image}" alt="${attributes.title}" /></a>
+ </div>
+ <div class="item-artist">${attributes.artist}</div>
+ <div class="item-title">${attributes.title}</div>
+ <div class="item-price">$${attributes.price}</div>
+ </div>
+ </script>
+
+
+ <script id="subindexTmpl" type="text/x-jquery-tmpl">
+ <div class="item">
+ <div class="item-image">
+ <a href="#subalbum/${cid}/pho/${attributes.pid}"><img src="${attributes.image}" alt="${attributes.title}" /></a>
+ </div>
+ <div class="item-artist">${attributes.artist}</div>
+ <div class="item-title">${attributes.title}</div>
+ <div class="item-price">$${attributes.price}</div>
+ </div>
+
+ </script>
+
+
+ <script id="itemTmpl" type="text/x-jquery-tmpl">
+ <div class="item-detail">
+ <div class="item-image"><img src="${attributes.large_image}" alt="${attributes.title}" /></div>
+ <div class="item-info">
+ <div class="item-artist">${attributes.artist}</div>
+ <div class="item-title">${attributes.title}</div>
+ <div class="item-price">$${attributes.price}</div>
+
+ <div class="item-link"><a href="${attributes.url}">Buy this item on Amazon</a></div>
+ <div class="back-link"><a href="#">&laquo; Back to Items</a></div>
+ </div>
+ </div>
+ </script>
+
+ </head>
+ <body>
+ <div id="container">
+ <div id="header">
+ <h1>
+ The 3-Level Backbone Gallery
+ </h1>
+
+
+ </div>
+
+ <div id="main">
+ </div>
+ </div>
+ <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
+ <script src="jquery.tmpl.min.js" type="text/javascript"></script>
+ <script src="underscore.js" type="text/javascript"></script>
+ <script src="backbone.js" type="text/javascript"></script>
+ <script src="gallery.js" type="text/javascript"></script>
+ </body>
+</html>
View
167 jquery-1.4.4.min.js
@@ -0,0 +1,167 @@
+/*!
+ * jQuery JavaScript Library v1.4.4
+ * http://jquery.com/
+ *
+ * Copyright 2010, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * Includes Sizzle.js
+ * http://sizzlejs.com/
+ * Copyright 2010, The Dojo Foundation
+ * Released under the MIT, BSD, and GPL Licenses.
+ *
+ * Date: Thu Nov 11 19:04:53 2010 -0500
+ */
+(function(E,B){function ka(a,b,d){if(d===B&&a.nodeType===1){d=a.getAttribute("data-"+b);if(typeof d==="string"){try{d=d==="true"?true:d==="false"?false:d==="null"?null:!c.isNaN(d)?parseFloat(d):Ja.test(d)?c.parseJSON(d):d}catch(e){}c.data(a,b,d)}else d=B}return d}function U(){return false}function ca(){return true}function la(a,b,d){d[0].type=a;return c.event.handle.apply(b,d)}function Ka(a){var b,d,e,f,h,l,k,o,x,r,A,C=[];f=[];h=c.data(this,this.nodeType?"events":"__events__");if(typeof h==="function")h=
+h.events;if(!(a.liveFired===this||!h||!h.live||a.button&&a.type==="click")){if(a.namespace)A=RegExp("(^|\\.)"+a.namespace.split(".").join("\\.(?:.*\\.)?")+"(\\.|$)");a.liveFired=this;var J=h.live.slice(0);for(k=0;k<J.length;k++){h=J[k];h.origType.replace(X,"")===a.type?f.push(h.selector):J.splice(k--,1)}f=c(a.target).closest(f,a.currentTarget);o=0;for(x=f.length;o<x;o++){r=f[o];for(k=0;k<J.length;k++){h=J[k];if(r.selector===h.selector&&(!A||A.test(h.namespace))){l=r.elem;e=null;if(h.preType==="mouseenter"||
+h.preType==="mouseleave"){a.type=h.preType;e=c(a.relatedTarget).closest(h.selector)[0]}if(!e||e!==l)C.push({elem:l,handleObj:h,level:r.level})}}}o=0;for(x=C.length;o<x;o++){f=C[o];if(d&&f.level>d)break;a.currentTarget=f.elem;a.data=f.handleObj.data;a.handleObj=f.handleObj;A=f.handleObj.origHandler.apply(f.elem,arguments);if(A===false||a.isPropagationStopped()){d=f.level;if(A===false)b=false;if(a.isImmediatePropagationStopped())break}}return b}}function Y(a,b){return(a&&a!=="*"?a+".":"")+b.replace(La,
+"`").replace(Ma,"&")}function ma(a,b,d){if(c.isFunction(b))return c.grep(a,function(f,h){return!!b.call(f,h,f)===d});else if(b.nodeType)return c.grep(a,function(f){return f===b===d});else if(typeof b==="string"){var e=c.grep(a,function(f){return f.nodeType===1});if(Na.test(b))return c.filter(b,e,!d);else b=c.filter(b,e)}return c.grep(a,function(f){return c.inArray(f,b)>=0===d})}function na(a,b){var d=0;b.each(function(){if(this.nodeName===(a[d]&&a[d].nodeName)){var e=c.data(a[d++]),f=c.data(this,
+e);if(e=e&&e.events){delete f.handle;f.events={};for(var h in e)for(var l in e[h])c.event.add(this,h,e[h][l],e[h][l].data)}}})}function Oa(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||"");b.parentNode&&b.parentNode.removeChild(b)}function oa(a,b,d){var e=b==="width"?a.offsetWidth:a.offsetHeight;if(d==="border")return e;c.each(b==="width"?Pa:Qa,function(){d||(e-=parseFloat(c.css(a,"padding"+this))||0);if(d==="margin")e+=parseFloat(c.css(a,
+"margin"+this))||0;else e-=parseFloat(c.css(a,"border"+this+"Width"))||0});return e}function da(a,b,d,e){if(c.isArray(b)&&b.length)c.each(b,function(f,h){d||Ra.test(a)?e(a,h):da(a+"["+(typeof h==="object"||c.isArray(h)?f:"")+"]",h,d,e)});else if(!d&&b!=null&&typeof b==="object")c.isEmptyObject(b)?e(a,""):c.each(b,function(f,h){da(a+"["+f+"]",h,d,e)});else e(a,b)}function S(a,b){var d={};c.each(pa.concat.apply([],pa.slice(0,b)),function(){d[this]=a});return d}function qa(a){if(!ea[a]){var b=c("<"+
+a+">").appendTo("body"),d=b.css("display");b.remove();if(d==="none"||d==="")d="block";ea[a]=d}return ea[a]}function fa(a){return c.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:false}var t=E.document,c=function(){function a(){if(!b.isReady){try{t.documentElement.doScroll("left")}catch(j){setTimeout(a,1);return}b.ready()}}var b=function(j,s){return new b.fn.init(j,s)},d=E.jQuery,e=E.$,f,h=/^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]+)$)/,l=/\S/,k=/^\s+/,o=/\s+$/,x=/\W/,r=/\d/,A=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,
+C=/^[\],:{}\s]*$/,J=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,w=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,I=/(?:^|:|,)(?:\s*\[)+/g,L=/(webkit)[ \/]([\w.]+)/,g=/(opera)(?:.*version)?[ \/]([\w.]+)/,i=/(msie) ([\w.]+)/,n=/(mozilla)(?:.*? rv:([\w.]+))?/,m=navigator.userAgent,p=false,q=[],u,y=Object.prototype.toString,F=Object.prototype.hasOwnProperty,M=Array.prototype.push,N=Array.prototype.slice,O=String.prototype.trim,D=Array.prototype.indexOf,R={};b.fn=b.prototype={init:function(j,
+s){var v,z,H;if(!j)return this;if(j.nodeType){this.context=this[0]=j;this.length=1;return this}if(j==="body"&&!s&&t.body){this.context=t;this[0]=t.body;this.selector="body";this.length=1;return this}if(typeof j==="string")if((v=h.exec(j))&&(v[1]||!s))if(v[1]){H=s?s.ownerDocument||s:t;if(z=A.exec(j))if(b.isPlainObject(s)){j=[t.createElement(z[1])];b.fn.attr.call(j,s,true)}else j=[H.createElement(z[1])];else{z=b.buildFragment([v[1]],[H]);j=(z.cacheable?z.fragment.cloneNode(true):z.fragment).childNodes}return b.merge(this,
+j)}else{if((z=t.getElementById(v[2]))&&z.parentNode){if(z.id!==v[2])return f.find(j);this.length=1;this[0]=z}this.context=t;this.selector=j;return this}else if(!s&&!x.test(j)){this.selector=j;this.context=t;j=t.getElementsByTagName(j);return b.merge(this,j)}else return!s||s.jquery?(s||f).find(j):b(s).find(j);else if(b.isFunction(j))return f.ready(j);if(j.selector!==B){this.selector=j.selector;this.context=j.context}return b.makeArray(j,this)},selector:"",jquery:"1.4.4",length:0,size:function(){return this.length},
+toArray:function(){return N.call(this,0)},get:function(j){return j==null?this.toArray():j<0?this.slice(j)[0]:this[j]},pushStack:function(j,s,v){var z=b();b.isArray(j)?M.apply(z,j):b.merge(z,j);z.prevObject=this;z.context=this.context;if(s==="find")z.selector=this.selector+(this.selector?" ":"")+v;else if(s)z.selector=this.selector+"."+s+"("+v+")";return z},each:function(j,s){return b.each(this,j,s)},ready:function(j){b.bindReady();if(b.isReady)j.call(t,b);else q&&q.push(j);return this},eq:function(j){return j===
+-1?this.slice(j):this.slice(j,+j+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(N.apply(this,arguments),"slice",N.call(arguments).join(","))},map:function(j){return this.pushStack(b.map(this,function(s,v){return j.call(s,v,s)}))},end:function(){return this.prevObject||b(null)},push:M,sort:[].sort,splice:[].splice};b.fn.init.prototype=b.fn;b.extend=b.fn.extend=function(){var j,s,v,z,H,G=arguments[0]||{},K=1,Q=arguments.length,ga=false;
+if(typeof G==="boolean"){ga=G;G=arguments[1]||{};K=2}if(typeof G!=="object"&&!b.isFunction(G))G={};if(Q===K){G=this;--K}for(;K<Q;K++)if((j=arguments[K])!=null)for(s in j){v=G[s];z=j[s];if(G!==z)if(ga&&z&&(b.isPlainObject(z)||(H=b.isArray(z)))){if(H){H=false;v=v&&b.isArray(v)?v:[]}else v=v&&b.isPlainObject(v)?v:{};G[s]=b.extend(ga,v,z)}else if(z!==B)G[s]=z}return G};b.extend({noConflict:function(j){E.$=e;if(j)E.jQuery=d;return b},isReady:false,readyWait:1,ready:function(j){j===true&&b.readyWait--;
+if(!b.readyWait||j!==true&&!b.isReady){if(!t.body)return setTimeout(b.ready,1);b.isReady=true;if(!(j!==true&&--b.readyWait>0))if(q){var s=0,v=q;for(q=null;j=v[s++];)j.call(t,b);b.fn.trigger&&b(t).trigger("ready").unbind("ready")}}},bindReady:function(){if(!p){p=true;if(t.readyState==="complete")return setTimeout(b.ready,1);if(t.addEventListener){t.addEventListener("DOMContentLoaded",u,false);E.addEventListener("load",b.ready,false)}else if(t.attachEvent){t.attachEvent("onreadystatechange",u);E.attachEvent("onload",
+b.ready);var j=false;try{j=E.frameElement==null}catch(s){}t.documentElement.doScroll&&j&&a()}}},isFunction:function(j){return b.type(j)==="function"},isArray:Array.isArray||function(j){return b.type(j)==="array"},isWindow:function(j){return j&&typeof j==="object"&&"setInterval"in j},isNaN:function(j){return j==null||!r.test(j)||isNaN(j)},type:function(j){return j==null?String(j):R[y.call(j)]||"object"},isPlainObject:function(j){if(!j||b.type(j)!=="object"||j.nodeType||b.isWindow(j))return false;if(j.constructor&&
+!F.call(j,"constructor")&&!F.call(j.constructor.prototype,"isPrototypeOf"))return false;for(var s in j);return s===B||F.call(j,s)},isEmptyObject:function(j){for(var s in j)return false;return true},error:function(j){throw j;},parseJSON:function(j){if(typeof j!=="string"||!j)return null;j=b.trim(j);if(C.test(j.replace(J,"@").replace(w,"]").replace(I,"")))return E.JSON&&E.JSON.parse?E.JSON.parse(j):(new Function("return "+j))();else b.error("Invalid JSON: "+j)},noop:function(){},globalEval:function(j){if(j&&
+l.test(j)){var s=t.getElementsByTagName("head")[0]||t.documentElement,v=t.createElement("script");v.type="text/javascript";if(b.support.scriptEval)v.appendChild(t.createTextNode(j));else v.text=j;s.insertBefore(v,s.firstChild);s.removeChild(v)}},nodeName:function(j,s){return j.nodeName&&j.nodeName.toUpperCase()===s.toUpperCase()},each:function(j,s,v){var z,H=0,G=j.length,K=G===B||b.isFunction(j);if(v)if(K)for(z in j){if(s.apply(j[z],v)===false)break}else for(;H<G;){if(s.apply(j[H++],v)===false)break}else if(K)for(z in j){if(s.call(j[z],
+z,j[z])===false)break}else for(v=j[0];H<G&&s.call(v,H,v)!==false;v=j[++H]);return j},trim:O?function(j){return j==null?"":O.call(j)}:function(j){return j==null?"":j.toString().replace(k,"").replace(o,"")},makeArray:function(j,s){var v=s||[];if(j!=null){var z=b.type(j);j.length==null||z==="string"||z==="function"||z==="regexp"||b.isWindow(j)?M.call(v,j):b.merge(v,j)}return v},inArray:function(j,s){if(s.indexOf)return s.indexOf(j);for(var v=0,z=s.length;v<z;v++)if(s[v]===j)return v;return-1},merge:function(j,
+s){var v=j.length,z=0;if(typeof s.length==="number")for(var H=s.length;z<H;z++)j[v++]=s[z];else for(;s[z]!==B;)j[v++]=s[z++];j.length=v;return j},grep:function(j,s,v){var z=[],H;v=!!v;for(var G=0,K=j.length;G<K;G++){H=!!s(j[G],G);v!==H&&z.push(j[G])}return z},map:function(j,s,v){for(var z=[],H,G=0,K=j.length;G<K;G++){H=s(j[G],G,v);if(H!=null)z[z.length]=H}return z.concat.apply([],z)},guid:1,proxy:function(j,s,v){if(arguments.length===2)if(typeof s==="string"){v=j;j=v[s];s=B}else if(s&&!b.isFunction(s)){v=
+s;s=B}if(!s&&j)s=function(){return j.apply(v||this,arguments)};if(j)s.guid=j.guid=j.guid||s.guid||b.guid++;return s},access:function(j,s,v,z,H,G){var K=j.length;if(typeof s==="object"){for(var Q in s)b.access(j,Q,s[Q],z,H,v);return j}if(v!==B){z=!G&&z&&b.isFunction(v);for(Q=0;Q<K;Q++)H(j[Q],s,z?v.call(j[Q],Q,H(j[Q],s)):v,G);return j}return K?H(j[0],s):B},now:function(){return(new Date).getTime()},uaMatch:function(j){j=j.toLowerCase();j=L.exec(j)||g.exec(j)||i.exec(j)||j.indexOf("compatible")<0&&n.exec(j)||
+[];return{browser:j[1]||"",version:j[2]||"0"}},browser:{}});b.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(j,s){R["[object "+s+"]"]=s.toLowerCase()});m=b.uaMatch(m);if(m.browser){b.browser[m.browser]=true;b.browser.version=m.version}if(b.browser.webkit)b.browser.safari=true;if(D)b.inArray=function(j,s){return D.call(s,j)};if(!/\s/.test("\u00a0")){k=/^[\s\xA0]+/;o=/[\s\xA0]+$/}f=b(t);if(t.addEventListener)u=function(){t.removeEventListener("DOMContentLoaded",u,
+false);b.ready()};else if(t.attachEvent)u=function(){if(t.readyState==="complete"){t.detachEvent("onreadystatechange",u);b.ready()}};return E.jQuery=E.$=b}();(function(){c.support={};var a=t.documentElement,b=t.createElement("script"),d=t.createElement("div"),e="script"+c.now();d.style.display="none";d.innerHTML=" <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>";var f=d.getElementsByTagName("*"),h=d.getElementsByTagName("a")[0],l=t.createElement("select"),
+k=l.appendChild(t.createElement("option"));if(!(!f||!f.length||!h)){c.support={leadingWhitespace:d.firstChild.nodeType===3,tbody:!d.getElementsByTagName("tbody").length,htmlSerialize:!!d.getElementsByTagName("link").length,style:/red/.test(h.getAttribute("style")),hrefNormalized:h.getAttribute("href")==="/a",opacity:/^0.55$/.test(h.style.opacity),cssFloat:!!h.style.cssFloat,checkOn:d.getElementsByTagName("input")[0].value==="on",optSelected:k.selected,deleteExpando:true,optDisabled:false,checkClone:false,
+scriptEval:false,noCloneEvent:true,boxModel:null,inlineBlockNeedsLayout:false,shrinkWrapBlocks:false,reliableHiddenOffsets:true};l.disabled=true;c.support.optDisabled=!k.disabled;b.type="text/javascript";try{b.appendChild(t.createTextNode("window."+e+"=1;"))}catch(o){}a.insertBefore(b,a.firstChild);if(E[e]){c.support.scriptEval=true;delete E[e]}try{delete b.test}catch(x){c.support.deleteExpando=false}a.removeChild(b);if(d.attachEvent&&d.fireEvent){d.attachEvent("onclick"<