├── .gitignore
├── .project
├── .pydevproject
├── LICENSE
├── README.md
├── app.js
├── log
    └── PLACEHOLDER
├── models.js
├── package.json
├── static
    ├── css
    │   └── all.css
    ├── img
    │   ├── green_bkg.png
    │   ├── shadow_left.png
    │   └── shadow_right.png
    ├── index.html
    └── js
    │   ├── dist
    │       ├── backbone-0.9.1.js
    │       ├── backbone-0.9.1.min.js
    │       ├── backbone-relational-0.5.0.js
    │       ├── handlebars-1.0.0.beta.6.js
    │       ├── jquery-1.7.1.js
    │       ├── jquery-1.7.1.min.js
    │       ├── underscore-1.3.1.js
    │       └── underscore-1.3.1.min.js
    │   └── forum.js
└── tutorial
    ├── css
        ├── highlight.css
        └── markdown.css
    ├── header.html
    ├── img
        ├── screenshot1.png
        └── screenshot2.png
    ├── js
        └── highlight.pack.js
    ├── publish.sh
    ├── tutorial.html
    └── tutorial.txt


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | server.log
3 | tutorial/_tutorial.html
4 | *~
5 | 


--------------------------------------------------------------------------------
/.project:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <projectDescription>
 3 | 	<name>Backbone-relational Tutorial</name>
 4 | 	<comment></comment>
 5 | 	<projects>
 6 | 	</projects>
 7 | 	<buildSpec>
 8 | 		<buildCommand>
 9 | 			<name>org.python.pydev.PyDevBuilder</name>
10 | 			<arguments>
11 | 			</arguments>
12 | 		</buildCommand>
13 | 	</buildSpec>
14 | 	<natures>
15 | 		<nature>org.python.pydev.pythonNature</nature>
16 | 	</natures>
17 | </projectDescription>
18 | 


--------------------------------------------------------------------------------
/.pydevproject:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <?eclipse-pydev version="1.0"?>
 3 | 
 4 | <pydev_project>
 5 | <pydev_property name="org.python.pydev.PYTHON_PROJECT_INTERPRETER">Default</pydev_property>
 6 | <pydev_property name="org.python.pydev.PYTHON_PROJECT_VERSION">python 2.7</pydev_property>
 7 | <pydev_pathproperty name="org.python.pydev.PROJECT_SOURCE_PATH">
 8 | <path>/Backbone-relational Tutorial</path>
 9 | </pydev_pathproperty>
10 | </pydev_project>
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Backbone-relational Tutorial - Nested Models With Backbone.js
 2 | =============================================================
 3 | 
 4 | Introduction
 5 | ------------
 6 | 
 7 | ### Backbone.js
 8 | 
 9 | Backbone.js allows to implement the whole MVC pattern on the client, leaving the server to do what he knows best: exposing a set of well-defined REST interfaces, which the client queries when he needs to fetch or update some information. No need to split the HTML rendering between the server templates and the client-side javascript. 
10 | 
11 | It's not only cleaner, it's also an excellent architecture to make responsive applications. Less information needs to be exchanged with the server - the formatting (views and controllers) being on the client, you only need to exchange the data being manipulated on the REST interfaces. 
12 | 
13 | No full page reload - the server sends a static HTML file upon the first request, then the JS client handles the interaction with the user, only remodeling the portions of the DOM that changes between pages. And, better still, Backbone.js takes care of a large part of the work required to synchronize data with the server. Sweet!
14 | 
15 | ### Backbone-relational
16 | 
17 | However, when I recently started to learn about Backbone, I realized it doesn't help to handle relationships between models. Most non-trivial applications need this - forum threads each have a series of comments, billing invoices have several items to charge for... 
18 | 
19 | If you're reading this, you've probably found out about backbone-relational after reading a few threads. But the documentation is sparse, and it's hard to see how to use it practically. How do you structure your views to represent the relations between models? How do you update or push relational models to their corresponding REST APIs?
20 | 
21 | [Read the full tutorial - Backbone-relational, Nested Models With Backbone.js][Tutorial]
22 | 
23 | [Tutorial]: http://antoviaque.org/docs/tutorials/backbone-relational-tutorial/
24 | 
25 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (C) 2012 Xavier Antoviaque <xavier@antoviaque.org>
  3 |  *
  4 |  * This software's license gives you freedom; you can copy, convey,
  5 |  * propagate, redistribute and/or modify this program under the terms of
  6 |  * the GNU Affero Gereral Public License (AGPL) as published by the Free
  7 |  * Software Foundation (FSF), either version 3 of the License, or (at your
  8 |  * option) any later version of the AGPL published by the FSF.
  9 |  *
 10 |  * This program is distributed in the hope that it will be useful, but
 11 |  * WITHOUT ANY WARRANTY; without even the implied warranty of
 12 |  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
 13 |  * General Public License for more details.
 14 |  *
 15 |  * You should have received a copy of the GNU Affero General Public License
 16 |  * along with this program in a file in the toplevel directory called
 17 |  * "AGPLv3".  If not, see <http://www.gnu.org/licenses/>.
 18 | */
 19 | 
 20 | // Imports /////////////////////////////////////////////////////
 21 | 
 22 | var restify = require('restify')
 23 |   , Logger = require('bunyan')
 24 |   , mime = require('mime')
 25 |   , path = require('path')
 26 |   , filed = require('filed');
 27 | 
 28 | 
 29 | // Database ////////////////////////////////////////////////////
 30 | 
 31 | var mongoose = require('mongoose')
 32 |   , db = mongoose.connect('mongodb://localhost/forum')
 33 |   , Thread = require('./models.js').Thread(db)
 34 |   , Message = require('./models.js').Message(db);
 35 | 
 36 | // Views ///////////////////////////////////////////////////////
 37 | 
 38 | function get_thread(req, res, next) {
 39 |     var send_result = function(err, thread_list) {
 40 |         if (err) {
 41 |             return next(err);
 42 |         }
 43 |         
 44 |         if(thread_list) {
 45 |             if(thread_list.messages) {
 46 |                 thread_list.messages.sort(function(a, b) {
 47 |                     return ((a.date_added < b.date_added) ? -1 : (a.date_added > b.date_added) ? 1 : 0); 
 48 |                 });
 49 |             }
 50 |             res.send(thread_list);
 51 |             return next();
 52 |         } else {
 53 |             return next(new restify.ResourceNotFoundError("Could not find any such thread"));
 54 |         }
 55 |     };
 56 |     
 57 |     if('_id' in req.params) {
 58 |         Thread.findOne({'_id': req.params._id}, send_result);
 59 |     } else {
 60 |         Thread.find({}, send_result);        
 61 |     }
 62 | }
 63 | 
 64 | function post_thread(req, res, next) {
 65 |     if(!req.body.title) {
 66 |         return next(new restify.MissingParameterError("Missing required thread or message attribute in request body"));
 67 |     }
 68 |     
 69 |     new_thread = new Thread({title: req.body.title});
 70 |     new_thread.save();
 71 |     res.send(new_thread);
 72 |     
 73 |     return next();
 74 | }
 75 | 
 76 | function post_message(req, res, next) {
 77 |     if(!req.body.author || !req.body.text || !req.body.thread) {
 78 |         return next(new restify.MissingParameterError("Missing required message attribute in request body"));
 79 |     }
 80 |     
 81 |     Thread.findOne({_id: req.body.thread}, function(err, thread) {
 82 |         if (err) {
 83 |             return next(err);
 84 |         } else if(!thread) {
 85 |             return next(new restify.ResourceNotFoundError("Could not find thread with id="+req.body.thread));
 86 |         }
 87 |         
 88 |         new_message = new Message({author: req.body.author,
 89 |                                    text: req.body.text,
 90 |                                    date_added: new Date()});
 91 |         new_message.save();
 92 |         thread.messages.push(new_message);
 93 |         thread.save();
 94 |         
 95 |         res.send(new_message);
 96 |         return next();
 97 |     })
 98 | }
 99 | 
100 | 
101 | // Server /////////////////////////////////////////////////////
102 | 
103 | var server = restify.createServer();
104 | 
105 | server.use(restify.acceptParser(server.acceptable))
106 |   .use(restify.authorizationParser())
107 |   .use(restify.dateParser())
108 |   .use(restify.queryParser({ mapParams: false }))
109 |   .use(restify.bodyParser({ mapParams: false }))
110 |   .use(restify.throttle({
111 |     burst: 10,
112 |     rate: 1,
113 |     ip: false,
114 |     xff: true,
115 |   }));
116 | 
117 | // Logging
118 | server.on('after', restify.auditLogger({
119 |     log: new Logger({
120 |         name: 'mok',
121 |         streams: [{ level: "info", stream: process.stdout }, 
122 |                   { level: "info", path: 'log/server.log' }],
123 |     })
124 | }));
125 | 
126 | 
127 | // Routes /////////////////////////////////////////////////////
128 | 
129 | // Thread
130 | server.get('/api/thread/', get_thread);
131 | server.get('/api/thread/:_id', get_thread);
132 | server.post('/api/thread/', post_thread);
133 | 
134 | // Message
135 | server.post('/api/message/', post_message);
136 | 
137 | // Static Content /////////////////////////////////////////////
138 | 
139 | server.get(/\/(css|img|js)?.*/, restify.serveStatic({
140 |   directory: './static',
141 |   default: 'index.html'
142 | }));
143 | 
144 | server.get('/', restify.serveStatic({
145 |   directory: './static',
146 |   default: 'index.html'
147 | }));
148 | 
149 | server.listen(3001, function() {
150 |     console.log('%s listening at %s', server.name, server.url);
151 | });
152 | 
153 | 


--------------------------------------------------------------------------------
/log/PLACEHOLDER:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoviaque/backbone-relational-tutorial/f9fe7f4b4d50510fd815ac92d5dd6fc1ae043d4f/log/PLACEHOLDER


--------------------------------------------------------------------------------
/models.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Module dependencies.
 4 |  */
 5 | 
 6 | var mongoose = require('mongoose')
 7 |   , Schema = mongoose.Schema;
 8 | 
 9 | /**
10 |  * Schema definition
11 |  */
12 | 
13 | var Message = new Schema();
14 | Message.add({
15 |     date_added : Date
16 |   , author     : String 
17 |   , text       : String
18 | });
19 |  
20 | var Thread = new Schema();
21 | Thread.add({
22 |     title      : String
23 |   , messages   : [Message]
24 | });
25 | 
26 | 
27 | /**
28 |  * Models
29 |  */
30 | 
31 | mongoose.model('Thread', Thread);
32 | exports.Thread = function(db) {
33 |   return db.model('Thread');
34 | };
35 | 
36 | mongoose.model('Message', Message);
37 | exports.Message = function(db) {
38 |     return db.model('Message');
39 | };
40 | 
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name":"backbone-relational-tutorial",
 3 |   "version":"0.0.2",
 4 |   "dependencies":{
 5 |     "express":"*",
 6 |     "mongoose":"*",
 7 |     "bunyan":"*",
 8 |     "restify":"*",
 9 |     "mime":"*",
10 |     "path":"*",
11 |     "filed":"*",
12 |     "markdown":"*"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/static/css/all.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (C) 2012 Xavier Antoviaque <xavier@antoviaque.org>
  3 |  *
  4 |  * This software's license gives you freedom; you can copy, convey,
  5 |  * propagate, redistribute and/or modify this program under the terms of
  6 |  * the GNU Affero Gereral Public License (AGPL) as published by the Free
  7 |  * Software Foundation (FSF), either version 3 of the License, or (at your
  8 |  * option) any later version of the AGPL published by the FSF.
  9 |  *
 10 |  * This program is distributed in the hope that it will be useful, but
 11 |  * WITHOUT ANY WARRANTY; without even the implied warranty of
 12 |  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
 13 |  * General Public License for more details.
 14 |  *
 15 |  * You should have received a copy of the GNU Affero General Public License
 16 |  * along with this program in a file in the toplevel directory called
 17 |  * "AGPLv3".  If not, see <http://www.gnu.org/licenses/>.
 18 | */
 19 | 
 20 | /* Global **********************************************************/
 21 | 
 22 | html, body {
 23 |     font-family: 'Helvetica';
 24 |     font-size: 12px;
 25 |     line-height: 130%;
 26 |     color: #B9C2A8;
 27 |     padding: 0;
 28 |     margin: 0;
 29 |     background-color: #d2543b;
 30 | }
 31 | 
 32 | 
 33 | a {
 34 |     color: #B9C2A8;
 35 | }
 36 | 
 37 | .container {
 38 | 	width: 800px;
 39 | 	position: relative;
 40 | 	left: 50%;
 41 | 	margin-left: -400px;
 42 | }
 43 | 
 44 | .shadow {
 45 | 	position: absolute;
 46 | 	height: 100%;
 47 | 	width: 21px;
 48 | }
 49 | 
 50 | .shadow.left {
 51 |     background: transparent url('../img/shadow_left.png') repeat left top;
 52 | 	top: 0;
 53 | 	left: 0;
 54 | 	margin-left: -21px;
 55 | }
 56 | 
 57 | .shadow.right {
 58 |     background: transparent url('../img/shadow_right.png') repeat right top;
 59 | 	top: 0;
 60 |     right: 0;
 61 |     margin-right: -21px;
 62 | }
 63 | 
 64 | .main {
 65 | 	padding: 20px;
 66 |     background-image: url('../img/green_bkg.png');
 67 | }
 68 | 
 69 | .centered {
 70 | 	text-align: center;
 71 | }
 72 | 
 73 | ul {
 74 | 	list-style-type: none;
 75 | }
 76 | 
 77 | .thread_list .thread_summary_view {
 78 | 	font-size: 15px;
 79 | 	font-weight: bold;
 80 | 	padding: 10px;
 81 | 	border-bottom: 1px solid;
 82 | 	border-color: grey;
 83 | 	cursor: pointer;
 84 |     margin: 10px;
 85 |     background-color: #6c8738;
 86 |     -webkit-border-radius: 10px;
 87 |     -moz-border-radius: 10px;
 88 |     -ms-border-radius: 10px;
 89 |     -o-border-radius: 10px;
 90 |     border-radius: 10px;
 91 | }
 92 | 
 93 | .thread_list .thread_summary_view .thread_title {
 94 | 	font-weight: bold;
 95 | }
 96 | 
 97 | .thread_list .thread_summary_view .thread_nb_messages {
 98 |     float: right;
 99 | }
100 | 
101 | input[type=text] {
102 | 	padding: 5px;
103 | 	width: 400px;
104 | 	margin: 5px;
105 | }
106 | 
107 | textarea {
108 | 	width: 400px;
109 | 	height: 200px;
110 | 	margin: 5px;
111 | }
112 | 
113 | .message_author {
114 | 	font-weight: bold;
115 | 	padding: 10px 0 0 5px;
116 | }
117 | 
118 | .message_text {
119 | 	font-size: 14px;
120 | 	padding: 20px;
121 | }
122 | 	
123 | .message {
124 | 	margin: 20px;
125 |     background-color: #6c8738;
126 |     -webkit-border-radius: 10px;
127 |     -moz-border-radius: 10px;
128 |     -ms-border-radius: 10px;
129 |     -o-border-radius: 10px;
130 |     border-radius: 10px;	
131 | }
132 | 


--------------------------------------------------------------------------------
/static/img/green_bkg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoviaque/backbone-relational-tutorial/f9fe7f4b4d50510fd815ac92d5dd6fc1ae043d4f/static/img/green_bkg.png


--------------------------------------------------------------------------------
/static/img/shadow_left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoviaque/backbone-relational-tutorial/f9fe7f4b4d50510fd815ac92d5dd6fc1ae043d4f/static/img/shadow_left.png


--------------------------------------------------------------------------------
/static/img/shadow_right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoviaque/backbone-relational-tutorial/f9fe7f4b4d50510fd815ac92d5dd6fc1ae043d4f/static/img/shadow_right.png


--------------------------------------------------------------------------------
/static/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8" />
 5 | 	<title>Sample forum</title>
 6 | 	<link rel="stylesheet" href="/css/all.css">
 7 | </head>
 8 | 
 9 | <body>
10 | 
11 | 	<div class="container">
12 |         <div class="shadow left"></div>
13 |         <div class="main">
14 |             <h1>Forum</h1>
15 |             <div id="content"></div>
16 |         </div>            
17 |         <div class="shadow right"></div>
18 |     </div> 
19 | 
20 | <!-- Templates -->
21 | 
22 | <script type="text/template" id="tpl_thread_list">
23 |     <h2 class="centered">Threads</h2>
24 |             
25 |     <ul class="thread_list"></ul>
26 | 
27 |     <h2>New Thread</h2>
28 |     <ul>
29 |         <li>Title: <input type="text" class="new_thread_title" /></li>
30 |         <li>Author: <input class="new_message_author" type="text" /></li>
31 |         <li>Message: <textarea class="new_message_text" /></li>
32 |         <li><input type="submit" class="new_thread_submit" value="Create thread" /></li>
33 |     </ul>
34 |     <div class="error_message"></div>
35 | </script>
36 | 
37 | <script type="text/template" id="tpl_thread_summary">
38 |     <span class="thread_title">{{title}}</span> 
39 |     <span class="thread_nb_messages">{{messages.length}} messages</span>
40 | </script>
41 | 
42 | <script type="text/template" id="tpl_thread">
43 |     <h2 class="centered">Thread - "{{title}}"</h2>
44 | 
45 |     <div class="message_list"></div>
46 | 
47 |     <h2>New message</div>
48 |     <ul>
49 |         <li>Author: <input class="new_message_author" type="text" /></li>
50 |         <li>Text: <textarea class="new_message_text" /></li>
51 |     </ul>
52 |     <input type="submit" value="Post message" />
53 |     </ul>
54 |     <div class="error_message"></div>
55 | </script>
56 | 
57 | <script type="text/template" id="tpl_message">
58 |     <div class="message">
59 |         <div class="message_author">By: {{author}}</div>
60 |         <div class="message_text">{{text}}</div>
61 |     </div>
62 | </script>
63 | 
64 | <!-- JavaScript -->
65 | <script type="text/javascript" src="/js/dist/jquery-1.7.1.min.js"></script>
66 | <script type="text/javascript" src="/js/dist/underscore-1.3.1.min.js"></script>
67 | <script type="text/javascript" src="/js/dist/handlebars-1.0.0.beta.6.js"></script>
68 | <script type="text/javascript" src="/js/dist/backbone-0.9.1.min.js"></script>
69 | <script type="text/javascript" src="/js/dist/backbone-relational-0.5.0.js"></script>
70 | <script type="text/javascript" src="/js/forum.js"></script>
71 | <script type="text/javascript">
72 |     (function($) {
73 |         $.forum.bootstrap();
74 |     })(jQuery);
75 | </script>
76 | 
77 | </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/static/js/dist/backbone-0.9.1.min.js:
--------------------------------------------------------------------------------
 1 | // Backbone.js 0.9.1
 2 | 
 3 | // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc.
 4 | // Backbone may be freely distributed under the MIT license.
 5 | // For all details and documentation:
 6 | // http://backbonejs.org
 7 | (function(){var i=this,r=i.Backbone,s=Array.prototype.slice,t=Array.prototype.splice,g;g="undefined"!==typeof exports?exports:i.Backbone={};g.VERSION="0.9.1";var f=i._;!f&&"undefined"!==typeof require&&(f=require("underscore"));var h=i.jQuery||i.Zepto||i.ender;g.setDomLibrary=function(a){h=a};g.noConflict=function(){i.Backbone=r;return this};g.emulateHTTP=!1;g.emulateJSON=!1;g.Events={on:function(a,b,c){for(var d,a=a.split(/\s+/),e=this._callbacks||(this._callbacks={});d=a.shift();){d=e[d]||(e[d]=
 8 | {});var f=d.tail||(d.tail=d.next={});f.callback=b;f.context=c;d.tail=f.next={}}return this},off:function(a,b,c){var d,e,f;if(a){if(e=this._callbacks)for(a=a.split(/\s+/);d=a.shift();)if(f=e[d],delete e[d],b&&f)for(;(f=f.next)&&f.next;)if(!(f.callback===b&&(!c||f.context===c)))this.on(d,f.callback,f.context)}else delete this._callbacks;return this},trigger:function(a){var b,c,d,e;if(!(d=this._callbacks))return this;e=d.all;for((a=a.split(/\s+/)).push(null);b=a.shift();)e&&a.push({next:e.next,tail:e.tail,
 9 | event:b}),(c=d[b])&&a.push({next:c.next,tail:c.tail});for(e=s.call(arguments,1);c=a.pop();){b=c.tail;for(d=c.event?[c.event].concat(e):e;(c=c.next)!==b;)c.callback.apply(c.context||this,d)}return this}};g.Events.bind=g.Events.on;g.Events.unbind=g.Events.off;g.Model=function(a,b){var c;a||(a={});b&&b.parse&&(a=this.parse(a));if(c=j(this,"defaults"))a=f.extend({},c,a);b&&b.collection&&(this.collection=b.collection);this.attributes={};this._escapedAttributes={};this.cid=f.uniqueId("c");if(!this.set(a,
10 | {silent:!0}))throw Error("Can't create an invalid model");delete this._changed;this._previousAttributes=f.clone(this.attributes);this.initialize.apply(this,arguments)};f.extend(g.Model.prototype,g.Events,{idAttribute:"id",initialize:function(){},toJSON:function(){return f.clone(this.attributes)},get:function(a){return this.attributes[a]},escape:function(a){var b;if(b=this._escapedAttributes[a])return b;b=this.attributes[a];return this._escapedAttributes[a]=f.escape(null==b?"":""+b)},has:function(a){return null!=
11 | this.attributes[a]},set:function(a,b,c){var d,e;f.isObject(a)||null==a?(d=a,c=b):(d={},d[a]=b);c||(c={});if(!d)return this;d instanceof g.Model&&(d=d.attributes);if(c.unset)for(e in d)d[e]=void 0;if(!this._validate(d,c))return!1;this.idAttribute in d&&(this.id=d[this.idAttribute]);var b=this.attributes,k=this._escapedAttributes,n=this._previousAttributes||{},h=this._setting;this._changed||(this._changed={});this._setting=!0;for(e in d)if(a=d[e],f.isEqual(b[e],a)||delete k[e],c.unset?delete b[e]:b[e]=
12 | a,this._changing&&!f.isEqual(this._changed[e],a)&&(this.trigger("change:"+e,this,a,c),this._moreChanges=!0),delete this._changed[e],!f.isEqual(n[e],a)||f.has(b,e)!=f.has(n,e))this._changed[e]=a;h||(!c.silent&&this.hasChanged()&&this.change(c),this._setting=!1);return this},unset:function(a,b){(b||(b={})).unset=!0;return this.set(a,null,b)},clear:function(a){(a||(a={})).unset=!0;return this.set(f.clone(this.attributes),a)},fetch:function(a){var a=a?f.clone(a):{},b=this,c=a.success;a.success=function(d,
13 | e,f){if(!b.set(b.parse(d,f),a))return!1;c&&c(b,d)};a.error=g.wrapError(a.error,b,a);return(this.sync||g.sync).call(this,"read",this,a)},save:function(a,b,c){var d,e;f.isObject(a)||null==a?(d=a,c=b):(d={},d[a]=b);c=c?f.clone(c):{};c.wait&&(e=f.clone(this.attributes));a=f.extend({},c,{silent:!0});if(d&&!this.set(d,c.wait?a:c))return!1;var k=this,h=c.success;c.success=function(a,b,e){b=k.parse(a,e);c.wait&&(b=f.extend(d||{},b));if(!k.set(b,c))return!1;h?h(k,a):k.trigger("sync",k,a,c)};c.error=g.wrapError(c.error,
14 | k,c);b=this.isNew()?"create":"update";b=(this.sync||g.sync).call(this,b,this,c);c.wait&&this.set(e,a);return b},destroy:function(a){var a=a?f.clone(a):{},b=this,c=a.success,d=function(){b.trigger("destroy",b,b.collection,a)};if(this.isNew())return d();a.success=function(e){a.wait&&d();c?c(b,e):b.trigger("sync",b,e,a)};a.error=g.wrapError(a.error,b,a);var e=(this.sync||g.sync).call(this,"delete",this,a);a.wait||d();return e},url:function(){var a=j(this.collection,"url")||j(this,"urlRoot")||o();return this.isNew()?
15 | a:a+("/"==a.charAt(a.length-1)?"":"/")+encodeURIComponent(this.id)},parse:function(a){return a},clone:function(){return new this.constructor(this.attributes)},isNew:function(){return null==this.id},change:function(a){if(this._changing||!this.hasChanged())return this;this._moreChanges=this._changing=!0;for(var b in this._changed)this.trigger("change:"+b,this,this._changed[b],a);for(;this._moreChanges;)this._moreChanges=!1,this.trigger("change",this,a);this._previousAttributes=f.clone(this.attributes);
16 | delete this._changed;this._changing=!1;return this},hasChanged:function(a){return!arguments.length?!f.isEmpty(this._changed):this._changed&&f.has(this._changed,a)},changedAttributes:function(a){if(!a)return this.hasChanged()?f.clone(this._changed):!1;var b,c=!1,d=this._previousAttributes,e;for(e in a)if(!f.isEqual(d[e],b=a[e]))(c||(c={}))[e]=b;return c},previous:function(a){return!arguments.length||!this._previousAttributes?null:this._previousAttributes[a]},previousAttributes:function(){return f.clone(this._previousAttributes)},
17 | isValid:function(){return!this.validate(this.attributes)},_validate:function(a,b){if(b.silent||!this.validate)return!0;var a=f.extend({},this.attributes,a),c=this.validate(a,b);if(!c)return!0;b&&b.error?b.error(this,c,b):this.trigger("error",this,c,b);return!1}});g.Collection=function(a,b){b||(b={});b.comparator&&(this.comparator=b.comparator);this._reset();this.initialize.apply(this,arguments);a&&this.reset(a,{silent:!0,parse:b.parse})};f.extend(g.Collection.prototype,g.Events,{model:g.Model,initialize:function(){},
18 | toJSON:function(){return this.map(function(a){return a.toJSON()})},add:function(a,b){var c,d,e,g,h,i={},j={};b||(b={});a=f.isArray(a)?a.slice():[a];for(c=0,d=a.length;c<d;c++){if(!(e=a[c]=this._prepareModel(a[c],b)))throw Error("Can't add an invalid model to a collection");if(i[g=e.cid]||this._byCid[g]||null!=(h=e.id)&&(j[h]||this._byId[h]))throw Error("Can't add the same model to a collection twice");i[g]=j[h]=e}for(c=0;c<d;c++)(e=a[c]).on("all",this._onModelEvent,this),this._byCid[e.cid]=e,null!=
19 | e.id&&(this._byId[e.id]=e);this.length+=d;t.apply(this.models,[null!=b.at?b.at:this.models.length,0].concat(a));this.comparator&&this.sort({silent:!0});if(b.silent)return this;for(c=0,d=this.models.length;c<d;c++)if(i[(e=this.models[c]).cid])b.index=c,e.trigger("add",e,this,b);return this},remove:function(a,b){var c,d,e,g;b||(b={});a=f.isArray(a)?a.slice():[a];for(c=0,d=a.length;c<d;c++)if(g=this.getByCid(a[c])||this.get(a[c]))delete this._byId[g.id],delete this._byCid[g.cid],e=this.indexOf(g),this.models.splice(e,
20 | 1),this.length--,b.silent||(b.index=e,g.trigger("remove",g,this,b)),this._removeReference(g);return this},get:function(a){return null==a?null:this._byId[null!=a.id?a.id:a]},getByCid:function(a){return a&&this._byCid[a.cid||a]},at:function(a){return this.models[a]},sort:function(a){a||(a={});if(!this.comparator)throw Error("Cannot sort a set without a comparator");var b=f.bind(this.comparator,this);1==this.comparator.length?this.models=this.sortBy(b):this.models.sort(b);a.silent||this.trigger("reset",
21 | this,a);return this},pluck:function(a){return f.map(this.models,function(b){return b.get(a)})},reset:function(a,b){a||(a=[]);b||(b={});for(var c=0,d=this.models.length;c<d;c++)this._removeReference(this.models[c]);this._reset();this.add(a,{silent:!0,parse:b.parse});b.silent||this.trigger("reset",this,b);return this},fetch:function(a){a=a?f.clone(a):{};void 0===a.parse&&(a.parse=!0);var b=this,c=a.success;a.success=function(d,e,f){b[a.add?"add":"reset"](b.parse(d,f),a);c&&c(b,d)};a.error=g.wrapError(a.error,
22 | b,a);return(this.sync||g.sync).call(this,"read",this,a)},create:function(a,b){var c=this,b=b?f.clone(b):{},a=this._prepareModel(a,b);if(!a)return!1;b.wait||c.add(a,b);var d=b.success;b.success=function(e,f){b.wait&&c.add(e,b);d?d(e,f):e.trigger("sync",a,f,b)};a.save(null,b);return a},parse:function(a){return a},chain:function(){return f(this.models).chain()},_reset:function(){this.length=0;this.models=[];this._byId={};this._byCid={}},_prepareModel:function(a,b){a instanceof g.Model?a.collection||
23 | (a.collection=this):(b.collection=this,a=new this.model(a,b),a._validate(a.attributes,b)||(a=!1));return a},_removeReference:function(a){this==a.collection&&delete a.collection;a.off("all",this._onModelEvent,this)},_onModelEvent:function(a,b,c,d){("add"==a||"remove"==a)&&c!=this||("destroy"==a&&this.remove(b,d),b&&a==="change:"+b.idAttribute&&(delete this._byId[b.previous(b.idAttribute)],this._byId[b.id]=b),this.trigger.apply(this,arguments))}});f.each("forEach,each,map,reduce,reduceRight,find,detect,filter,select,reject,every,all,some,any,include,contains,invoke,max,min,sortBy,sortedIndex,toArray,size,first,initial,rest,last,without,indexOf,shuffle,lastIndexOf,isEmpty,groupBy".split(","),
24 | function(a){g.Collection.prototype[a]=function(){return f[a].apply(f,[this.models].concat(f.toArray(arguments)))}});g.Router=function(a){a||(a={});a.routes&&(this.routes=a.routes);this._bindRoutes();this.initialize.apply(this,arguments)};var u=/:\w+/g,v=/\*\w+/g,w=/[-[\]{}()+?.,\\^$|#\s]/g;f.extend(g.Router.prototype,g.Events,{initialize:function(){},route:function(a,b,c){g.history||(g.history=new g.History);f.isRegExp(a)||(a=this._routeToRegExp(a));c||(c=this[b]);g.history.route(a,f.bind(function(d){d=
25 | this._extractParameters(a,d);c&&c.apply(this,d);this.trigger.apply(this,["route:"+b].concat(d));g.history.trigger("route",this,b,d)},this));return this},navigate:function(a,b){g.history.navigate(a,b)},_bindRoutes:function(){if(this.routes){var a=[],b;for(b in this.routes)a.unshift([b,this.routes[b]]);b=0;for(var c=a.length;b<c;b++)this.route(a[b][0],a[b][1],this[a[b][1]])}},_routeToRegExp:function(a){a=a.replace(w,"\\$&").replace(u,"([^/]+)").replace(v,"(.*?)");return RegExp("^"+a+"$")},_extractParameters:function(a,
26 | b){return a.exec(b).slice(1)}});g.History=function(){this.handlers=[];f.bindAll(this,"checkUrl")};var m=/^[#\/]/,x=/msie [\w.]+/,l=!1;f.extend(g.History.prototype,g.Events,{interval:50,getFragment:function(a,b){if(null==a)if(this._hasPushState||b){var a=window.location.pathname,c=window.location.search;c&&(a+=c)}else a=window.location.hash;a=decodeURIComponent(a);a.indexOf(this.options.root)||(a=a.substr(this.options.root.length));return a.replace(m,"")},start:function(a){if(l)throw Error("Backbone.history has already been started");
27 | this.options=f.extend({},{root:"/"},this.options,a);this._wantsHashChange=!1!==this.options.hashChange;this._wantsPushState=!!this.options.pushState;this._hasPushState=!(!this.options.pushState||!window.history||!window.history.pushState);var a=this.getFragment(),b=document.documentMode;if(b=x.exec(navigator.userAgent.toLowerCase())&&(!b||7>=b))this.iframe=h('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo("body")[0].contentWindow,this.navigate(a);this._hasPushState?h(window).bind("popstate",
28 | this.checkUrl):this._wantsHashChange&&"onhashchange"in window&&!b?h(window).bind("hashchange",this.checkUrl):this._wantsHashChange&&(this._checkUrlInterval=setInterval(this.checkUrl,this.interval));this.fragment=a;l=!0;a=window.location;b=a.pathname==this.options.root;if(this._wantsHashChange&&this._wantsPushState&&!this._hasPushState&&!b)return this.fragment=this.getFragment(null,!0),window.location.replace(this.options.root+"#"+this.fragment),!0;this._wantsPushState&&this._hasPushState&&b&&a.hash&&
29 | (this.fragment=a.hash.replace(m,""),window.history.replaceState({},document.title,a.protocol+"//"+a.host+this.options.root+this.fragment));if(!this.options.silent)return this.loadUrl()},stop:function(){h(window).unbind("popstate",this.checkUrl).unbind("hashchange",this.checkUrl);clearInterval(this._checkUrlInterval);l=!1},route:function(a,b){this.handlers.unshift({route:a,callback:b})},checkUrl:function(){var a=this.getFragment();a==this.fragment&&this.iframe&&(a=this.getFragment(this.iframe.location.hash));
30 | if(a==this.fragment||a==decodeURIComponent(this.fragment))return!1;this.iframe&&this.navigate(a);this.loadUrl()||this.loadUrl(window.location.hash)},loadUrl:function(a){var b=this.fragment=this.getFragment(a);return f.any(this.handlers,function(a){if(a.route.test(b))return a.callback(b),!0})},navigate:function(a,b){if(!l)return!1;if(!b||!0===b)b={trigger:b};var c=(a||"").replace(m,"");this.fragment==c||this.fragment==decodeURIComponent(c)||(this._hasPushState?(0!=c.indexOf(this.options.root)&&(c=
31 | this.options.root+c),this.fragment=c,window.history[b.replace?"replaceState":"pushState"]({},document.title,c)):this._wantsHashChange?(this.fragment=c,this._updateHash(window.location,c,b.replace),this.iframe&&c!=this.getFragment(this.iframe.location.hash)&&(b.replace||this.iframe.document.open().close(),this._updateHash(this.iframe.location,c,b.replace))):window.location.assign(this.options.root+a),b.trigger&&this.loadUrl(a))},_updateHash:function(a,b,c){c?a.replace(a.toString().replace(/(javascript:|#).*$/,
32 | "")+"#"+b):a.hash=b}});g.View=function(a){this.cid=f.uniqueId("view");this._configure(a||{});this._ensureElement();this.initialize.apply(this,arguments);this.delegateEvents()};var y=/^(\S+)\s*(.*)$/,p="model,collection,el,id,attributes,className,tagName".split(",");f.extend(g.View.prototype,g.Events,{tagName:"div",$:function(a){return this.$el.find(a)},initialize:function(){},render:function(){return this},remove:function(){this.$el.remove();return this},make:function(a,b,c){a=document.createElement(a);
33 | b&&h(a).attr(b);c&&h(a).html(c);return a},setElement:function(a,b){this.$el=h(a);this.el=this.$el[0];!1!==b&&this.delegateEvents();return this},delegateEvents:function(a){if(a||(a=j(this,"events"))){this.undelegateEvents();for(var b in a){var c=a[b];f.isFunction(c)||(c=this[a[b]]);if(!c)throw Error('Event "'+a[b]+'" does not exist');var d=b.match(y),e=d[1],d=d[2],c=f.bind(c,this),e=e+(".delegateEvents"+this.cid);""===d?this.$el.bind(e,c):this.$el.delegate(d,e,c)}}},undelegateEvents:function(){this.$el.unbind(".delegateEvents"+
34 | this.cid)},_configure:function(a){this.options&&(a=f.extend({},this.options,a));for(var b=0,c=p.length;b<c;b++){var d=p[b];a[d]&&(this[d]=a[d])}this.options=a},_ensureElement:function(){if(this.el)this.setElement(this.el,!1);else{var a=j(this,"attributes")||{};this.id&&(a.id=this.id);this.className&&(a["class"]=this.className);this.setElement(this.make(this.tagName,a),!1)}}});g.Model.extend=g.Collection.extend=g.Router.extend=g.View.extend=function(a,b){var c=z(this,a,b);c.extend=this.extend;return c};
35 | var A={create:"POST",update:"PUT","delete":"DELETE",read:"GET"};g.sync=function(a,b,c){var d=A[a],e={type:d,dataType:"json"};c.url||(e.url=j(b,"url")||o());if(!c.data&&b&&("create"==a||"update"==a))e.contentType="application/json",e.data=JSON.stringify(b.toJSON());g.emulateJSON&&(e.contentType="application/x-www-form-urlencoded",e.data=e.data?{model:e.data}:{});if(g.emulateHTTP&&("PUT"===d||"DELETE"===d))g.emulateJSON&&(e.data._method=d),e.type="POST",e.beforeSend=function(a){a.setRequestHeader("X-HTTP-Method-Override",
36 | d)};"GET"!==e.type&&!g.emulateJSON&&(e.processData=!1);return h.ajax(f.extend(e,c))};g.wrapError=function(a,b,c){return function(d,e){e=d===b?e:d;a?a(b,e,c):b.trigger("error",b,e,c)}};var q=function(){},z=function(a,b,c){var d;d=b&&b.hasOwnProperty("constructor")?b.constructor:function(){a.apply(this,arguments)};f.extend(d,a);q.prototype=a.prototype;d.prototype=new q;b&&f.extend(d.prototype,b);c&&f.extend(d,c);d.prototype.constructor=d;d.__super__=a.prototype;return d},j=function(a,b){return!a||!a[b]?
37 | null:f.isFunction(a[b])?a[b]():a[b]},o=function(){throw Error('A "url" property or function must be specified');}}).call(this);
38 | 


--------------------------------------------------------------------------------
/static/js/dist/backbone-relational-0.5.0.js:
--------------------------------------------------------------------------------
   1 | /**	
   2 |  * Backbone-relational.js 0.5.0
   3 |  * (c) 2011 Paul Uithol
   4 |  * 
   5 |  * Backbone-relational may be freely distributed under the MIT license.
   6 |  * For details and documentation: https://github.com/PaulUithol/Backbone-relational.
   7 |  * Depends on (as in, compeletely useless without) Backbone: https://github.com/documentcloud/backbone.
   8 |  */
   9 | ( function( undefined ) {
  10 | 	/**
  11 | 	 * CommonJS shim
  12 | 	 **/
  13 | 	var _, Backbone, exports;
  14 | 	if ( typeof window === 'undefined' ) {
  15 | 		_ = require( 'underscore' );
  16 | 		Backbone = require( 'backbone' );
  17 | 		exports = module.exports = Backbone;
  18 | 	}
  19 | 	else {
  20 | 		var _ = window._;
  21 | 		Backbone = window.Backbone;
  22 | 		exports = window;
  23 | 	}
  24 | 	
  25 | 	Backbone.Relational = {
  26 | 		showWarnings: true
  27 | 	};
  28 | 	
  29 | 	/**
  30 | 	 * Semaphore mixin; can be used as both binary and counting.
  31 | 	 **/
  32 | 	Backbone.Semaphore = {
  33 | 		_permitsAvailable: null,
  34 | 		_permitsUsed: 0,
  35 | 		
  36 | 		acquire: function() {
  37 | 			if ( this._permitsAvailable && this._permitsUsed >= this._permitsAvailable ) {
  38 | 				throw new Error( 'Max permits acquired' );
  39 | 			}
  40 | 			else {
  41 | 				this._permitsUsed++;
  42 | 			}
  43 | 		},
  44 | 		
  45 | 		release: function() {
  46 | 			if ( this._permitsUsed === 0 ) {
  47 | 				throw new Error( 'All permits released' );
  48 | 			}
  49 | 			else {
  50 | 				this._permitsUsed--;
  51 | 			}
  52 | 		},
  53 | 		
  54 | 		isLocked: function() {
  55 | 			return this._permitsUsed > 0;
  56 | 		},
  57 | 		
  58 | 		setAvailablePermits: function( amount ) {
  59 | 			if ( this._permitsUsed > amount ) {
  60 | 				throw new Error( 'Available permits cannot be less than used permits' );
  61 | 			}
  62 | 			this._permitsAvailable = amount;
  63 | 		}
  64 | 	};
  65 | 	
  66 | 	/**
  67 | 	 * A BlockingQueue that accumulates items while blocked (via 'block'),
  68 | 	 * and processes them when unblocked (via 'unblock').
  69 | 	 * Process can also be called manually (via 'process').
  70 | 	 */
  71 | 	Backbone.BlockingQueue = function() {
  72 | 		this._queue = [];
  73 | 	};
  74 | 	_.extend( Backbone.BlockingQueue.prototype, Backbone.Semaphore, {
  75 | 		_queue: null,
  76 | 		
  77 | 		add: function( func ) {
  78 | 			if ( this.isBlocked() ) {
  79 | 				this._queue.push( func );
  80 | 			}
  81 | 			else {
  82 | 				func();
  83 | 			}
  84 | 		},
  85 | 		
  86 | 		process: function() {
  87 | 			while ( this._queue && this._queue.length ) {
  88 | 				this._queue.shift()();
  89 | 			}
  90 | 		},
  91 | 		
  92 | 		block: function() {
  93 | 			this.acquire();
  94 | 		},
  95 | 		
  96 | 		unblock: function() {
  97 | 			this.release();
  98 | 			if ( !this.isBlocked() ) {
  99 | 				this.process();
 100 | 			}
 101 | 		},
 102 | 		
 103 | 		isBlocked: function() {
 104 | 			return this.isLocked();
 105 | 		}
 106 | 	});
 107 | 	/**
 108 | 	 * Global event queue. Accumulates external events ('add:<key>', 'remove:<key>' and 'update:<key>')
 109 | 	 * until the top-level object is fully initialized (see 'Backbone.RelationalModel').
 110 | 	 */
 111 | 	Backbone.Relational.eventQueue = new Backbone.BlockingQueue();
 112 | 	
 113 | 	/**
 114 | 	 * Backbone.Store keeps track of all created (and destruction of) Backbone.RelationalModel.
 115 | 	 * Handles lookup for relations.
 116 | 	 */
 117 | 	Backbone.Store =  function() {
 118 | 		this._collections = [];
 119 | 		this._reverseRelations = [];
 120 | 	};
 121 | 	_.extend( Backbone.Store.prototype, Backbone.Events, {
 122 | 		_collections: null,
 123 | 		_reverseRelations: null,
 124 | 		
 125 | 		/**
 126 | 		 * Add a reverse relation. Is added to the 'relations' property on model's prototype, and to
 127 | 		 * existing instances of 'model' in the store as well.
 128 | 		 * @param {object} relation
 129 | 		 * @param {Backbone.RelationalModel} relation.model
 130 | 		 * @param {String} relation.type
 131 | 		 * @param {String} relation.key
 132 | 		 * @param {String|object} relation.relatedModel
 133 | 		 */
 134 | 		addReverseRelation: function( relation ) {
 135 | 			var exists = _.any( this._reverseRelations, function( rel ) {
 136 | 				return _.all( relation, function( val, key ) {
 137 | 					return val === rel[ key ];
 138 | 				});
 139 | 			});
 140 | 			
 141 | 			if ( !exists && relation.model && relation.type ) {
 142 | 				this._reverseRelations.push( relation );
 143 | 				
 144 | 				if ( !relation.model.prototype.relations ) {
 145 | 					relation.model.prototype.relations = [];
 146 | 				}
 147 | 				relation.model.prototype.relations.push( relation );
 148 | 				
 149 | 				this.retroFitRelation( relation );
 150 | 			}
 151 | 		},
 152 | 		
 153 | 		/**
 154 | 		 * Add a 'relation' to all existing instances of 'relation.model' in the store
 155 | 		 * @param {object} relation
 156 | 		 */
 157 | 		retroFitRelation: function( relation ) {
 158 | 			var coll = this.getCollection( relation.model );
 159 | 			coll.each( function( model ) {
 160 | 				new relation.type( model, relation );
 161 | 			}, this);
 162 | 		},
 163 | 		
 164 | 		/**
 165 | 		 * Find the Store's collection for a certain type of model.
 166 | 		 * @param {Backbone.RelationalModel} model
 167 | 		 * @return {Backbone.Collection} A collection if found (or applicable for 'model'), or null
 168 | 		 */
 169 | 		getCollection: function( model ) {
 170 | 			var coll =  _.detect( this._collections, function( c ) {
 171 | 					// Check if model is the type itself (a ref to the constructor), or is of type c.model
 172 | 					return model === c.model || model.constructor === c.model;
 173 | 				});
 174 | 			
 175 | 			if ( !coll ) {
 176 | 				coll = this._createCollection( model );
 177 | 			}
 178 | 			
 179 | 			return coll;
 180 | 		},
 181 | 		
 182 | 		/**
 183 | 		 * Find a type on the global object by name. Splits name on dots.
 184 | 		 * @param {String} name
 185 | 		 * @return {object}
 186 | 		 */
 187 | 		getObjectByName: function( name ) {
 188 | 			var type = _.reduce( name.split( '.' ), function( memo, val ) {
 189 | 				return memo[ val ];
 190 | 			}, exports);
 191 | 			return type !== exports ? type: null;
 192 | 		},
 193 | 		
 194 | 		_createCollection: function( type ) {
 195 | 			var coll;
 196 | 			
 197 | 			// If 'type' is an instance, take it's constructor
 198 | 			if ( type instanceof Backbone.RelationalModel ) {
 199 | 				type = type.constructor;
 200 | 			}
 201 | 			
 202 | 			// Type should inherit from Backbone.RelationalModel.
 203 | 			if ( type.prototype instanceof Backbone.RelationalModel.prototype.constructor ) {
 204 | 				coll = new Backbone.Collection();
 205 | 				coll.model = type;
 206 | 				
 207 | 				this._collections.push( coll );
 208 | 			}
 209 | 			
 210 | 			return coll;
 211 | 		},
 212 | 		
 213 | 		find: function( type, id ) {
 214 | 			var coll = this.getCollection( type );
 215 | 			return coll && coll.get( id );
 216 | 		},
 217 | 		
 218 | 		/**
 219 | 		 * Add a 'model' to it's appropriate collection. Retain the original contents of 'model.collection'.
 220 | 		 * @param {Backbone.RelationalModel} model
 221 | 		 */
 222 | 		register: function( model ) {
 223 | 			var modelColl = model.collection;
 224 | 			var coll = this.getCollection( model );
 225 | 			coll && coll.add( model );
 226 | 			model.bind( 'destroy', this.unregister, this );
 227 | 			model.collection = modelColl;
 228 | 		},
 229 | 		
 230 | 		/**
 231 | 		 * Explicitly update a model's id in it's store collection
 232 | 		 * @param {Backbone.RelationalModel} model
 233 | 		 */
 234 | 		update: function( model ) {
 235 | 			var coll = this.getCollection( model );
 236 | 			coll._onModelEvent( 'change:' + model.idAttribute, model, coll );
 237 | 		},
 238 | 		
 239 | 		/**
 240 | 		 * Remove a 'model' from the store.
 241 | 		 * @param {Backbone.RelationalModel} model
 242 | 		 */
 243 | 		unregister: function( model ) {
 244 | 			model.unbind( 'destroy', this.unregister );
 245 | 			var coll = this.getCollection( model );
 246 | 			coll && coll.remove( model );
 247 | 		}
 248 | 	});
 249 | 	Backbone.Relational.store = new Backbone.Store();
 250 | 	
 251 | 	/**
 252 | 	 * The main Relation class, from which 'HasOne' and 'HasMany' inherit. Internally, 'relational:<key>' events
 253 | 	 * are used to regulate addition and removal of models from relations.
 254 | 	 *
 255 | 	 * @param {Backbone.RelationalModel} instance
 256 | 	 * @param {object} options
 257 | 	 * @param {string} options.key
 258 | 	 * @param {Backbone.RelationalModel.constructor} options.relatedModel
 259 | 	 * @param {Boolean|String} [options.includeInJSON=true] Serialize the given attribute for related model(s)' in toJSON,  or just their ids.
 260 | 	 * @param {Boolean} [options.createModels=true] Create objects from the contents of keys if the object is not found in Backbone.store.
 261 | 	 * @param {object} [options.reverseRelation] Specify a bi-directional relation. If provided, Relation will reciprocate
 262 | 	 *    the relation to the 'relatedModel'. Required and optional properties match 'options', except that it also needs
 263 | 	 *    {Backbone.Relation|String} type ('HasOne' or 'HasMany').
 264 | 	 */
 265 | 	Backbone.Relation = function( instance, options ) {
 266 | 		this.instance = instance;
 267 | 		// Make sure 'options' is sane, and fill with defaults from subclasses and this object's prototype
 268 | 		options = ( typeof options === 'object' && options ) || {};
 269 | 		this.reverseRelation = _.defaults( options.reverseRelation || {}, this.options.reverseRelation );
 270 | 		this.reverseRelation.type = !_.isString( this.reverseRelation.type ) ? this.reverseRelation.type :
 271 | 			Backbone[ this.reverseRelation.type ] || Backbone.Relational.store.getObjectByName( this.reverseRelation.type );
 272 | 		this.model = options.model || this.instance.constructor;
 273 | 		this.options = _.defaults( options, this.options, Backbone.Relation.prototype.options );
 274 | 		
 275 | 		this.key = this.options.key;
 276 | 		this.keySource = this.options.keySource || this.key;
 277 | 
 278 | 		// 'exports' should be the global object where 'relatedModel' can be found on if given as a string.
 279 | 		this.relatedModel = this.options.relatedModel;
 280 | 		if ( _.isString( this.relatedModel ) ) {
 281 | 			this.relatedModel = Backbone.Relational.store.getObjectByName( this.relatedModel );
 282 | 		}
 283 | 
 284 | 		if ( !this.checkPreconditions() ) {
 285 | 			return false;
 286 | 		}
 287 | 
 288 | 		if ( instance ) {
 289 | 			this.keyContents = this.instance.get( this.keySource );
 290 | 
 291 | 			// Explicitly clear 'keySource', to prevent a leaky abstraction if 'keySource' differs from 'key'.
 292 | 			if ( this.key !== this.keySource ) {
 293 | 				this.instance.unset( this.keySource, { silent: true } );
 294 | 			}
 295 | 
 296 | 			// Add this Relation to instance._relations
 297 | 			this.instance._relations.push( this );
 298 | 		}
 299 | 
 300 | 		// Add the reverse relation on 'relatedModel' to the store's reverseRelations
 301 | 		if ( !this.options.isAutoRelation && this.reverseRelation.type && this.reverseRelation.key ) {
 302 | 			Backbone.Relational.store.addReverseRelation( _.defaults( {
 303 | 					isAutoRelation: true,
 304 | 					model: this.relatedModel,
 305 | 					relatedModel: this.model,
 306 | 					reverseRelation: this.options // current relation is the 'reverseRelation' for it's own reverseRelation
 307 | 				},
 308 | 				this.reverseRelation // Take further properties from this.reverseRelation (type, key, etc.)
 309 | 			) );
 310 | 		}
 311 | 
 312 | 		_.bindAll( this, '_modelRemovedFromCollection', '_relatedModelAdded', '_relatedModelRemoved' );
 313 | 
 314 | 		if( instance ) {
 315 | 			this.initialize();
 316 | 
 317 | 			// When a model in the store is destroyed, check if it is 'this.instance'.
 318 | 			Backbone.Relational.store.getCollection( this.instance )
 319 | 				.bind( 'relational:remove', this._modelRemovedFromCollection );
 320 | 
 321 | 			// When 'relatedModel' are created or destroyed, check if it affects this relation.
 322 | 			Backbone.Relational.store.getCollection( this.relatedModel )
 323 | 				.bind( 'relational:add', this._relatedModelAdded )
 324 | 				.bind( 'relational:remove', this._relatedModelRemoved );
 325 | 		}
 326 | 	};
 327 | 	// Fix inheritance :\
 328 | 	Backbone.Relation.extend = Backbone.Model.extend;
 329 | 	// Set up all inheritable **Backbone.Relation** properties and methods.
 330 | 	_.extend( Backbone.Relation.prototype, Backbone.Events, Backbone.Semaphore, {
 331 | 		options: {
 332 | 			createModels: true,
 333 | 			includeInJSON: true,
 334 | 			isAutoRelation: false
 335 | 		},
 336 | 		
 337 | 		instance: null,
 338 | 		key: null,
 339 | 		keyContents: null,
 340 | 		relatedModel: null,
 341 | 		reverseRelation: null,
 342 | 		related: null,
 343 | 		
 344 | 		_relatedModelAdded: function( model, coll, options ) {
 345 | 			// Allow 'model' to set up it's relations, before calling 'tryAddRelated'
 346 | 			// (which can result in a call to 'addRelated' on a relation of 'model')
 347 | 			var dit = this;
 348 | 			model.queue( function() {
 349 | 				dit.tryAddRelated( model, options );
 350 | 			});
 351 | 		},
 352 | 		
 353 | 		_relatedModelRemoved: function( model, coll, options ) {
 354 | 			this.removeRelated( model, options );
 355 | 		},
 356 | 		
 357 | 		_modelRemovedFromCollection: function( model ) {
 358 | 			if ( model === this.instance ) {
 359 | 				this.destroy();
 360 | 			}
 361 | 		},
 362 | 		
 363 | 		/**
 364 | 		 * Check several pre-conditions.
 365 | 		 * @return {Boolean} True if pre-conditions are satisfied, false if they're not.
 366 | 		 */
 367 | 		checkPreconditions: function() {
 368 | 			var i = this.instance,
 369 | 				k = this.key,
 370 | 				m = this.model,
 371 | 				rm = this.relatedModel,
 372 | 				warn = Backbone.Relational.showWarnings && typeof console !== 'undefined';
 373 | 
 374 | 			if ( !m || !k || !rm ) {
 375 | 				warn && console.warn( 'Relation=%o; no model, key or relatedModel (%o, %o, %o)', this, m, k, rm );
 376 | 				return false;
 377 | 			}
 378 | 			// Check if the type in 'relatedModel' inherits from Backbone.RelationalModel
 379 | 			if ( !( m.prototype instanceof Backbone.RelationalModel.prototype.constructor ) ) {
 380 | 				warn && console.warn( 'Relation=%o; model does not inherit from Backbone.RelationalModel (%o)', this, i );
 381 | 				return false;
 382 | 			}
 383 | 			// Check if the type in 'relatedModel' inherits from Backbone.RelationalModel
 384 | 			if ( !( rm.prototype instanceof Backbone.RelationalModel.prototype.constructor ) ) {
 385 | 				warn && console.warn( 'Relation=%o; relatedModel does not inherit from Backbone.RelationalModel (%o)', this, rm );
 386 | 				return false;
 387 | 			}
 388 | 			// Check if this is not a HasMany, and the reverse relation is HasMany as well
 389 | 			if ( this instanceof Backbone.HasMany && this.reverseRelation.type === Backbone.HasMany.prototype.constructor ) {
 390 | 				warn && console.warn( 'Relation=%o; relation is a HasMany, and the reverseRelation is HasMany as well.', this );
 391 | 				return false;
 392 | 			}
 393 | 
 394 | 			// Check if we're not attempting to create a duplicate relationship
 395 | 			if( i && i._relations.length ) {
 396 | 				var exists = _.any( i._relations, function( rel ) {
 397 | 					var hasReverseRelation = this.reverseRelation.key && rel.reverseRelation.key;
 398 | 					return rel.relatedModel === rm && rel.key === k &&
 399 | 						( !hasReverseRelation || this.reverseRelation.key === rel.reverseRelation.key );
 400 | 				}, this );
 401 | 
 402 | 				if ( exists ) {
 403 | 					warn && console.warn( 'Relation=%o between instance=%o.%s and relatedModel=%o.%s already exists',
 404 | 						this, i, k, rm, this.reverseRelation.key );
 405 | 					return false;
 406 | 				}
 407 | 			}
 408 | 
 409 | 			return true;
 410 | 		},
 411 | 
 412 | 		/**
 413 | 		 * Set the related model(s) for this relation
 414 | 		 * @param {Backbone.Mode|Backbone.Collection} related
 415 | 		 * @param {Object} [options]
 416 | 		 */
 417 | 		setRelated: function( related, options ) {
 418 | 			this.related = related;
 419 | 
 420 | 			this.instance.acquire();
 421 | 			this.instance.set( this.key, related, _.defaults( options || {}, { silent: true } ) );
 422 | 			this.instance.release();
 423 | 		},
 424 | 		
 425 | 		createModel: function( item ) {
 426 | 			if ( this.options.createModels && typeof( item ) === 'object' ) {
 427 | 				return new this.relatedModel( item );
 428 | 			}
 429 | 		},
 430 | 		
 431 | 		/**
 432 | 		 * Determine if a relation (on a different RelationalModel) is the reverse
 433 | 		 * relation of the current one.
 434 | 		 * @param {Backbone.Relation} relation
 435 | 		 */
 436 | 		_isReverseRelation: function( relation ) {
 437 | 			if ( relation.instance instanceof this.relatedModel && this.reverseRelation.key === relation.key &&
 438 | 					this.key === relation.reverseRelation.key ) {
 439 | 				return true;
 440 | 			}
 441 | 			return false;
 442 | 		},
 443 | 		
 444 | 		/**
 445 | 		 * Get the reverse relations (pointing back to 'this.key' on 'this.instance') for the currently related model(s).
 446 | 		 * @param {Backbone.RelationalModel} [model] Get the reverse relations for a specific model.
 447 | 		 *    If not specified, 'this.related' is used.
 448 | 		 */
 449 | 		getReverseRelations: function( model ) {
 450 | 			var reverseRelations = [];
 451 | 			// Iterate over 'model', 'this.related.models' (if this.related is a Backbone.Collection), or wrap 'this.related' in an array.
 452 | 			var models = !_.isUndefined( model ) ? [ model ] : this.related && ( this.related.models || [ this.related ] );
 453 | 			_.each( models , function( related ) {
 454 | 				_.each( related.getRelations(), function( relation ) {
 455 | 					if ( this._isReverseRelation( relation ) ) {
 456 | 						reverseRelations.push( relation );
 457 | 					}
 458 | 				}, this );
 459 | 			}, this );
 460 | 			
 461 | 			return reverseRelations;
 462 | 		},
 463 | 		
 464 | 		/**
 465 | 		 * Rename options.silent, so add/remove events propagate properly.
 466 | 		 * (for example in HasMany, from 'addRelated'->'handleAddition')
 467 | 		 * @param {Object} [options]
 468 | 		 */
 469 | 		sanitizeOptions: function( options ) {
 470 | 			options || ( options = {} );
 471 | 			if ( options.silent ) {
 472 | 				options = _.extend( {}, options, { silentChange: true } );
 473 | 				delete options.silent;
 474 | 			}
 475 | 			return options;
 476 | 		},
 477 | 		
 478 | 		// Cleanup. Get reverse relation, call removeRelated on each.
 479 | 		destroy: function() {
 480 | 			Backbone.Relational.store.getCollection( this.instance )
 481 | 				.unbind( 'relational:remove', this._modelRemovedFromCollection );
 482 | 			
 483 | 			Backbone.Relational.store.getCollection( this.relatedModel )
 484 | 				.unbind( 'relational:add', this._relatedModelAdded )
 485 | 				.unbind( 'relational:remove', this._relatedModelRemoved );
 486 | 			
 487 | 			_.each( this.getReverseRelations(), function( relation ) {
 488 | 					relation.removeRelated( this.instance );
 489 | 				}, this );
 490 | 		}
 491 | 	});
 492 | 	
 493 | 	Backbone.HasOne = Backbone.Relation.extend({
 494 | 		options: {
 495 | 			reverseRelation: { type: 'HasMany' }
 496 | 		},
 497 | 		
 498 | 		initialize: function() {
 499 | 			_.bindAll( this, 'onChange' );
 500 | 
 501 | 			this.instance.bind( 'relational:change:' + this.key, this.onChange );
 502 | 
 503 | 			var model = this.findRelated( { silent: true } );
 504 | 			this.setRelated( model );
 505 | 
 506 | 			// Notify new 'related' object of the new relation.
 507 | 			var dit = this;
 508 | 			_.each( dit.getReverseRelations(), function( relation ) {
 509 | 				relation.addRelated( dit.instance );
 510 | 			} );
 511 | 		},
 512 | 		
 513 | 		findRelated: function( options ) {
 514 | 			var item = this.keyContents;
 515 | 			var model = null;
 516 | 			
 517 | 			if ( item instanceof this.relatedModel ) {
 518 | 				model = item;
 519 | 			}
 520 | 			else if ( item && ( _.isString( item ) || _.isNumber( item ) || typeof( item ) === 'object' ) ) {
 521 | 				// Try to find an instance of the appropriate 'relatedModel' in the store, or create it
 522 | 				var id = _.isString( item ) || _.isNumber( item ) ? item : item[ this.relatedModel.prototype.idAttribute ];
 523 | 				model = Backbone.Relational.store.find( this.relatedModel, id );
 524 | 				if ( model && _.isObject( item ) ) {
 525 | 					model.set( item, options );
 526 | 				}
 527 | 				else if ( !model ) {
 528 | 					model = this.createModel( item );
 529 | 				}
 530 | 			}
 531 | 			
 532 | 			return model;
 533 | 		},
 534 | 		
 535 | 		/**
 536 | 		 * If the key is changed, notify old & new reverse relations and initialize the new relation
 537 | 		 */
 538 | 		onChange: function( model, attr, options ) {
 539 | 			// Don't accept recursive calls to onChange (like onChange->findRelated->createModel->initializeRelations->addRelated->onChange)
 540 | 			if ( this.isLocked() ) {
 541 | 				return;
 542 | 			}
 543 | 			this.acquire();
 544 | 			options = this.sanitizeOptions( options );
 545 | 			
 546 | 			// 'options._related' is set by 'addRelated'/'removeRelated'. If it is set, the change
 547 | 			// is the result of a call from a relation. If it's not, the change is the result of 
 548 | 			// a 'set' call on this.instance.
 549 | 			var changed = _.isUndefined( options._related );
 550 | 			var oldRelated = changed ? this.related : options._related;
 551 | 			
 552 | 			if ( changed ) {	
 553 | 				this.keyContents = attr;
 554 | 				
 555 | 				// Set new 'related'
 556 | 				if ( attr instanceof this.relatedModel ) {
 557 | 					this.related = attr;
 558 | 				}
 559 | 				else if ( attr ) {
 560 | 					var related = this.findRelated( options );
 561 | 					this.setRelated( related );
 562 | 				}
 563 | 				else {
 564 | 					this.setRelated( null );
 565 | 				}
 566 | 			}
 567 | 			
 568 | 			// Notify old 'related' object of the terminated relation
 569 | 			if ( oldRelated && this.related !== oldRelated ) {
 570 | 				_.each( this.getReverseRelations( oldRelated ), function( relation ) {
 571 | 						relation.removeRelated( this.instance, options );
 572 | 					}, this );
 573 | 			}
 574 | 			
 575 | 			// Notify new 'related' object of the new relation. Note we do re-apply even if this.related is oldRelated;
 576 | 			// that can be necessary for bi-directional relations if 'this.instance' was created after 'this.related'.
 577 | 			// In that case, 'this.instance' will already know 'this.related', but the reverse might not exist yet.
 578 | 			_.each( this.getReverseRelations(), function( relation ) {
 579 | 					relation.addRelated( this.instance, options );
 580 | 				}, this);
 581 | 			
 582 | 			// Fire the 'update:<key>' event if 'related' was updated
 583 | 			if ( !options.silentChange && this.related !== oldRelated ) {
 584 | 				var dit = this;
 585 | 				Backbone.Relational.eventQueue.add( function() {
 586 | 					dit.instance.trigger( 'update:' + dit.key, dit.instance, dit.related, options );
 587 | 				});
 588 | 			}
 589 | 			this.release();
 590 | 		},
 591 | 		
 592 | 		/**
 593 | 		 * If a new 'this.relatedModel' appears in the 'store', try to match it to the last set 'keyContents'
 594 | 		 */
 595 | 		tryAddRelated: function( model, options ) {
 596 | 			if ( this.related ) {
 597 | 				return;
 598 | 			}
 599 | 			options = this.sanitizeOptions( options );
 600 | 			
 601 | 			var item = this.keyContents;
 602 | 			if ( item && ( _.isString( item ) || _.isNumber( item ) || typeof( item ) === 'object' ) ) {
 603 | 				var id = _.isString( item ) || _.isNumber( item ) ? item : item[ this.relatedModel.prototype.idAttribute ];
 604 | 				if ( model.id === id ) {
 605 | 					this.addRelated( model, options );
 606 | 				}
 607 | 			}
 608 | 		},
 609 | 		
 610 | 		addRelated: function( model, options ) {
 611 | 			if ( model !== this.related ) {
 612 | 				var oldRelated = this.related || null;
 613 | 				this.setRelated( model );
 614 | 				this.onChange( this.instance, model, { _related: oldRelated } );
 615 | 			}
 616 | 		},
 617 | 		
 618 | 		removeRelated: function( model, options ) {
 619 | 			if ( !this.related ) {
 620 | 				return;
 621 | 			}
 622 | 			
 623 | 			if ( model === this.related ) {
 624 | 				var oldRelated = this.related || null;
 625 | 				this.setRelated( null );
 626 | 				this.onChange( this.instance, model, { _related: oldRelated } );
 627 | 			}
 628 | 		}
 629 | 	});
 630 | 	
 631 | 	Backbone.HasMany = Backbone.Relation.extend({
 632 | 		collectionType: null,
 633 | 		
 634 | 		options: {
 635 | 			reverseRelation: { type: 'HasOne' },
 636 | 			collectionType: Backbone.Collection,
 637 | 			collectionKey: true
 638 | 		},
 639 | 		
 640 | 		initialize: function() {
 641 | 			_.bindAll( this, 'onChange', 'handleAddition', 'handleRemoval', 'handleReset' );
 642 | 			this.instance.bind( 'relational:change:' + this.key, this.onChange );
 643 | 			
 644 | 			// Handle a custom 'collectionType'
 645 | 			this.collectionType = this.options.collectionType;
 646 | 			if ( _( this.collectionType ).isString() ) {
 647 | 				this.collectionType = Backbone.Relational.store.getObjectByName( this.collectionType );
 648 | 			}
 649 | 			if ( !this.collectionType.prototype instanceof Backbone.Collection.prototype.constructor ){
 650 | 				throw new Error( 'collectionType must inherit from Backbone.Collection' );
 651 | 			}
 652 | 			
 653 | 			this.setRelated( this.prepareCollection( new this.collectionType() ) );
 654 | 			this.findRelated( { silent: true } );
 655 | 		},
 656 | 		
 657 | 		prepareCollection: function( collection ) {
 658 | 			if ( this.related ) {
 659 | 				this.related
 660 | 					.unbind( 'relational:add', this.handleAddition )
 661 | 					.unbind( 'relational:remove', this.handleRemoval )
 662 | 					.unbind( 'relational:reset', this.handleReset )
 663 | 			}
 664 | 			
 665 | 			collection.reset();
 666 | 			collection.model = this.relatedModel;
 667 | 			
 668 | 			if ( this.options.collectionKey ) {
 669 | 				var key = this.options.collectionKey === true ? this.options.reverseRelation.key : this.options.collectionKey;
 670 | 				
 671 | 				if (collection[ key ] && collection[ key ] !== this.instance ) {
 672 | 					if ( Backbone.Relational.showWarnings && typeof console !== 'undefined' ) {
 673 | 						console.warn( 'Relation=%o; collectionKey=%s already exists on collection=%o', this, key, this.options.collectionKey );
 674 | 					}
 675 | 				}
 676 | 				else {
 677 | 					collection[ key ] = this.instance;
 678 | 				}
 679 | 			}
 680 | 			
 681 | 			collection
 682 | 				.bind( 'relational:add', this.handleAddition )
 683 | 				.bind( 'relational:remove', this.handleRemoval )
 684 | 				.bind( 'relational:reset', this.handleReset );
 685 | 			
 686 | 			return collection;
 687 | 		},
 688 | 		
 689 | 		findRelated: function( options ) {
 690 | 			if ( this.keyContents ) {
 691 | 				// Handle cases the an API/user supplies just an Object/id instead of an Array
 692 | 				this.keyContents = _.isArray( this.keyContents ) ? this.keyContents : [ this.keyContents ];
 693 | 
 694 | 				// Try to find instances of the appropriate 'relatedModel' in the store
 695 | 				_.each( this.keyContents, function( item ) {
 696 | 					var id = _.isString( item ) || _.isNumber( item ) ? item : item[ this.relatedModel.prototype.idAttribute ];
 697 | 					
 698 | 					var model = Backbone.Relational.store.find( this.relatedModel, id );
 699 | 					if ( model && _.isObject( item ) ) {
 700 | 						model.set( item, options );
 701 | 					}
 702 | 					else if ( !model ) {
 703 | 						model = this.createModel( item );
 704 | 					}
 705 | 					
 706 | 					if ( model && !this.related.getByCid( model ) && !this.related.get( model ) ) {
 707 | 						this.related.add( model );
 708 | 					}
 709 | 				}, this);
 710 | 			}
 711 | 		},
 712 | 		
 713 | 		/**
 714 | 		 * If the key is changed, notify old & new reverse relations and initialize the new relation
 715 | 		 */
 716 | 		onChange: function( model, attr, options ) {
 717 | 			options = this.sanitizeOptions( options );
 718 | 			this.keyContents = attr;
 719 | 			
 720 | 			// Notify old 'related' object of the terminated relation
 721 | 			_.each( this.getReverseRelations(), function( relation ) {
 722 | 					relation.removeRelated( this.instance, options );
 723 | 				}, this );
 724 | 			
 725 | 			// Replace 'this.related' by 'attr' if it is a Backbone.Collection
 726 | 			if ( attr instanceof Backbone.Collection ) {
 727 | 				this.prepareCollection( attr );
 728 | 				this.related = attr;
 729 | 			}
 730 | 			// Otherwise, 'attr' should be an array of related object ids.
 731 | 			// Re-use the current 'this.related' if it is a Backbone.Collection.
 732 | 			else {
 733 | 				var coll = this.related instanceof Backbone.Collection ? this.related : new this.collectionType();
 734 | 				this.setRelated( this.prepareCollection( coll ) );
 735 | 				this.findRelated( options );
 736 | 			}
 737 | 			
 738 | 			// Notify new 'related' object of the new relation
 739 | 			_.each( this.getReverseRelations(), function( relation ) {
 740 | 					relation.addRelated( this.instance, options );
 741 | 				}, this );
 742 | 			
 743 | 			var dit = this;
 744 | 			Backbone.Relational.eventQueue.add( function() {
 745 | 				!options.silentChange && dit.instance.trigger( 'update:' + dit.key, dit.instance, dit.related, options );
 746 | 			});
 747 | 		},
 748 | 		
 749 | 		tryAddRelated: function( model, options ) {
 750 | 			options = this.sanitizeOptions( options );
 751 | 			if ( !this.related.getByCid( model ) && !this.related.get( model ) ) {
 752 | 				// Check if this new model was specified in 'this.keyContents'
 753 | 				var item = _.any( this.keyContents, function( item ) {
 754 | 					var id = _.isString( item ) || _.isNumber( item ) ? item : item[ this.relatedModel.prototype.idAttribute ];
 755 | 					return id && id === model.id;
 756 | 				}, this );
 757 | 				
 758 | 				if ( item ) {
 759 | 					this.related.add( model, options );
 760 | 				}
 761 | 			}
 762 | 		},
 763 | 		
 764 | 		/**
 765 | 		 * When a model is added to a 'HasMany', trigger 'add' on 'this.instance' and notify reverse relations.
 766 | 		 * (should be 'HasOne', must set 'this.instance' as their related).
 767 | 		 */
 768 | 		handleAddition: function( model, coll, options ) {
 769 | 			//console.debug('handleAddition called; args=%o', arguments);
 770 | 			// Make sure the model is in fact a valid model before continuing.
 771 | 			// (it can be invalid as a result of failing validation in Backbone.Collection._prepareModel)
 772 | 			if( !( model instanceof Backbone.Model ) ) {
 773 | 				return;
 774 | 			}
 775 | 			
 776 | 			options = this.sanitizeOptions( options );
 777 | 			
 778 | 			_.each( this.getReverseRelations( model ), function( relation ) {
 779 | 					relation.addRelated( this.instance, options );
 780 | 				}, this );
 781 | 
 782 | 			// Only trigger 'add' once the newly added model is initialized (so, has it's relations set up)
 783 | 			var dit = this;
 784 | 			Backbone.Relational.eventQueue.add( function() {
 785 | 				!options.silentChange && dit.instance.trigger( 'add:' + dit.key, model, dit.related, options );
 786 | 			});
 787 | 		},
 788 | 		
 789 | 		/**
 790 | 		 * When a model is removed from a 'HasMany', trigger 'remove' on 'this.instance' and notify reverse relations.
 791 | 		 * (should be 'HasOne', which should be nullified)
 792 | 		 */
 793 | 		handleRemoval: function( model, coll, options ) {
 794 | 			//console.debug('handleRemoval called; args=%o', arguments);
 795 | 			if( !( model instanceof Backbone.Model ) ) {
 796 | 				return;
 797 | 			}
 798 | 
 799 | 			options = this.sanitizeOptions( options );
 800 | 			
 801 | 			_.each( this.getReverseRelations( model ), function( relation ) {
 802 | 					relation.removeRelated( this.instance, options );
 803 | 				}, this );
 804 | 			
 805 | 			var dit = this;
 806 | 			Backbone.Relational.eventQueue.add( function() {
 807 | 				!options.silentChange && dit.instance.trigger( 'remove:' + dit.key, model, dit.related, options );
 808 | 			});
 809 | 		},
 810 | 
 811 | 		handleReset: function( coll, options ) {
 812 | 			options = this.sanitizeOptions( options );
 813 | 
 814 | 			var dit = this;
 815 | 			Backbone.Relational.eventQueue.add( function() {
 816 | 				!options.silentChange && dit.instance.trigger( 'reset:' + dit.key, dit.related, options );
 817 | 			});
 818 | 		},
 819 | 		
 820 | 		addRelated: function( model, options ) {
 821 | 			var dit = this;
 822 | 			model.queue( function() { // Queued to avoid errors for adding 'model' to the 'this.related' set twice
 823 | 				if ( dit.related && !dit.related.getByCid( model ) && !dit.related.get( model ) ) {
 824 | 					dit.related.add( model, options );
 825 | 				}
 826 | 			});
 827 | 		},
 828 | 		
 829 | 		removeRelated: function( model, options ) {
 830 | 			if ( this.related.getByCid( model ) || this.related.get( model ) ) {
 831 | 				this.related.remove( model, options );
 832 | 			}
 833 | 		}
 834 | 	});
 835 | 	
 836 | 	/**
 837 | 	 * A type of Backbone.Model that also maintains relations to other models and collections.
 838 | 	 * New events when compared to the original:
 839 | 	 *  - 'add:<key>' (model, related collection, options)
 840 | 	 *  - 'remove:<key>' (model, related collection, options)
 841 | 	 *  - 'update:<key>' (model, related model or collection, options)
 842 | 	 */
 843 | 	Backbone.RelationalModel = Backbone.Model.extend({
 844 | 		relations: null, // Relation descriptions on the prototype
 845 | 		_relations: null, // Relation instances
 846 | 		_isInitialized: false,
 847 | 		_deferProcessing: false,
 848 | 		_queue: null,
 849 | 		
 850 | 		constructor: function( attributes, options ) {
 851 | 			// Nasty hack, for cases like 'model.get( <HasMany key> ).add( item )'.
 852 | 			// Defer 'processQueue', so that when 'Relation.createModels' is used we:
 853 | 			// a) Survive 'Backbone.Collection.add'; this takes care we won't error on "can't add model to a set twice"
 854 | 			//    (by creating a model from properties, having the model add itself to the collection via one of
 855 | 			//    it's relations, then trying to add it to the collection).
 856 | 			// b) Trigger 'HasMany' collection events only after the model is really fully set up.
 857 | 			// Example that triggers both a and b: "p.get('jobs').add( { company: c, person: p } )".
 858 | 			var dit = this;
 859 | 			if ( options && options.collection ) {
 860 | 				this._deferProcessing = true;
 861 | 				
 862 | 				var processQueue = function( model ) {
 863 | 					if ( model === dit ) {
 864 | 						dit._deferProcessing = false;
 865 | 						dit.processQueue();
 866 | 						options.collection.unbind( 'relational:add', processQueue );
 867 | 					}
 868 | 				};
 869 | 				options.collection.bind( 'relational:add', processQueue );
 870 | 				
 871 | 				// So we do process the queue eventually, regardless of whether this model really gets added to 'options.collection'.
 872 | 				_.defer( function() {
 873 | 					processQueue( dit );
 874 | 				});
 875 | 			}
 876 | 			
 877 | 			this._queue = new Backbone.BlockingQueue();
 878 | 			this._queue.block();
 879 | 			Backbone.Relational.eventQueue.block();
 880 | 			
 881 | 			Backbone.Model.prototype.constructor.apply( this, arguments );
 882 | 			
 883 | 			// Try to run the global queue holding external events
 884 | 			Backbone.Relational.eventQueue.unblock();
 885 | 		},
 886 | 		
 887 | 		/**
 888 | 		 * Override 'trigger' to queue 'change' and 'change:*' events
 889 | 		 */
 890 | 		trigger: function( eventName ) {
 891 | 			if ( eventName.length > 5 && 'change' === eventName.substr( 0, 6 ) ) {
 892 | 				var dit = this, args = arguments;
 893 | 				Backbone.Relational.eventQueue.add( function() {
 894 | 						Backbone.Model.prototype.trigger.apply( dit, args );
 895 | 					});
 896 | 			}
 897 | 			else {
 898 | 				Backbone.Model.prototype.trigger.apply( this, arguments );
 899 | 			}
 900 | 			
 901 | 			return this;
 902 | 		},
 903 | 		
 904 | 		/**
 905 | 		 * Initialize Relations present in this.relations; determine the type (HasOne/HasMany), then creates a new instance.
 906 | 		 * Invoked in the first call so 'set' (which is made from the Backbone.Model constructor).
 907 | 		 */
 908 | 		initializeRelations: function() {
 909 | 			this.acquire(); // Setting up relations often also involve calls to 'set', and we only want to enter this function once
 910 | 			this._relations = [];
 911 | 			
 912 | 			_.each( this.relations, function( rel ) {
 913 | 					var type = !_.isString( rel.type ) ? rel.type :	Backbone[ rel.type ] || Backbone.Relational.store.getObjectByName( rel.type );
 914 | 					if ( type && type.prototype instanceof Backbone.Relation.prototype.constructor ) {
 915 | 						new type( this, rel ); // Also pushes the new Relation into _relations
 916 | 					}
 917 | 					else {
 918 | 						Backbone.Relational.showWarnings && typeof console !== 'undefined' && console.warn( 'Relation=%o; missing or invalid type!', rel );
 919 | 					}
 920 | 				}, this );
 921 | 			
 922 | 			this._isInitialized = true;
 923 | 			this.release();
 924 | 			this.processQueue();
 925 | 		},
 926 | 		
 927 | 		/**
 928 | 		 * When new values are set, notify this model's relations (also if options.silent is set).
 929 | 		 * (Relation.setRelated locks this model before calling 'set' on it to prevent loops)
 930 | 		 */
 931 | 		updateRelations: function( options ) {
 932 | 			if( this._isInitialized && !this.isLocked() ) {
 933 | 				_.each( this._relations, function( rel ) {
 934 | 					var val = this.attributes[ rel.key ];
 935 | 					if ( rel.related !== val ) {
 936 | 						this.trigger('relational:change:' + rel.key, this, val, options || {} );
 937 | 					}
 938 | 				}, this );
 939 | 			}
 940 | 		},
 941 | 		
 942 | 		/**
 943 | 		 * Either add to the queue (if we're not initialized yet), or execute right away.
 944 | 		 */
 945 | 		queue: function( func ) {
 946 | 			this._queue.add( func );
 947 | 		},
 948 | 		
 949 | 		/**
 950 | 		 * Process _queue
 951 | 		 */
 952 | 		processQueue: function() {
 953 | 			if ( this._isInitialized && !this._deferProcessing && this._queue.isBlocked() ) {
 954 | 				this._queue.unblock();
 955 | 			}
 956 | 		},
 957 | 		
 958 | 		/**
 959 | 		 * Get a specific relation.
 960 | 		 * @param key {string} The relation key to look for.
 961 | 		 * @return {Backbone.Relation} An instance of 'Backbone.Relation', if a relation was found for 'key', or null.
 962 | 		 */
 963 | 		getRelation: function( key ) {
 964 | 			return _.detect( this._relations, function( rel ) {
 965 | 				if ( rel.key === key ) {
 966 | 					return true;
 967 | 				}
 968 | 			}, this );
 969 | 		},
 970 | 		
 971 | 		/**
 972 | 		 * Get all of the created relations.
 973 | 		 * @return {Backbone.Relation[]}
 974 | 		 */
 975 | 		getRelations: function() {
 976 | 			return this._relations;
 977 | 		},
 978 | 		
 979 | 		/**
 980 | 		 * Retrieve related objects.
 981 | 		 * @param key {string} The relation key to fetch models for.
 982 | 		 * @param options {object} Options for 'Backbone.Model.fetch' and 'Backbone.sync'.
 983 | 		 * @return {jQuery.when[]} An array of request objects
 984 | 		 */
 985 | 		fetchRelated: function( key, options ) {
 986 | 			options || ( options = {} );
 987 | 			var setUrl,
 988 | 				requests = [],
 989 | 				rel = this.getRelation( key ),
 990 | 				keyContents = rel && rel.keyContents,
 991 | 				toFetch = keyContents && _.select( _.isArray( keyContents ) ? keyContents : [ keyContents ], function( item ) {
 992 | 					var id = _.isString( item ) || _.isNumber( item ) ? item : item[ rel.relatedModel.prototype.idAttribute ];
 993 | 					return id && !Backbone.Relational.store.find( rel.relatedModel, id );
 994 | 				}, this );
 995 | 			
 996 | 			if ( toFetch && toFetch.length ) {
 997 | 				// Create a model for each entry in 'keyContents' that is to be fetched
 998 | 				var models = _.map( toFetch, function( item ) {
 999 | 					var model;
1000 | 
1001 | 					if ( typeof( item ) === 'object' ) {
1002 | 						model = new rel.relatedModel( item );
1003 | 					}
1004 | 					else {
1005 | 						var attrs = {};
1006 | 						attrs[ rel.relatedModel.prototype.idAttribute ] = item;
1007 | 						model = new rel.relatedModel( attrs );
1008 | 					}
1009 | 
1010 | 					return model;
1011 | 				}, this );
1012 | 				
1013 | 				// Try if the 'collection' can provide a url to fetch a set of models in one request.
1014 | 				if ( rel.related instanceof Backbone.Collection && _.isFunction( rel.related.url ) ) {
1015 | 					setUrl = rel.related.url( models );
1016 | 				}
1017 | 				
1018 | 				// An assumption is that when 'Backbone.Collection.url' is a function, it can handle building of set urls.
1019 | 				// To make sure it can, test if the url we got by supplying a list of models to fetch is different from
1020 | 				// the one supplied for the default fetch action (without args to 'url').
1021 | 				if ( setUrl && setUrl !== rel.related.url() ) {
1022 | 					var opts = _.defaults(
1023 | 						{
1024 | 							error: function() {
1025 | 								var args = arguments;
1026 | 								_.each( models, function( model ) {
1027 | 									model.trigger( 'destroy', model, model.collection, options );
1028 | 									options.error && options.error.apply( model, args );
1029 | 								});
1030 | 							},
1031 | 							url: setUrl
1032 | 						},
1033 | 						options,
1034 | 						{ add: true }
1035 | 					);
1036 | 
1037 | 					requests = [ rel.related.fetch( opts ) ];
1038 | 				}
1039 | 				else {
1040 | 					requests = _.map( models, function( model ) {
1041 | 						var opts = _.defaults(
1042 | 							{
1043 | 								error: function() {
1044 | 									model.trigger( 'destroy', model, model.collection, options );
1045 | 									options.error && options.error.apply( model, arguments );
1046 | 								}
1047 | 							},
1048 | 							options
1049 | 						);
1050 | 						return model.fetch( opts );
1051 | 					}, this );
1052 | 				}
1053 | 			}
1054 | 			
1055 | 			return requests;
1056 | 		},
1057 | 		
1058 | 		set: function( key, value, options ) {
1059 | 			Backbone.Relational.eventQueue.block();
1060 | 			
1061 | 			// Duplicate backbone's behavior to allow separate key/value parameters, instead of a single 'attributes' object
1062 | 			var attributes;
1063 | 			if (_.isObject( key ) || key == null) {
1064 | 				attributes = key;
1065 | 				options = value;
1066 | 			}
1067 | 			else {
1068 | 				attributes = {};
1069 | 				attributes[ key ] = value;
1070 | 			}
1071 | 			
1072 | 			var result = Backbone.Model.prototype.set.apply( this, arguments );
1073 | 			
1074 | 			// 'set' is called quite late in 'Backbone.Model.prototype.constructor', but before 'initialize'.
1075 | 			// Ideal place to set up relations :)
1076 | 			if ( !this._isInitialized && !this.isLocked() ) {
1077 | 				Backbone.Relational.store.register( this );
1078 | 				this.initializeRelations();
1079 | 			}
1080 | 			// Update the 'idAttribute' in Backbone.store if; we don't want it to miss an 'id' update due to {silent:true}
1081 | 			else if ( attributes && this.idAttribute in attributes ) {
1082 | 				Backbone.Relational.store.update( this );
1083 | 			}
1084 | 			
1085 | 			if ( attributes ) {
1086 | 				this.updateRelations( options );
1087 | 			}
1088 | 			
1089 | 			// Try to run the global queue holding external events
1090 | 			Backbone.Relational.eventQueue.unblock();
1091 | 			
1092 | 			return result;
1093 | 		},
1094 | 		
1095 | 		unset: function( attribute, options ) {
1096 | 			Backbone.Relational.eventQueue.block();
1097 | 			
1098 | 			var result = Backbone.Model.prototype.unset.apply( this, arguments );
1099 | 			this.updateRelations( options );
1100 | 			
1101 | 			// Try to run the global queue holding external events
1102 | 			Backbone.Relational.eventQueue.unblock();
1103 | 			
1104 | 			return result;
1105 | 		},
1106 | 		
1107 | 		clear: function( options ) {
1108 | 			Backbone.Relational.eventQueue.block();
1109 | 			
1110 | 			var result = Backbone.Model.prototype.clear.apply( this, arguments );
1111 | 			this.updateRelations( options );
1112 | 			
1113 | 			// Try to run the global queue holding external events
1114 | 			Backbone.Relational.eventQueue.unblock();
1115 | 			
1116 | 			return result;
1117 | 		},
1118 | 		
1119 | 		/**
1120 | 		 * Override 'change', so the change will only execute after 'set' has finised (relations are updated),
1121 | 		 * and 'previousAttributes' will be available when the event is fired.
1122 | 		 */
1123 | 		change: function( options ) {
1124 | 			var dit = this;
1125 | 			Backbone.Relational.eventQueue.add( function() {
1126 | 					Backbone.Model.prototype.change.apply( dit, arguments );
1127 | 				});
1128 | 		},
1129 | 
1130 | 		clone: function() {
1131 | 			var attributes = _.clone( this.attributes );
1132 | 			if ( !_.isUndefined( attributes[ this.idAttribute ] ) ) {
1133 | 				attributes[ this.idAttribute ] = null;
1134 | 			}
1135 | 
1136 | 			_.each( this.getRelations(), function( rel ) {
1137 | 				delete attributes[ rel.key ];
1138 | 			});
1139 | 
1140 | 			return new this.constructor( attributes );
1141 | 		},
1142 | 		
1143 | 		/**
1144 | 		 * Convert relations to JSON, omits them when required
1145 | 		 */
1146 | 		toJSON: function() {
1147 | 			// If this Model has already been fully serialized in this branch once, return to avoid loops
1148 | 			if ( this.isLocked() ) {
1149 | 				return this.id;
1150 | 			}
1151 | 			
1152 | 			this.acquire();
1153 | 			var json = Backbone.Model.prototype.toJSON.call( this );
1154 | 			
1155 | 			_.each( this._relations, function( rel ) {
1156 | 				var value = json[ rel.key ];
1157 | 
1158 | 				if ( rel.options.includeInJSON === true && value && _.isFunction( value.toJSON ) ) {
1159 | 					json[ rel.keySource ] = value.toJSON();
1160 | 				}
1161 | 				else if ( _.isString( rel.options.includeInJSON ) ) {
1162 | 					if ( value instanceof Backbone.Collection ) {
1163 | 						json[ rel.keySource ] = value.pluck( rel.options.includeInJSON );
1164 | 					}
1165 | 					else if ( value instanceof Backbone.Model ) {
1166 | 						json[ rel.keySource ] = value.get( rel.options.includeInJSON );
1167 | 					}
1168 | 				}
1169 | 				else {
1170 | 					delete json[ rel.key ];
1171 | 				}
1172 | 
1173 | 				if ( rel.keySource !== rel.key ) {
1174 | 					delete json[ rel.key ];
1175 | 				}
1176 | 			}, this );
1177 | 			
1178 | 			this.release();
1179 | 			return json;
1180 | 		}
1181 | 	});
1182 | 	_.extend( Backbone.RelationalModel.prototype, Backbone.Semaphore );
1183 | 	
1184 | 	/**
1185 | 	 * Override Backbone.Collection.add, so objects fetched from the server multiple times will
1186 | 	 * update the existing Model. Also, trigger 'relational:add'.
1187 | 	 */
1188 | 	var add = Backbone.Collection.prototype.__add = Backbone.Collection.prototype.add;
1189 | 	Backbone.Collection.prototype.add = function( models, options ) {
1190 | 		options || (options = {});
1191 | 		if (!_.isArray( models ) ) {
1192 | 			models = [ models ];
1193 | 		}
1194 | 
1195 | 		//console.debug( 'calling add on coll=%o; model=%o, options=%o', this, models, options );
1196 | 		_.each( models, function( model ) {
1197 | 			if ( !( model instanceof Backbone.Model ) ) {
1198 | 				// Try to find 'model' in Backbone.store. If it already exists, set the new properties on it.
1199 | 				var existingModel = Backbone.Relational.store.find( this.model, model[ this.model.prototype.idAttribute ] );
1200 | 				if ( existingModel ) {
1201 | 					existingModel.set( model, options );
1202 | 					model = existingModel;
1203 | 				}
1204 | 				else {
1205 | 					model = Backbone.Collection.prototype._prepareModel.call( this, model, options );
1206 | 				}
1207 | 			}
1208 | 
1209 | 			if ( model instanceof Backbone.Model && !this.get( model ) && !this.getByCid( model ) ) {
1210 | 				add.call( this, model, options );
1211 | 				this.trigger('relational:add', model, this, options);
1212 | 			}
1213 | 		}, this );
1214 | 		
1215 | 		return this;
1216 | 	};
1217 | 	
1218 | 	/**
1219 | 	 * Override 'Backbone.Collection.remove' to trigger 'relational:remove'.
1220 | 	 */
1221 | 	var remove = Backbone.Collection.prototype.__remove = Backbone.Collection.prototype.remove;
1222 | 	Backbone.Collection.prototype.remove = function( models, options ) {
1223 | 		options || (options = {});
1224 | 		if (!_.isArray( models ) ) {
1225 | 			models = [ models ];
1226 | 		}
1227 | 
1228 | 		//console.debug('calling remove on coll=%o; models=%o, options=%o', this, models, options );
1229 | 		_.each( models, function( model ) {
1230 | 			model = this.getByCid( model ) || this.get( model );
1231 | 
1232 | 			if ( model instanceof Backbone.Model ) {
1233 | 				remove.call( this, model, options );
1234 | 				this.trigger('relational:remove', model, this, options);
1235 | 			}
1236 | 		}, this );
1237 | 		
1238 | 		return this;
1239 | 	};
1240 | 
1241 | 	/**
1242 | 	 * Override 'Backbone.Collection.reset' to trigger 'relational:reset'.
1243 | 	 */
1244 | 	var reset = Backbone.Collection.prototype.__reset = Backbone.Collection.prototype.reset;
1245 | 	Backbone.Collection.prototype.reset = function( models, options ) {
1246 | 		reset.call( this, models, options );
1247 | 		this.trigger( 'relational:reset', models, options );
1248 | 
1249 | 		return this;
1250 | 	};
1251 | 	
1252 | 	/**
1253 | 	 * Override 'Backbone.Collection.trigger' so 'add', 'remove' and 'reset' events are queued until relations
1254 | 	 * are ready.
1255 | 	 */
1256 | 	var trigger = Backbone.Collection.prototype.__trigger = Backbone.Collection.prototype.trigger;
1257 | 	Backbone.Collection.prototype.trigger = function( eventName ) {
1258 | 		if ( eventName === 'add' || eventName === 'remove' || eventName === 'reset' ) {
1259 | 			var dit = this, args = arguments;
1260 | 			Backbone.Relational.eventQueue.add( function() {
1261 | 					trigger.apply( dit, args );
1262 | 				});
1263 | 		}
1264 | 		else {
1265 | 			trigger.apply( this, arguments );
1266 | 		}
1267 | 		
1268 | 		return this;
1269 | 	};
1270 | 
1271 | 	// Override .extend() to check for reverseRelations to initialize.
1272 | 	Backbone.RelationalModel.extend = function( protoProps, classProps ) {
1273 | 		var child = Backbone.Model.extend.apply( this, arguments );
1274 | 
1275 | 		var relations = ( protoProps && protoProps.relations ) || [];
1276 | 		_.each( relations, function( rel ) {
1277 | 			if( rel.reverseRelation ) {
1278 | 				rel.model = child;
1279 | 
1280 | 				var preInitialize = true;
1281 | 				if ( _.isString( rel.relatedModel ) ) {
1282 | 					/**
1283 | 					 * The related model might not be defined for two reasons
1284 | 					 *  1. it never gets defined, e.g. a typo
1285 | 					 *  2. it is related to itself
1286 | 					 * In neither of these cases do we need to pre-initialize reverse relations.
1287 | 					 */
1288 | 					var relatedModel = Backbone.Relational.store.getObjectByName( rel.relatedModel );
1289 | 					preInitialize = relatedModel && ( relatedModel.prototype instanceof Backbone.RelationalModel.prototype.constructor );
1290 | 				}
1291 | 
1292 | 				var type = !_.isString( rel.type ) ? rel.type : Backbone[ rel.type ] || Backbone.Relational.store.getObjectByName( rel.type );
1293 | 				if ( preInitialize && type && type.prototype instanceof Backbone.Relation.prototype.constructor ) {
1294 | 					new type( null, rel );
1295 | 				}
1296 | 			}
1297 | 		});
1298 | 
1299 | 		return child;
1300 | 	};
1301 | 
1302 | })();
1303 | 


--------------------------------------------------------------------------------
/static/js/dist/underscore-1.3.1.js:
--------------------------------------------------------------------------------
   1 | //     Underscore.js 1.3.1
   2 | //     (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc.
   3 | //     Underscore is freely distributable under the MIT license.
   4 | //     Portions of Underscore are inspired or borrowed from Prototype,
   5 | //     Oliver Steele's Functional, and John Resig's Micro-Templating.
   6 | //     For all details and documentation:
   7 | //     http://documentcloud.github.com/underscore
   8 | 
   9 | (function() {
  10 | 
  11 |   // Baseline setup
  12 |   // --------------
  13 | 
  14 |   // Establish the root object, `window` in the browser, or `global` on the server.
  15 |   var root = this;
  16 | 
  17 |   // Save the previous value of the `_` variable.
  18 |   var previousUnderscore = root._;
  19 | 
  20 |   // Establish the object that gets returned to break out of a loop iteration.
  21 |   var breaker = {};
  22 | 
  23 |   // Save bytes in the minified (but not gzipped) version:
  24 |   var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;
  25 | 
  26 |   // Create quick reference variables for speed access to core prototypes.
  27 |   var slice            = ArrayProto.slice,
  28 |       unshift          = ArrayProto.unshift,
  29 |       toString         = ObjProto.toString,
  30 |       hasOwnProperty   = ObjProto.hasOwnProperty;
  31 | 
  32 |   // All **ECMAScript 5** native function implementations that we hope to use
  33 |   // are declared here.
  34 |   var
  35 |     nativeForEach      = ArrayProto.forEach,
  36 |     nativeMap          = ArrayProto.map,
  37 |     nativeReduce       = ArrayProto.reduce,
  38 |     nativeReduceRight  = ArrayProto.reduceRight,
  39 |     nativeFilter       = ArrayProto.filter,
  40 |     nativeEvery        = ArrayProto.every,
  41 |     nativeSome         = ArrayProto.some,
  42 |     nativeIndexOf      = ArrayProto.indexOf,
  43 |     nativeLastIndexOf  = ArrayProto.lastIndexOf,
  44 |     nativeIsArray      = Array.isArray,
  45 |     nativeKeys         = Object.keys,
  46 |     nativeBind         = FuncProto.bind;
  47 | 
  48 |   // Create a safe reference to the Underscore object for use below.
  49 |   var _ = function(obj) { return new wrapper(obj); };
  50 | 
  51 |   // Export the Underscore object for **Node.js**, with
  52 |   // backwards-compatibility for the old `require()` API. If we're in
  53 |   // the browser, add `_` as a global object via a string identifier,
  54 |   // for Closure Compiler "advanced" mode.
  55 |   if (typeof exports !== 'undefined') {
  56 |     if (typeof module !== 'undefined' && module.exports) {
  57 |       exports = module.exports = _;
  58 |     }
  59 |     exports._ = _;
  60 |   } else {
  61 |     root['_'] = _;
  62 |   }
  63 | 
  64 |   // Current version.
  65 |   _.VERSION = '1.3.1';
  66 | 
  67 |   // Collection Functions
  68 |   // --------------------
  69 | 
  70 |   // The cornerstone, an `each` implementation, aka `forEach`.
  71 |   // Handles objects with the built-in `forEach`, arrays, and raw objects.
  72 |   // Delegates to **ECMAScript 5**'s native `forEach` if available.
  73 |   var each = _.each = _.forEach = function(obj, iterator, context) {
  74 |     if (obj == null) return;
  75 |     if (nativeForEach && obj.forEach === nativeForEach) {
  76 |       obj.forEach(iterator, context);
  77 |     } else if (obj.length === +obj.length) {
  78 |       for (var i = 0, l = obj.length; i < l; i++) {
  79 |         if (i in obj && iterator.call(context, obj[i], i, obj) === breaker) return;
  80 |       }
  81 |     } else {
  82 |       for (var key in obj) {
  83 |         if (_.has(obj, key)) {
  84 |           if (iterator.call(context, obj[key], key, obj) === breaker) return;
  85 |         }
  86 |       }
  87 |     }
  88 |   };
  89 | 
  90 |   // Return the results of applying the iterator to each element.
  91 |   // Delegates to **ECMAScript 5**'s native `map` if available.
  92 |   _.map = _.collect = function(obj, iterator, context) {
  93 |     var results = [];
  94 |     if (obj == null) return results;
  95 |     if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context);
  96 |     each(obj, function(value, index, list) {
  97 |       results[results.length] = iterator.call(context, value, index, list);
  98 |     });
  99 |     if (obj.length === +obj.length) results.length = obj.length;
 100 |     return results;
 101 |   };
 102 | 
 103 |   // **Reduce** builds up a single result from a list of values, aka `inject`,
 104 |   // or `foldl`. Delegates to **ECMAScript 5**'s native `reduce` if available.
 105 |   _.reduce = _.foldl = _.inject = function(obj, iterator, memo, context) {
 106 |     var initial = arguments.length > 2;
 107 |     if (obj == null) obj = [];
 108 |     if (nativeReduce && obj.reduce === nativeReduce) {
 109 |       if (context) iterator = _.bind(iterator, context);
 110 |       return initial ? obj.reduce(iterator, memo) : obj.reduce(iterator);
 111 |     }
 112 |     each(obj, function(value, index, list) {
 113 |       if (!initial) {
 114 |         memo = value;
 115 |         initial = true;
 116 |       } else {
 117 |         memo = iterator.call(context, memo, value, index, list);
 118 |       }
 119 |     });
 120 |     if (!initial) throw new TypeError('Reduce of empty array with no initial value');
 121 |     return memo;
 122 |   };
 123 | 
 124 |   // The right-associative version of reduce, also known as `foldr`.
 125 |   // Delegates to **ECMAScript 5**'s native `reduceRight` if available.
 126 |   _.reduceRight = _.foldr = function(obj, iterator, memo, context) {
 127 |     var initial = arguments.length > 2;
 128 |     if (obj == null) obj = [];
 129 |     if (nativeReduceRight && obj.reduceRight === nativeReduceRight) {
 130 |       if (context) iterator = _.bind(iterator, context);
 131 |       return initial ? obj.reduceRight(iterator, memo) : obj.reduceRight(iterator);
 132 |     }
 133 |     var reversed = _.toArray(obj).reverse();
 134 |     if (context && !initial) iterator = _.bind(iterator, context);
 135 |     return initial ? _.reduce(reversed, iterator, memo, context) : _.reduce(reversed, iterator);
 136 |   };
 137 | 
 138 |   // Return the first value which passes a truth test. Aliased as `detect`.
 139 |   _.find = _.detect = function(obj, iterator, context) {
 140 |     var result;
 141 |     any(obj, function(value, index, list) {
 142 |       if (iterator.call(context, value, index, list)) {
 143 |         result = value;
 144 |         return true;
 145 |       }
 146 |     });
 147 |     return result;
 148 |   };
 149 | 
 150 |   // Return all the elements that pass a truth test.
 151 |   // Delegates to **ECMAScript 5**'s native `filter` if available.
 152 |   // Aliased as `select`.
 153 |   _.filter = _.select = function(obj, iterator, context) {
 154 |     var results = [];
 155 |     if (obj == null) return results;
 156 |     if (nativeFilter && obj.filter === nativeFilter) return obj.filter(iterator, context);
 157 |     each(obj, function(value, index, list) {
 158 |       if (iterator.call(context, value, index, list)) results[results.length] = value;
 159 |     });
 160 |     return results;
 161 |   };
 162 | 
 163 |   // Return all the elements for which a truth test fails.
 164 |   _.reject = function(obj, iterator, context) {
 165 |     var results = [];
 166 |     if (obj == null) return results;
 167 |     each(obj, function(value, index, list) {
 168 |       if (!iterator.call(context, value, index, list)) results[results.length] = value;
 169 |     });
 170 |     return results;
 171 |   };
 172 | 
 173 |   // Determine whether all of the elements match a truth test.
 174 |   // Delegates to **ECMAScript 5**'s native `every` if available.
 175 |   // Aliased as `all`.
 176 |   _.every = _.all = function(obj, iterator, context) {
 177 |     var result = true;
 178 |     if (obj == null) return result;
 179 |     if (nativeEvery && obj.every === nativeEvery) return obj.every(iterator, context);
 180 |     each(obj, function(value, index, list) {
 181 |       if (!(result = result && iterator.call(context, value, index, list))) return breaker;
 182 |     });
 183 |     return result;
 184 |   };
 185 | 
 186 |   // Determine if at least one element in the object matches a truth test.
 187 |   // Delegates to **ECMAScript 5**'s native `some` if available.
 188 |   // Aliased as `any`.
 189 |   var any = _.some = _.any = function(obj, iterator, context) {
 190 |     iterator || (iterator = _.identity);
 191 |     var result = false;
 192 |     if (obj == null) return result;
 193 |     if (nativeSome && obj.some === nativeSome) return obj.some(iterator, context);
 194 |     each(obj, function(value, index, list) {
 195 |       if (result || (result = iterator.call(context, value, index, list))) return breaker;
 196 |     });
 197 |     return !!result;
 198 |   };
 199 | 
 200 |   // Determine if a given value is included in the array or object using `===`.
 201 |   // Aliased as `contains`.
 202 |   _.include = _.contains = function(obj, target) {
 203 |     var found = false;
 204 |     if (obj == null) return found;
 205 |     if (nativeIndexOf && obj.indexOf === nativeIndexOf) return obj.indexOf(target) != -1;
 206 |     found = any(obj, function(value) {
 207 |       return value === target;
 208 |     });
 209 |     return found;
 210 |   };
 211 | 
 212 |   // Invoke a method (with arguments) on every item in a collection.
 213 |   _.invoke = function(obj, method) {
 214 |     var args = slice.call(arguments, 2);
 215 |     return _.map(obj, function(value) {
 216 |       return (_.isFunction(method) ? method || value : value[method]).apply(value, args);
 217 |     });
 218 |   };
 219 | 
 220 |   // Convenience version of a common use case of `map`: fetching a property.
 221 |   _.pluck = function(obj, key) {
 222 |     return _.map(obj, function(value){ return value[key]; });
 223 |   };
 224 | 
 225 |   // Return the maximum element or (element-based computation).
 226 |   _.max = function(obj, iterator, context) {
 227 |     if (!iterator && _.isArray(obj)) return Math.max.apply(Math, obj);
 228 |     if (!iterator && _.isEmpty(obj)) return -Infinity;
 229 |     var result = {computed : -Infinity};
 230 |     each(obj, function(value, index, list) {
 231 |       var computed = iterator ? iterator.call(context, value, index, list) : value;
 232 |       computed >= result.computed && (result = {value : value, computed : computed});
 233 |     });
 234 |     return result.value;
 235 |   };
 236 | 
 237 |   // Return the minimum element (or element-based computation).
 238 |   _.min = function(obj, iterator, context) {
 239 |     if (!iterator && _.isArray(obj)) return Math.min.apply(Math, obj);
 240 |     if (!iterator && _.isEmpty(obj)) return Infinity;
 241 |     var result = {computed : Infinity};
 242 |     each(obj, function(value, index, list) {
 243 |       var computed = iterator ? iterator.call(context, value, index, list) : value;
 244 |       computed < result.computed && (result = {value : value, computed : computed});
 245 |     });
 246 |     return result.value;
 247 |   };
 248 | 
 249 |   // Shuffle an array.
 250 |   _.shuffle = function(obj) {
 251 |     var shuffled = [], rand;
 252 |     each(obj, function(value, index, list) {
 253 |       if (index == 0) {
 254 |         shuffled[0] = value;
 255 |       } else {
 256 |         rand = Math.floor(Math.random() * (index + 1));
 257 |         shuffled[index] = shuffled[rand];
 258 |         shuffled[rand] = value;
 259 |       }
 260 |     });
 261 |     return shuffled;
 262 |   };
 263 | 
 264 |   // Sort the object's values by a criterion produced by an iterator.
 265 |   _.sortBy = function(obj, iterator, context) {
 266 |     return _.pluck(_.map(obj, function(value, index, list) {
 267 |       return {
 268 |         value : value,
 269 |         criteria : iterator.call(context, value, index, list)
 270 |       };
 271 |     }).sort(function(left, right) {
 272 |       var a = left.criteria, b = right.criteria;
 273 |       return a < b ? -1 : a > b ? 1 : 0;
 274 |     }), 'value');
 275 |   };
 276 | 
 277 |   // Groups the object's values by a criterion. Pass either a string attribute
 278 |   // to group by, or a function that returns the criterion.
 279 |   _.groupBy = function(obj, val) {
 280 |     var result = {};
 281 |     var iterator = _.isFunction(val) ? val : function(obj) { return obj[val]; };
 282 |     each(obj, function(value, index) {
 283 |       var key = iterator(value, index);
 284 |       (result[key] || (result[key] = [])).push(value);
 285 |     });
 286 |     return result;
 287 |   };
 288 | 
 289 |   // Use a comparator function to figure out at what index an object should
 290 |   // be inserted so as to maintain order. Uses binary search.
 291 |   _.sortedIndex = function(array, obj, iterator) {
 292 |     iterator || (iterator = _.identity);
 293 |     var low = 0, high = array.length;
 294 |     while (low < high) {
 295 |       var mid = (low + high) >> 1;
 296 |       iterator(array[mid]) < iterator(obj) ? low = mid + 1 : high = mid;
 297 |     }
 298 |     return low;
 299 |   };
 300 | 
 301 |   // Safely convert anything iterable into a real, live array.
 302 |   _.toArray = function(iterable) {
 303 |     if (!iterable)                return [];
 304 |     if (iterable.toArray)         return iterable.toArray();
 305 |     if (_.isArray(iterable))      return slice.call(iterable);
 306 |     if (_.isArguments(iterable))  return slice.call(iterable);
 307 |     return _.values(iterable);
 308 |   };
 309 | 
 310 |   // Return the number of elements in an object.
 311 |   _.size = function(obj) {
 312 |     return _.toArray(obj).length;
 313 |   };
 314 | 
 315 |   // Array Functions
 316 |   // ---------------
 317 | 
 318 |   // Get the first element of an array. Passing **n** will return the first N
 319 |   // values in the array. Aliased as `head`. The **guard** check allows it to work
 320 |   // with `_.map`.
 321 |   _.first = _.head = function(array, n, guard) {
 322 |     return (n != null) && !guard ? slice.call(array, 0, n) : array[0];
 323 |   };
 324 | 
 325 |   // Returns everything but the last entry of the array. Especcialy useful on
 326 |   // the arguments object. Passing **n** will return all the values in
 327 |   // the array, excluding the last N. The **guard** check allows it to work with
 328 |   // `_.map`.
 329 |   _.initial = function(array, n, guard) {
 330 |     return slice.call(array, 0, array.length - ((n == null) || guard ? 1 : n));
 331 |   };
 332 | 
 333 |   // Get the last element of an array. Passing **n** will return the last N
 334 |   // values in the array. The **guard** check allows it to work with `_.map`.
 335 |   _.last = function(array, n, guard) {
 336 |     if ((n != null) && !guard) {
 337 |       return slice.call(array, Math.max(array.length - n, 0));
 338 |     } else {
 339 |       return array[array.length - 1];
 340 |     }
 341 |   };
 342 | 
 343 |   // Returns everything but the first entry of the array. Aliased as `tail`.
 344 |   // Especially useful on the arguments object. Passing an **index** will return
 345 |   // the rest of the values in the array from that index onward. The **guard**
 346 |   // check allows it to work with `_.map`.
 347 |   _.rest = _.tail = function(array, index, guard) {
 348 |     return slice.call(array, (index == null) || guard ? 1 : index);
 349 |   };
 350 | 
 351 |   // Trim out all falsy values from an array.
 352 |   _.compact = function(array) {
 353 |     return _.filter(array, function(value){ return !!value; });
 354 |   };
 355 | 
 356 |   // Return a completely flattened version of an array.
 357 |   _.flatten = function(array, shallow) {
 358 |     return _.reduce(array, function(memo, value) {
 359 |       if (_.isArray(value)) return memo.concat(shallow ? value : _.flatten(value));
 360 |       memo[memo.length] = value;
 361 |       return memo;
 362 |     }, []);
 363 |   };
 364 | 
 365 |   // Return a version of the array that does not contain the specified value(s).
 366 |   _.without = function(array) {
 367 |     return _.difference(array, slice.call(arguments, 1));
 368 |   };
 369 | 
 370 |   // Produce a duplicate-free version of the array. If the array has already
 371 |   // been sorted, you have the option of using a faster algorithm.
 372 |   // Aliased as `unique`.
 373 |   _.uniq = _.unique = function(array, isSorted, iterator) {
 374 |     var initial = iterator ? _.map(array, iterator) : array;
 375 |     var result = [];
 376 |     _.reduce(initial, function(memo, el, i) {
 377 |       if (0 == i || (isSorted === true ? _.last(memo) != el : !_.include(memo, el))) {
 378 |         memo[memo.length] = el;
 379 |         result[result.length] = array[i];
 380 |       }
 381 |       return memo;
 382 |     }, []);
 383 |     return result;
 384 |   };
 385 | 
 386 |   // Produce an array that contains the union: each distinct element from all of
 387 |   // the passed-in arrays.
 388 |   _.union = function() {
 389 |     return _.uniq(_.flatten(arguments, true));
 390 |   };
 391 | 
 392 |   // Produce an array that contains every item shared between all the
 393 |   // passed-in arrays. (Aliased as "intersect" for back-compat.)
 394 |   _.intersection = _.intersect = function(array) {
 395 |     var rest = slice.call(arguments, 1);
 396 |     return _.filter(_.uniq(array), function(item) {
 397 |       return _.every(rest, function(other) {
 398 |         return _.indexOf(other, item) >= 0;
 399 |       });
 400 |     });
 401 |   };
 402 | 
 403 |   // Take the difference between one array and a number of other arrays.
 404 |   // Only the elements present in just the first array will remain.
 405 |   _.difference = function(array) {
 406 |     var rest = _.flatten(slice.call(arguments, 1));
 407 |     return _.filter(array, function(value){ return !_.include(rest, value); });
 408 |   };
 409 | 
 410 |   // Zip together multiple lists into a single array -- elements that share
 411 |   // an index go together.
 412 |   _.zip = function() {
 413 |     var args = slice.call(arguments);
 414 |     var length = _.max(_.pluck(args, 'length'));
 415 |     var results = new Array(length);
 416 |     for (var i = 0; i < length; i++) results[i] = _.pluck(args, "" + i);
 417 |     return results;
 418 |   };
 419 | 
 420 |   // If the browser doesn't supply us with indexOf (I'm looking at you, **MSIE**),
 421 |   // we need this function. Return the position of the first occurrence of an
 422 |   // item in an array, or -1 if the item is not included in the array.
 423 |   // Delegates to **ECMAScript 5**'s native `indexOf` if available.
 424 |   // If the array is large and already in sort order, pass `true`
 425 |   // for **isSorted** to use binary search.
 426 |   _.indexOf = function(array, item, isSorted) {
 427 |     if (array == null) return -1;
 428 |     var i, l;
 429 |     if (isSorted) {
 430 |       i = _.sortedIndex(array, item);
 431 |       return array[i] === item ? i : -1;
 432 |     }
 433 |     if (nativeIndexOf && array.indexOf === nativeIndexOf) return array.indexOf(item);
 434 |     for (i = 0, l = array.length; i < l; i++) if (i in array && array[i] === item) return i;
 435 |     return -1;
 436 |   };
 437 | 
 438 |   // Delegates to **ECMAScript 5**'s native `lastIndexOf` if available.
 439 |   _.lastIndexOf = function(array, item) {
 440 |     if (array == null) return -1;
 441 |     if (nativeLastIndexOf && array.lastIndexOf === nativeLastIndexOf) return array.lastIndexOf(item);
 442 |     var i = array.length;
 443 |     while (i--) if (i in array && array[i] === item) return i;
 444 |     return -1;
 445 |   };
 446 | 
 447 |   // Generate an integer Array containing an arithmetic progression. A port of
 448 |   // the native Python `range()` function. See
 449 |   // [the Python documentation](http://docs.python.org/library/functions.html#range).
 450 |   _.range = function(start, stop, step) {
 451 |     if (arguments.length <= 1) {
 452 |       stop = start || 0;
 453 |       start = 0;
 454 |     }
 455 |     step = arguments[2] || 1;
 456 | 
 457 |     var len = Math.max(Math.ceil((stop - start) / step), 0);
 458 |     var idx = 0;
 459 |     var range = new Array(len);
 460 | 
 461 |     while(idx < len) {
 462 |       range[idx++] = start;
 463 |       start += step;
 464 |     }
 465 | 
 466 |     return range;
 467 |   };
 468 | 
 469 |   // Function (ahem) Functions
 470 |   // ------------------
 471 | 
 472 |   // Reusable constructor function for prototype setting.
 473 |   var ctor = function(){};
 474 | 
 475 |   // Create a function bound to a given object (assigning `this`, and arguments,
 476 |   // optionally). Binding with arguments is also known as `curry`.
 477 |   // Delegates to **ECMAScript 5**'s native `Function.bind` if available.
 478 |   // We check for `func.bind` first, to fail fast when `func` is undefined.
 479 |   _.bind = function bind(func, context) {
 480 |     var bound, args;
 481 |     if (func.bind === nativeBind && nativeBind) return nativeBind.apply(func, slice.call(arguments, 1));
 482 |     if (!_.isFunction(func)) throw new TypeError;
 483 |     args = slice.call(arguments, 2);
 484 |     return bound = function() {
 485 |       if (!(this instanceof bound)) return func.apply(context, args.concat(slice.call(arguments)));
 486 |       ctor.prototype = func.prototype;
 487 |       var self = new ctor;
 488 |       var result = func.apply(self, args.concat(slice.call(arguments)));
 489 |       if (Object(result) === result) return result;
 490 |       return self;
 491 |     };
 492 |   };
 493 | 
 494 |   // Bind all of an object's methods to that object. Useful for ensuring that
 495 |   // all callbacks defined on an object belong to it.
 496 |   _.bindAll = function(obj) {
 497 |     var funcs = slice.call(arguments, 1);
 498 |     if (funcs.length == 0) funcs = _.functions(obj);
 499 |     each(funcs, function(f) { obj[f] = _.bind(obj[f], obj); });
 500 |     return obj;
 501 |   };
 502 | 
 503 |   // Memoize an expensive function by storing its results.
 504 |   _.memoize = function(func, hasher) {
 505 |     var memo = {};
 506 |     hasher || (hasher = _.identity);
 507 |     return function() {
 508 |       var key = hasher.apply(this, arguments);
 509 |       return _.has(memo, key) ? memo[key] : (memo[key] = func.apply(this, arguments));
 510 |     };
 511 |   };
 512 | 
 513 |   // Delays a function for the given number of milliseconds, and then calls
 514 |   // it with the arguments supplied.
 515 |   _.delay = function(func, wait) {
 516 |     var args = slice.call(arguments, 2);
 517 |     return setTimeout(function(){ return func.apply(func, args); }, wait);
 518 |   };
 519 | 
 520 |   // Defers a function, scheduling it to run after the current call stack has
 521 |   // cleared.
 522 |   _.defer = function(func) {
 523 |     return _.delay.apply(_, [func, 1].concat(slice.call(arguments, 1)));
 524 |   };
 525 | 
 526 |   // Returns a function, that, when invoked, will only be triggered at most once
 527 |   // during a given window of time.
 528 |   _.throttle = function(func, wait) {
 529 |     var context, args, timeout, throttling, more;
 530 |     var whenDone = _.debounce(function(){ more = throttling = false; }, wait);
 531 |     return function() {
 532 |       context = this; args = arguments;
 533 |       var later = function() {
 534 |         timeout = null;
 535 |         if (more) func.apply(context, args);
 536 |         whenDone();
 537 |       };
 538 |       if (!timeout) timeout = setTimeout(later, wait);
 539 |       if (throttling) {
 540 |         more = true;
 541 |       } else {
 542 |         func.apply(context, args);
 543 |       }
 544 |       whenDone();
 545 |       throttling = true;
 546 |     };
 547 |   };
 548 | 
 549 |   // Returns a function, that, as long as it continues to be invoked, will not
 550 |   // be triggered. The function will be called after it stops being called for
 551 |   // N milliseconds.
 552 |   _.debounce = function(func, wait) {
 553 |     var timeout;
 554 |     return function() {
 555 |       var context = this, args = arguments;
 556 |       var later = function() {
 557 |         timeout = null;
 558 |         func.apply(context, args);
 559 |       };
 560 |       clearTimeout(timeout);
 561 |       timeout = setTimeout(later, wait);
 562 |     };
 563 |   };
 564 | 
 565 |   // Returns a function that will be executed at most one time, no matter how
 566 |   // often you call it. Useful for lazy initialization.
 567 |   _.once = function(func) {
 568 |     var ran = false, memo;
 569 |     return function() {
 570 |       if (ran) return memo;
 571 |       ran = true;
 572 |       return memo = func.apply(this, arguments);
 573 |     };
 574 |   };
 575 | 
 576 |   // Returns the first function passed as an argument to the second,
 577 |   // allowing you to adjust arguments, run code before and after, and
 578 |   // conditionally execute the original function.
 579 |   _.wrap = function(func, wrapper) {
 580 |     return function() {
 581 |       var args = [func].concat(slice.call(arguments, 0));
 582 |       return wrapper.apply(this, args);
 583 |     };
 584 |   };
 585 | 
 586 |   // Returns a function that is the composition of a list of functions, each
 587 |   // consuming the return value of the function that follows.
 588 |   _.compose = function() {
 589 |     var funcs = arguments;
 590 |     return function() {
 591 |       var args = arguments;
 592 |       for (var i = funcs.length - 1; i >= 0; i--) {
 593 |         args = [funcs[i].apply(this, args)];
 594 |       }
 595 |       return args[0];
 596 |     };
 597 |   };
 598 | 
 599 |   // Returns a function that will only be executed after being called N times.
 600 |   _.after = function(times, func) {
 601 |     if (times <= 0) return func();
 602 |     return function() {
 603 |       if (--times < 1) { return func.apply(this, arguments); }
 604 |     };
 605 |   };
 606 | 
 607 |   // Object Functions
 608 |   // ----------------
 609 | 
 610 |   // Retrieve the names of an object's properties.
 611 |   // Delegates to **ECMAScript 5**'s native `Object.keys`
 612 |   _.keys = nativeKeys || function(obj) {
 613 |     if (obj !== Object(obj)) throw new TypeError('Invalid object');
 614 |     var keys = [];
 615 |     for (var key in obj) if (_.has(obj, key)) keys[keys.length] = key;
 616 |     return keys;
 617 |   };
 618 | 
 619 |   // Retrieve the values of an object's properties.
 620 |   _.values = function(obj) {
 621 |     return _.map(obj, _.identity);
 622 |   };
 623 | 
 624 |   // Return a sorted list of the function names available on the object.
 625 |   // Aliased as `methods`
 626 |   _.functions = _.methods = function(obj) {
 627 |     var names = [];
 628 |     for (var key in obj) {
 629 |       if (_.isFunction(obj[key])) names.push(key);
 630 |     }
 631 |     return names.sort();
 632 |   };
 633 | 
 634 |   // Extend a given object with all the properties in passed-in object(s).
 635 |   _.extend = function(obj) {
 636 |     each(slice.call(arguments, 1), function(source) {
 637 |       for (var prop in source) {
 638 |         obj[prop] = source[prop];
 639 |       }
 640 |     });
 641 |     return obj;
 642 |   };
 643 | 
 644 |   // Fill in a given object with default properties.
 645 |   _.defaults = function(obj) {
 646 |     each(slice.call(arguments, 1), function(source) {
 647 |       for (var prop in source) {
 648 |         if (obj[prop] == null) obj[prop] = source[prop];
 649 |       }
 650 |     });
 651 |     return obj;
 652 |   };
 653 | 
 654 |   // Create a (shallow-cloned) duplicate of an object.
 655 |   _.clone = function(obj) {
 656 |     if (!_.isObject(obj)) return obj;
 657 |     return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
 658 |   };
 659 | 
 660 |   // Invokes interceptor with the obj, and then returns obj.
 661 |   // The primary purpose of this method is to "tap into" a method chain, in
 662 |   // order to perform operations on intermediate results within the chain.
 663 |   _.tap = function(obj, interceptor) {
 664 |     interceptor(obj);
 665 |     return obj;
 666 |   };
 667 | 
 668 |   // Internal recursive comparison function.
 669 |   function eq(a, b, stack) {
 670 |     // Identical objects are equal. `0 === -0`, but they aren't identical.
 671 |     // See the Harmony `egal` proposal: http://wiki.ecmascript.org/doku.php?id=harmony:egal.
 672 |     if (a === b) return a !== 0 || 1 / a == 1 / b;
 673 |     // A strict comparison is necessary because `null == undefined`.
 674 |     if (a == null || b == null) return a === b;
 675 |     // Unwrap any wrapped objects.
 676 |     if (a._chain) a = a._wrapped;
 677 |     if (b._chain) b = b._wrapped;
 678 |     // Invoke a custom `isEqual` method if one is provided.
 679 |     if (a.isEqual && _.isFunction(a.isEqual)) return a.isEqual(b);
 680 |     if (b.isEqual && _.isFunction(b.isEqual)) return b.isEqual(a);
 681 |     // Compare `[[Class]]` names.
 682 |     var className = toString.call(a);
 683 |     if (className != toString.call(b)) return false;
 684 |     switch (className) {
 685 |       // Strings, numbers, dates, and booleans are compared by value.
 686 |       case '[object String]':
 687 |         // Primitives and their corresponding object wrappers are equivalent; thus, `"5"` is
 688 |         // equivalent to `new String("5")`.
 689 |         return a == String(b);
 690 |       case '[object Number]':
 691 |         // `NaN`s are equivalent, but non-reflexive. An `egal` comparison is performed for
 692 |         // other numeric values.
 693 |         return a != +a ? b != +b : (a == 0 ? 1 / a == 1 / b : a == +b);
 694 |       case '[object Date]':
 695 |       case '[object Boolean]':
 696 |         // Coerce dates and booleans to numeric primitive values. Dates are compared by their
 697 |         // millisecond representations. Note that invalid dates with millisecond representations
 698 |         // of `NaN` are not equivalent.
 699 |         return +a == +b;
 700 |       // RegExps are compared by their source patterns and flags.
 701 |       case '[object RegExp]':
 702 |         return a.source == b.source &&
 703 |                a.global == b.global &&
 704 |                a.multiline == b.multiline &&
 705 |                a.ignoreCase == b.ignoreCase;
 706 |     }
 707 |     if (typeof a != 'object' || typeof b != 'object') return false;
 708 |     // Assume equality for cyclic structures. The algorithm for detecting cyclic
 709 |     // structures is adapted from ES 5.1 section 15.12.3, abstract operation `JO`.
 710 |     var length = stack.length;
 711 |     while (length--) {
 712 |       // Linear search. Performance is inversely proportional to the number of
 713 |       // unique nested structures.
 714 |       if (stack[length] == a) return true;
 715 |     }
 716 |     // Add the first object to the stack of traversed objects.
 717 |     stack.push(a);
 718 |     var size = 0, result = true;
 719 |     // Recursively compare objects and arrays.
 720 |     if (className == '[object Array]') {
 721 |       // Compare array lengths to determine if a deep comparison is necessary.
 722 |       size = a.length;
 723 |       result = size == b.length;
 724 |       if (result) {
 725 |         // Deep compare the contents, ignoring non-numeric properties.
 726 |         while (size--) {
 727 |           // Ensure commutative equality for sparse arrays.
 728 |           if (!(result = size in a == size in b && eq(a[size], b[size], stack))) break;
 729 |         }
 730 |       }
 731 |     } else {
 732 |       // Objects with different constructors are not equivalent.
 733 |       if ('constructor' in a != 'constructor' in b || a.constructor != b.constructor) return false;
 734 |       // Deep compare objects.
 735 |       for (var key in a) {
 736 |         if (_.has(a, key)) {
 737 |           // Count the expected number of properties.
 738 |           size++;
 739 |           // Deep compare each member.
 740 |           if (!(result = _.has(b, key) && eq(a[key], b[key], stack))) break;
 741 |         }
 742 |       }
 743 |       // Ensure that both objects contain the same number of properties.
 744 |       if (result) {
 745 |         for (key in b) {
 746 |           if (_.has(b, key) && !(size--)) break;
 747 |         }
 748 |         result = !size;
 749 |       }
 750 |     }
 751 |     // Remove the first object from the stack of traversed objects.
 752 |     stack.pop();
 753 |     return result;
 754 |   }
 755 | 
 756 |   // Perform a deep comparison to check if two objects are equal.
 757 |   _.isEqual = function(a, b) {
 758 |     return eq(a, b, []);
 759 |   };
 760 | 
 761 |   // Is a given array, string, or object empty?
 762 |   // An "empty" object has no enumerable own-properties.
 763 |   _.isEmpty = function(obj) {
 764 |     if (_.isArray(obj) || _.isString(obj)) return obj.length === 0;
 765 |     for (var key in obj) if (_.has(obj, key)) return false;
 766 |     return true;
 767 |   };
 768 | 
 769 |   // Is a given value a DOM element?
 770 |   _.isElement = function(obj) {
 771 |     return !!(obj && obj.nodeType == 1);
 772 |   };
 773 | 
 774 |   // Is a given value an array?
 775 |   // Delegates to ECMA5's native Array.isArray
 776 |   _.isArray = nativeIsArray || function(obj) {
 777 |     return toString.call(obj) == '[object Array]';
 778 |   };
 779 | 
 780 |   // Is a given variable an object?
 781 |   _.isObject = function(obj) {
 782 |     return obj === Object(obj);
 783 |   };
 784 | 
 785 |   // Is a given variable an arguments object?
 786 |   _.isArguments = function(obj) {
 787 |     return toString.call(obj) == '[object Arguments]';
 788 |   };
 789 |   if (!_.isArguments(arguments)) {
 790 |     _.isArguments = function(obj) {
 791 |       return !!(obj && _.has(obj, 'callee'));
 792 |     };
 793 |   }
 794 | 
 795 |   // Is a given value a function?
 796 |   _.isFunction = function(obj) {
 797 |     return toString.call(obj) == '[object Function]';
 798 |   };
 799 | 
 800 |   // Is a given value a string?
 801 |   _.isString = function(obj) {
 802 |     return toString.call(obj) == '[object String]';
 803 |   };
 804 | 
 805 |   // Is a given value a number?
 806 |   _.isNumber = function(obj) {
 807 |     return toString.call(obj) == '[object Number]';
 808 |   };
 809 | 
 810 |   // Is the given value `NaN`?
 811 |   _.isNaN = function(obj) {
 812 |     // `NaN` is the only value for which `===` is not reflexive.
 813 |     return obj !== obj;
 814 |   };
 815 | 
 816 |   // Is a given value a boolean?
 817 |   _.isBoolean = function(obj) {
 818 |     return obj === true || obj === false || toString.call(obj) == '[object Boolean]';
 819 |   };
 820 | 
 821 |   // Is a given value a date?
 822 |   _.isDate = function(obj) {
 823 |     return toString.call(obj) == '[object Date]';
 824 |   };
 825 | 
 826 |   // Is the given value a regular expression?
 827 |   _.isRegExp = function(obj) {
 828 |     return toString.call(obj) == '[object RegExp]';
 829 |   };
 830 | 
 831 |   // Is a given value equal to null?
 832 |   _.isNull = function(obj) {
 833 |     return obj === null;
 834 |   };
 835 | 
 836 |   // Is a given variable undefined?
 837 |   _.isUndefined = function(obj) {
 838 |     return obj === void 0;
 839 |   };
 840 | 
 841 |   // Has own property?
 842 |   _.has = function(obj, key) {
 843 |     return hasOwnProperty.call(obj, key);
 844 |   };
 845 | 
 846 |   // Utility Functions
 847 |   // -----------------
 848 | 
 849 |   // Run Underscore.js in *noConflict* mode, returning the `_` variable to its
 850 |   // previous owner. Returns a reference to the Underscore object.
 851 |   _.noConflict = function() {
 852 |     root._ = previousUnderscore;
 853 |     return this;
 854 |   };
 855 | 
 856 |   // Keep the identity function around for default iterators.
 857 |   _.identity = function(value) {
 858 |     return value;
 859 |   };
 860 | 
 861 |   // Run a function **n** times.
 862 |   _.times = function (n, iterator, context) {
 863 |     for (var i = 0; i < n; i++) iterator.call(context, i);
 864 |   };
 865 | 
 866 |   // Escape a string for HTML interpolation.
 867 |   _.escape = function(string) {
 868 |     return (''+string).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g,'&#x2F;');
 869 |   };
 870 | 
 871 |   // Add your own custom functions to the Underscore object, ensuring that
 872 |   // they're correctly added to the OOP wrapper as well.
 873 |   _.mixin = function(obj) {
 874 |     each(_.functions(obj), function(name){
 875 |       addToWrapper(name, _[name] = obj[name]);
 876 |     });
 877 |   };
 878 | 
 879 |   // Generate a unique integer id (unique within the entire client session).
 880 |   // Useful for temporary DOM ids.
 881 |   var idCounter = 0;
 882 |   _.uniqueId = function(prefix) {
 883 |     var id = idCounter++;
 884 |     return prefix ? prefix + id : id;
 885 |   };
 886 | 
 887 |   // By default, Underscore uses ERB-style template delimiters, change the
 888 |   // following template settings to use alternative delimiters.
 889 |   _.templateSettings = {
 890 |     evaluate    : /<%([\s\S]+?)%>/g,
 891 |     interpolate : /<%=([\s\S]+?)%>/g,
 892 |     escape      : /<%-([\s\S]+?)%>/g
 893 |   };
 894 | 
 895 |   // When customizing `templateSettings`, if you don't want to define an
 896 |   // interpolation, evaluation or escaping regex, we need one that is
 897 |   // guaranteed not to match.
 898 |   var noMatch = /.^/;
 899 | 
 900 |   // Within an interpolation, evaluation, or escaping, remove HTML escaping
 901 |   // that had been previously added.
 902 |   var unescape = function(code) {
 903 |     return code.replace(/\\\\/g, '\\').replace(/\\'/g, "'");
 904 |   };
 905 | 
 906 |   // JavaScript micro-templating, similar to John Resig's implementation.
 907 |   // Underscore templating handles arbitrary delimiters, preserves whitespace,
 908 |   // and correctly escapes quotes within interpolated code.
 909 |   _.template = function(str, data) {
 910 |     var c  = _.templateSettings;
 911 |     var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
 912 |       'with(obj||{}){__p.push(\'' +
 913 |       str.replace(/\\/g, '\\\\')
 914 |          .replace(/'/g, "\\'")
 915 |          .replace(c.escape || noMatch, function(match, code) {
 916 |            return "',_.escape(" + unescape(code) + "),'";
 917 |          })
 918 |          .replace(c.interpolate || noMatch, function(match, code) {
 919 |            return "'," + unescape(code) + ",'";
 920 |          })
 921 |          .replace(c.evaluate || noMatch, function(match, code) {
 922 |            return "');" + unescape(code).replace(/[\r\n\t]/g, ' ') + ";__p.push('";
 923 |          })
 924 |          .replace(/\r/g, '\\r')
 925 |          .replace(/\n/g, '\\n')
 926 |          .replace(/\t/g, '\\t')
 927 |          + "');}return __p.join('');";
 928 |     var func = new Function('obj', '_', tmpl);
 929 |     if (data) return func(data, _);
 930 |     return function(data) {
 931 |       return func.call(this, data, _);
 932 |     };
 933 |   };
 934 | 
 935 |   // Add a "chain" function, which will delegate to the wrapper.
 936 |   _.chain = function(obj) {
 937 |     return _(obj).chain();
 938 |   };
 939 | 
 940 |   // The OOP Wrapper
 941 |   // ---------------
 942 | 
 943 |   // If Underscore is called as a function, it returns a wrapped object that
 944 |   // can be used OO-style. This wrapper holds altered versions of all the
 945 |   // underscore functions. Wrapped objects may be chained.
 946 |   var wrapper = function(obj) { this._wrapped = obj; };
 947 | 
 948 |   // Expose `wrapper.prototype` as `_.prototype`
 949 |   _.prototype = wrapper.prototype;
 950 | 
 951 |   // Helper function to continue chaining intermediate results.
 952 |   var result = function(obj, chain) {
 953 |     return chain ? _(obj).chain() : obj;
 954 |   };
 955 | 
 956 |   // A method to easily add functions to the OOP wrapper.
 957 |   var addToWrapper = function(name, func) {
 958 |     wrapper.prototype[name] = function() {
 959 |       var args = slice.call(arguments);
 960 |       unshift.call(args, this._wrapped);
 961 |       return result(func.apply(_, args), this._chain);
 962 |     };
 963 |   };
 964 | 
 965 |   // Add all of the Underscore functions to the wrapper object.
 966 |   _.mixin(_);
 967 | 
 968 |   // Add all mutator Array functions to the wrapper.
 969 |   each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
 970 |     var method = ArrayProto[name];
 971 |     wrapper.prototype[name] = function() {
 972 |       var wrapped = this._wrapped;
 973 |       method.apply(wrapped, arguments);
 974 |       var length = wrapped.length;
 975 |       if ((name == 'shift' || name == 'splice') && length === 0) delete wrapped[0];
 976 |       return result(wrapped, this._chain);
 977 |     };
 978 |   });
 979 | 
 980 |   // Add all accessor Array functions to the wrapper.
 981 |   each(['concat', 'join', 'slice'], function(name) {
 982 |     var method = ArrayProto[name];
 983 |     wrapper.prototype[name] = function() {
 984 |       return result(method.apply(this._wrapped, arguments), this._chain);
 985 |     };
 986 |   });
 987 | 
 988 |   // Start chaining a wrapped Underscore object.
 989 |   wrapper.prototype.chain = function() {
 990 |     this._chain = true;
 991 |     return this;
 992 |   };
 993 | 
 994 |   // Extracts the result from a wrapped and chained object.
 995 |   wrapper.prototype.value = function() {
 996 |     return this._wrapped;
 997 |   };
 998 | 
 999 | }).call(this);
1000 | 


--------------------------------------------------------------------------------
/static/js/dist/underscore-1.3.1.min.js:
--------------------------------------------------------------------------------
 1 | // Underscore.js 1.3.1
 2 | // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc.
 3 | // Underscore is freely distributable under the MIT license.
 4 | // Portions of Underscore are inspired or borrowed from Prototype,
 5 | // Oliver Steele's Functional, and John Resig's Micro-Templating.
 6 | // For all details and documentation:
 7 | // http://documentcloud.github.com/underscore
 8 | (function(){function q(a,c,d){if(a===c)return a!==0||1/a==1/c;if(a==null||c==null)return a===c;if(a._chain)a=a._wrapped;if(c._chain)c=c._wrapped;if(a.isEqual&&b.isFunction(a.isEqual))return a.isEqual(c);if(c.isEqual&&b.isFunction(c.isEqual))return c.isEqual(a);var e=l.call(a);if(e!=l.call(c))return false;switch(e){case "[object String]":return a==String(c);case "[object Number]":return a!=+a?c!=+c:a==0?1/a==1/c:a==+c;case "[object Date]":case "[object Boolean]":return+a==+c;case "[object RegExp]":return a.source==
 9 | c.source&&a.global==c.global&&a.multiline==c.multiline&&a.ignoreCase==c.ignoreCase}if(typeof a!="object"||typeof c!="object")return false;for(var f=d.length;f--;)if(d[f]==a)return true;d.push(a);var f=0,g=true;if(e=="[object Array]"){if(f=a.length,g=f==c.length)for(;f--;)if(!(g=f in a==f in c&&q(a[f],c[f],d)))break}else{if("constructor"in a!="constructor"in c||a.constructor!=c.constructor)return false;for(var h in a)if(b.has(a,h)&&(f++,!(g=b.has(c,h)&&q(a[h],c[h],d))))break;if(g){for(h in c)if(b.has(c,
10 | h)&&!f--)break;g=!f}}d.pop();return g}var r=this,G=r._,n={},k=Array.prototype,o=Object.prototype,i=k.slice,H=k.unshift,l=o.toString,I=o.hasOwnProperty,w=k.forEach,x=k.map,y=k.reduce,z=k.reduceRight,A=k.filter,B=k.every,C=k.some,p=k.indexOf,D=k.lastIndexOf,o=Array.isArray,J=Object.keys,s=Function.prototype.bind,b=function(a){return new m(a)};if(typeof exports!=="undefined"){if(typeof module!=="undefined"&&module.exports)exports=module.exports=b;exports._=b}else r._=b;b.VERSION="1.3.1";var j=b.each=
11 | b.forEach=function(a,c,d){if(a!=null)if(w&&a.forEach===w)a.forEach(c,d);else if(a.length===+a.length)for(var e=0,f=a.length;e<f;e++){if(e in a&&c.call(d,a[e],e,a)===n)break}else for(e in a)if(b.has(a,e)&&c.call(d,a[e],e,a)===n)break};b.map=b.collect=function(a,c,b){var e=[];if(a==null)return e;if(x&&a.map===x)return a.map(c,b);j(a,function(a,g,h){e[e.length]=c.call(b,a,g,h)});if(a.length===+a.length)e.length=a.length;return e};b.reduce=b.foldl=b.inject=function(a,c,d,e){var f=arguments.length>2;a==
12 | null&&(a=[]);if(y&&a.reduce===y)return e&&(c=b.bind(c,e)),f?a.reduce(c,d):a.reduce(c);j(a,function(a,b,i){f?d=c.call(e,d,a,b,i):(d=a,f=true)});if(!f)throw new TypeError("Reduce of empty array with no initial value");return d};b.reduceRight=b.foldr=function(a,c,d,e){var f=arguments.length>2;a==null&&(a=[]);if(z&&a.reduceRight===z)return e&&(c=b.bind(c,e)),f?a.reduceRight(c,d):a.reduceRight(c);var g=b.toArray(a).reverse();e&&!f&&(c=b.bind(c,e));return f?b.reduce(g,c,d,e):b.reduce(g,c)};b.find=b.detect=
13 | function(a,c,b){var e;E(a,function(a,g,h){if(c.call(b,a,g,h))return e=a,true});return e};b.filter=b.select=function(a,c,b){var e=[];if(a==null)return e;if(A&&a.filter===A)return a.filter(c,b);j(a,function(a,g,h){c.call(b,a,g,h)&&(e[e.length]=a)});return e};b.reject=function(a,c,b){var e=[];if(a==null)return e;j(a,function(a,g,h){c.call(b,a,g,h)||(e[e.length]=a)});return e};b.every=b.all=function(a,c,b){var e=true;if(a==null)return e;if(B&&a.every===B)return a.every(c,b);j(a,function(a,g,h){if(!(e=
14 | e&&c.call(b,a,g,h)))return n});return e};var E=b.some=b.any=function(a,c,d){c||(c=b.identity);var e=false;if(a==null)return e;if(C&&a.some===C)return a.some(c,d);j(a,function(a,b,h){if(e||(e=c.call(d,a,b,h)))return n});return!!e};b.include=b.contains=function(a,c){var b=false;if(a==null)return b;return p&&a.indexOf===p?a.indexOf(c)!=-1:b=E(a,function(a){return a===c})};b.invoke=function(a,c){var d=i.call(arguments,2);return b.map(a,function(a){return(b.isFunction(c)?c||a:a[c]).apply(a,d)})};b.pluck=
15 | function(a,c){return b.map(a,function(a){return a[c]})};b.max=function(a,c,d){if(!c&&b.isArray(a))return Math.max.apply(Math,a);if(!c&&b.isEmpty(a))return-Infinity;var e={computed:-Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;b>=e.computed&&(e={value:a,computed:b})});return e.value};b.min=function(a,c,d){if(!c&&b.isArray(a))return Math.min.apply(Math,a);if(!c&&b.isEmpty(a))return Infinity;var e={computed:Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;b<e.computed&&(e={value:a,computed:b})});
16 | return e.value};b.shuffle=function(a){var b=[],d;j(a,function(a,f){f==0?b[0]=a:(d=Math.floor(Math.random()*(f+1)),b[f]=b[d],b[d]=a)});return b};b.sortBy=function(a,c,d){return b.pluck(b.map(a,function(a,b,g){return{value:a,criteria:c.call(d,a,b,g)}}).sort(function(a,b){var c=a.criteria,d=b.criteria;return c<d?-1:c>d?1:0}),"value")};b.groupBy=function(a,c){var d={},e=b.isFunction(c)?c:function(a){return a[c]};j(a,function(a,b){var c=e(a,b);(d[c]||(d[c]=[])).push(a)});return d};b.sortedIndex=function(a,
17 | c,d){d||(d=b.identity);for(var e=0,f=a.length;e<f;){var g=e+f>>1;d(a[g])<d(c)?e=g+1:f=g}return e};b.toArray=function(a){return!a?[]:a.toArray?a.toArray():b.isArray(a)?i.call(a):b.isArguments(a)?i.call(a):b.values(a)};b.size=function(a){return b.toArray(a).length};b.first=b.head=function(a,b,d){return b!=null&&!d?i.call(a,0,b):a[0]};b.initial=function(a,b,d){return i.call(a,0,a.length-(b==null||d?1:b))};b.last=function(a,b,d){return b!=null&&!d?i.call(a,Math.max(a.length-b,0)):a[a.length-1]};b.rest=
18 | b.tail=function(a,b,d){return i.call(a,b==null||d?1:b)};b.compact=function(a){return b.filter(a,function(a){return!!a})};b.flatten=function(a,c){return b.reduce(a,function(a,e){if(b.isArray(e))return a.concat(c?e:b.flatten(e));a[a.length]=e;return a},[])};b.without=function(a){return b.difference(a,i.call(arguments,1))};b.uniq=b.unique=function(a,c,d){var d=d?b.map(a,d):a,e=[];b.reduce(d,function(d,g,h){if(0==h||(c===true?b.last(d)!=g:!b.include(d,g)))d[d.length]=g,e[e.length]=a[h];return d},[]);
19 | return e};b.union=function(){return b.uniq(b.flatten(arguments,true))};b.intersection=b.intersect=function(a){var c=i.call(arguments,1);return b.filter(b.uniq(a),function(a){return b.every(c,function(c){return b.indexOf(c,a)>=0})})};b.difference=function(a){var c=b.flatten(i.call(arguments,1));return b.filter(a,function(a){return!b.include(c,a)})};b.zip=function(){for(var a=i.call(arguments),c=b.max(b.pluck(a,"length")),d=Array(c),e=0;e<c;e++)d[e]=b.pluck(a,""+e);return d};b.indexOf=function(a,c,
20 | d){if(a==null)return-1;var e;if(d)return d=b.sortedIndex(a,c),a[d]===c?d:-1;if(p&&a.indexOf===p)return a.indexOf(c);for(d=0,e=a.length;d<e;d++)if(d in a&&a[d]===c)return d;return-1};b.lastIndexOf=function(a,b){if(a==null)return-1;if(D&&a.lastIndexOf===D)return a.lastIndexOf(b);for(var d=a.length;d--;)if(d in a&&a[d]===b)return d;return-1};b.range=function(a,b,d){arguments.length<=1&&(b=a||0,a=0);for(var d=arguments[2]||1,e=Math.max(Math.ceil((b-a)/d),0),f=0,g=Array(e);f<e;)g[f++]=a,a+=d;return g};
21 | var F=function(){};b.bind=function(a,c){var d,e;if(a.bind===s&&s)return s.apply(a,i.call(arguments,1));if(!b.isFunction(a))throw new TypeError;e=i.call(arguments,2);return d=function(){if(!(this instanceof d))return a.apply(c,e.concat(i.call(arguments)));F.prototype=a.prototype;var b=new F,g=a.apply(b,e.concat(i.call(arguments)));return Object(g)===g?g:b}};b.bindAll=function(a){var c=i.call(arguments,1);c.length==0&&(c=b.functions(a));j(c,function(c){a[c]=b.bind(a[c],a)});return a};b.memoize=function(a,
22 | c){var d={};c||(c=b.identity);return function(){var e=c.apply(this,arguments);return b.has(d,e)?d[e]:d[e]=a.apply(this,arguments)}};b.delay=function(a,b){var d=i.call(arguments,2);return setTimeout(function(){return a.apply(a,d)},b)};b.defer=function(a){return b.delay.apply(b,[a,1].concat(i.call(arguments,1)))};b.throttle=function(a,c){var d,e,f,g,h,i=b.debounce(function(){h=g=false},c);return function(){d=this;e=arguments;var b;f||(f=setTimeout(function(){f=null;h&&a.apply(d,e);i()},c));g?h=true:
23 | a.apply(d,e);i();g=true}};b.debounce=function(a,b){var d;return function(){var e=this,f=arguments;clearTimeout(d);d=setTimeout(function(){d=null;a.apply(e,f)},b)}};b.once=function(a){var b=false,d;return function(){if(b)return d;b=true;return d=a.apply(this,arguments)}};b.wrap=function(a,b){return function(){var d=[a].concat(i.call(arguments,0));return b.apply(this,d)}};b.compose=function(){var a=arguments;return function(){for(var b=arguments,d=a.length-1;d>=0;d--)b=[a[d].apply(this,b)];return b[0]}};
24 | b.after=function(a,b){return a<=0?b():function(){if(--a<1)return b.apply(this,arguments)}};b.keys=J||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var c=[],d;for(d in a)b.has(a,d)&&(c[c.length]=d);return c};b.values=function(a){return b.map(a,b.identity)};b.functions=b.methods=function(a){var c=[],d;for(d in a)b.isFunction(a[d])&&c.push(d);return c.sort()};b.extend=function(a){j(i.call(arguments,1),function(b){for(var d in b)a[d]=b[d]});return a};b.defaults=function(a){j(i.call(arguments,
25 | 1),function(b){for(var d in b)a[d]==null&&(a[d]=b[d])});return a};b.clone=function(a){return!b.isObject(a)?a:b.isArray(a)?a.slice():b.extend({},a)};b.tap=function(a,b){b(a);return a};b.isEqual=function(a,b){return q(a,b,[])};b.isEmpty=function(a){if(b.isArray(a)||b.isString(a))return a.length===0;for(var c in a)if(b.has(a,c))return false;return true};b.isElement=function(a){return!!(a&&a.nodeType==1)};b.isArray=o||function(a){return l.call(a)=="[object Array]"};b.isObject=function(a){return a===Object(a)};
26 | b.isArguments=function(a){return l.call(a)=="[object Arguments]"};if(!b.isArguments(arguments))b.isArguments=function(a){return!(!a||!b.has(a,"callee"))};b.isFunction=function(a){return l.call(a)=="[object Function]"};b.isString=function(a){return l.call(a)=="[object String]"};b.isNumber=function(a){return l.call(a)=="[object Number]"};b.isNaN=function(a){return a!==a};b.isBoolean=function(a){return a===true||a===false||l.call(a)=="[object Boolean]"};b.isDate=function(a){return l.call(a)=="[object Date]"};
27 | b.isRegExp=function(a){return l.call(a)=="[object RegExp]"};b.isNull=function(a){return a===null};b.isUndefined=function(a){return a===void 0};b.has=function(a,b){return I.call(a,b)};b.noConflict=function(){r._=G;return this};b.identity=function(a){return a};b.times=function(a,b,d){for(var e=0;e<a;e++)b.call(d,e)};b.escape=function(a){return(""+a).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;").replace(/\//g,"&#x2F;")};b.mixin=function(a){j(b.functions(a),
28 | function(c){K(c,b[c]=a[c])})};var L=0;b.uniqueId=function(a){var b=L++;return a?a+b:b};b.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var t=/.^/,u=function(a){return a.replace(/\\\\/g,"\\").replace(/\\'/g,"'")};b.template=function(a,c){var d=b.templateSettings,d="var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('"+a.replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(d.escape||t,function(a,b){return"',_.escape("+
29 | u(b)+"),'"}).replace(d.interpolate||t,function(a,b){return"',"+u(b)+",'"}).replace(d.evaluate||t,function(a,b){return"');"+u(b).replace(/[\r\n\t]/g," ")+";__p.push('"}).replace(/\r/g,"\\r").replace(/\n/g,"\\n").replace(/\t/g,"\\t")+"');}return __p.join('');",e=new Function("obj","_",d);return c?e(c,b):function(a){return e.call(this,a,b)}};b.chain=function(a){return b(a).chain()};var m=function(a){this._wrapped=a};b.prototype=m.prototype;var v=function(a,c){return c?b(a).chain():a},K=function(a,c){m.prototype[a]=
30 | function(){var a=i.call(arguments);H.call(a,this._wrapped);return v(c.apply(b,a),this._chain)}};b.mixin(b);j("pop,push,reverse,shift,sort,splice,unshift".split(","),function(a){var b=k[a];m.prototype[a]=function(){var d=this._wrapped;b.apply(d,arguments);var e=d.length;(a=="shift"||a=="splice")&&e===0&&delete d[0];return v(d,this._chain)}});j(["concat","join","slice"],function(a){var b=k[a];m.prototype[a]=function(){return v(b.apply(this._wrapped,arguments),this._chain)}});m.prototype.chain=function(){this._chain=
31 | true;return this};m.prototype.value=function(){return this._wrapped}}).call(this);
32 | 


--------------------------------------------------------------------------------
/static/js/forum.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (C) 2012 Xavier Antoviaque <xavier@antoviaque.org>
  3 |  *
  4 |  * This software's license gives you freedom; you can copy, convey,
  5 |  * propagate, redistribute and/or modify this program under the terms of
  6 |  * the GNU Affero Gereral Public License (AGPL) as published by the Free
  7 |  * Software Foundation (FSF), either version 3 of the License, or (at your
  8 |  * option) any later version of the AGPL published by the FSF.
  9 |  *
 10 |  * This program is distributed in the hope that it will be useful, but
 11 |  * WITHOUT ANY WARRANTY; without even the implied warranty of
 12 |  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
 13 |  * General Public License for more details.
 14 |  *
 15 |  * You should have received a copy of the GNU Affero General Public License
 16 |  * along with this program in a file in the toplevel directory called
 17 |  * "AGPLv3".  If not, see <http://www.gnu.org/licenses/>.
 18 | */
 19 | 
 20 | (function($) {
 21 | 
 22 |     $.forum = {}
 23 |     
 24 |     // Models //////////////////////////////////////////////////////////////
 25 |         
 26 |     $.forum.Message = Backbone.RelationalModel.extend({
 27 |         urlRoot: '/api/message',
 28 |         idAttribute: '_id',
 29 |     });
 30 | 
 31 |     $.forum.Thread = Backbone.RelationalModel.extend({
 32 |         urlRoot: '/api/thread',
 33 |         idAttribute: '_id',
 34 |         relations: [{
 35 |             type: Backbone.HasMany,
 36 |             key: 'messages',
 37 |             relatedModel: '$.forum.Message',
 38 |             reverseRelation: {
 39 |                 key: 'thread',
 40 |                 includeInJSON: '_id',
 41 |             },
 42 |         }]
 43 |     });
 44 |     
 45 |     $.forum.ThreadCollection = Backbone.Collection.extend({
 46 |         url: '/api/thread',
 47 |         model: $.forum.Thread,
 48 |     })
 49 |     
 50 |     // Views ///////////////////////////////////////////////////////////////
 51 |     
 52 |     // Threads list //
 53 |     
 54 |     $.forum.ThreadListView = Backbone.View.extend({
 55 |         tagName: 'div',
 56 | 
 57 |         className: 'thread_list_view',
 58 |         
 59 |         initialize: function(){
 60 |             _.bindAll(this, 'render', 'render_thread_summary', 'on_submit', 'on_thread_created', 'on_error');
 61 |             this.model.bind('reset', this.render); 
 62 |             this.model.bind('change', this.render); 
 63 |             this.model.bind('add', this.render_thread_summary); 
 64 |         },
 65 |     
 66 |         template: Handlebars.compile($('#tpl_thread_list').html()),
 67 |     
 68 |         render: function() {
 69 |             $(this.el).html(this.template());
 70 |             this.model.forEach(this.render_thread_summary);
 71 |             return $(this.el).html();
 72 |         },
 73 |         
 74 |         render_thread_summary: function(thread) {
 75 |             var thread_summary_view = new $.forum.ThreadSummaryView({model: thread});
 76 |             this.$('ul.thread_list').prepend($(thread_summary_view.render()));
 77 |         },
 78 |         
 79 |         events: {
 80 |             'click input[type=submit]': 'on_submit',
 81 |         },
 82 |         
 83 |         on_submit: function(e) {
 84 |             var thread = new $.forum.Thread({ title: this.$('.new_thread_title').val() });
 85 |             thread.save({}, { success: this.on_thread_created,
 86 |                               error: this.on_error });
 87 |         },
 88 |         
 89 |         on_thread_created: function(thread, response) {
 90 |             this.model.add(thread, {at: 0});
 91 |             var message = new $.forum.Message({ author: this.$('.new_message_author').val(),
 92 |                                                  text: this.$('.new_message_text').val(),
 93 |                                                  thread: thread.get('_id') });
 94 |             message.save({}, { 
 95 |                 success: function() {
 96 |                     $.forum.app.navigate('thread/'+thread.get('_id')+'/', { trigger: true });
 97 |                 },
 98 |                 error: this.on_error,
 99 |             });
100 |         },
101 |                 
102 |         on_error: function(model, response) {
103 |             var error = $.parseJSON(response.responseText);
104 |             this.$('.error_message').html(error.message);
105 |         },
106 |     });
107 |     
108 |     // Thread //
109 |     
110 |     $.forum.ThreadSummaryView = Backbone.View.extend({
111 |         tagName: 'li',
112 | 
113 |         className: 'thread_summary_view',
114 |         
115 |         initialize: function(){
116 |             _.bindAll(this, 'render', 'on_click');
117 |             this.model.bind('change', this.render);
118 |         },
119 |     
120 |         template: Handlebars.compile($('#tpl_thread_summary').html()),
121 |         
122 |         render: function() {
123 |             return $(this.el).html(this.template(this.model.toJSON()));
124 |         },
125 |         
126 |         events: {
127 |             'click': 'on_click',
128 |         },
129 |         
130 |         on_click: function(e) {
131 |             $.forum.app.navigate('thread/'+this.model.get('_id')+'/', {trigger: true});
132 |         },
133 |     });
134 |     
135 |     $.forum.ThreadView = Backbone.View.extend({
136 |         tagName: 'div',
137 | 
138 |         className: 'thread_view',
139 |         
140 |         initialize: function(){
141 |             _.bindAll(this, 'render', 'render_message', 'on_submit');
142 |             this.model.bind('change', this.render);
143 |             this.model.bind('reset', this.render);
144 |             this.model.bind('add:messages', this.render_message); 
145 |         },
146 |     
147 |         template: Handlebars.compile($('#tpl_thread').html()),
148 |         
149 |         render: function() {
150 |             return $(this.el).html(this.template(this.model.toJSON()));
151 |         },
152 |         
153 |         render_message: function(message) {
154 |             var message_view = new $.forum.MessageView({model: message});
155 |             this.$('div.message_list').append($(message_view.render()));
156 |         },
157 |         
158 |         events: {
159 |             'click input[type=submit]': 'on_submit',
160 |         },
161 |         
162 |         on_submit: function(e) {
163 |             var new_message = new $.forum.Message({author: this.$('.new_message_author').val(),
164 |                                                     text: this.$('.new_message_text').val(),
165 |                                                     thread: this.model});
166 |             new_message.save();
167 |         },
168 |     });
169 |     
170 |     // Message //
171 |     
172 |     $.forum.MessageView = Backbone.View.extend({
173 |         tagName: 'div',
174 | 
175 |         className: 'message_view',
176 |         
177 |         initialize: function(){
178 |             _.bindAll(this, 'render');
179 |             this.model.bind('change', this.render);
180 |         },
181 |     
182 |         template: Handlebars.compile($('#tpl_message').html()),
183 |         
184 |         render: function() {
185 |             return $(this.el).html(this.template(this.model.toJSON()));
186 |         },
187 |     });
188 |     
189 |     // Router ///////////////////////////////////////////////////////////////
190 |     
191 |     $.forum.Router = Backbone.Router.extend({
192 |         routes: {
193 |             "": "show_thread_list",
194 |             "thread/:_id/": "show_thread",
195 |         },
196 |     
197 |         show_thread_list: function() {
198 |             var thread_collection = new $.forum.ThreadCollection();
199 |             var thread_list_view = new $.forum.ThreadListView({el: $('#content'), 
200 |                                                                 model: thread_collection });
201 |             thread_collection.fetch();
202 |         },
203 |         
204 |         show_thread: function(_id) {
205 |             var thread = new $.forum.Thread({_id: _id});
206 |             var thread_view = new $.forum.ThreadView({el: $('#content'), model: thread});
207 |             thread.fetch();
208 |         },
209 |         
210 |     });
211 |     
212 |     
213 |     // App /////////////////////////////////////////////////////////////////
214 |     
215 |     $.forum.app = null;
216 |     
217 |     $.forum.bootstrap = function() {
218 |         $.forum.app = new $.forum.Router(); 
219 |         Backbone.history.start();
220 |     };
221 | 
222 | })(jQuery);
223 | 
224 | 


--------------------------------------------------------------------------------
/tutorial/css/highlight.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
  4 | 
  5 | */
  6 | 
  7 | pre code {
  8 |   display: block; padding: 0.5em;
  9 |   background: #F0F0F0;
 10 | }
 11 | 
 12 | pre code,
 13 | pre .ruby .subst,
 14 | pre .tag .title,
 15 | pre .lisp .title {
 16 |   color: black;
 17 | }
 18 | 
 19 | pre .string,
 20 | pre .title,
 21 | pre .constant,
 22 | pre .parent,
 23 | pre .tag .value,
 24 | pre .rules .value,
 25 | pre .rules .value .number,
 26 | pre .preprocessor,
 27 | pre .ruby .symbol,
 28 | pre .ruby .symbol .string,
 29 | pre .ruby .symbol .keyword,
 30 | pre .ruby .symbol .keymethods,
 31 | pre .instancevar,
 32 | pre .aggregate,
 33 | pre .template_tag,
 34 | pre .django .variable,
 35 | pre .smalltalk .class,
 36 | pre .addition,
 37 | pre .flow,
 38 | pre .stream,
 39 | pre .bash .variable,
 40 | pre .apache .tag,
 41 | pre .apache .cbracket,
 42 | pre .tex .command,
 43 | pre .tex .special,
 44 | pre .erlang_repl .function_or_atom {
 45 |   color: #800;
 46 | }
 47 | 
 48 | pre .comment,
 49 | pre .annotation,
 50 | pre .template_comment,
 51 | pre .diff .header,
 52 | pre .chunk {
 53 |   color: #888;
 54 | }
 55 | 
 56 | pre .number,
 57 | pre .date,
 58 | pre .regexp,
 59 | pre .literal,
 60 | pre .smalltalk .symbol,
 61 | pre .smalltalk .char,
 62 | pre .go .constant,
 63 | pre .change {
 64 |   color: #080;
 65 | }
 66 | 
 67 | pre .label,
 68 | pre .javadoc,
 69 | pre .ruby .string,
 70 | pre .decorator,
 71 | pre .filter .argument,
 72 | pre .localvars,
 73 | pre .array,
 74 | pre .attr_selector,
 75 | pre .important,
 76 | pre .pseudo,
 77 | pre .pi,
 78 | pre .doctype,
 79 | pre .deletion,
 80 | pre .envvar,
 81 | pre .shebang,
 82 | pre .apache .sqbracket,
 83 | pre .nginx .built_in,
 84 | pre .tex .formula,
 85 | pre .erlang_repl .reserved,
 86 | pre .input_number {
 87 |   color: #88F
 88 | }
 89 | 
 90 | pre .css .tag,
 91 | pre .javadoctag,
 92 | pre .phpdoc,
 93 | pre .yardoctag {
 94 |   font-weight: bold;
 95 | }
 96 | 
 97 | pre .keyword,
 98 | pre .id,
 99 | pre .phpdoc,
100 | pre .title,
101 | pre .built_in,
102 | pre .aggregate,
103 | pre .smalltalk .class,
104 | pre .winutils,
105 | pre .bash .variable,
106 | pre .apache .tag,
107 | pre .go .typename,
108 | pre .tex .command {
109 |   font-weight: bold;
110 | }
111 | 
112 | pre .nginx .built_in {
113 |   font-weight: normal;
114 | }
115 | 
116 | pre .xml .css,
117 | pre .xml .javascript,
118 | pre .xml .vbscript,
119 | pre .tex .formula {
120 |   opacity: 0.5;
121 | }
122 | 


--------------------------------------------------------------------------------
/tutorial/css/markdown.css:
--------------------------------------------------------------------------------
  1 | html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  2 | 
  3 | body{
  4 | color:#444;
  5 | font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
  6 | font-size:12px;
  7 | line-height:1.5em;
  8 | padding:1em;
  9 | margin:auto;
 10 | max-width:42em;
 11 | background:#fefefe;
 12 | }
 13 | 
 14 | a{ color: #0645ad; text-decoration:none;}
 15 | a:visited{ color: #0b0080; }
 16 | a:hover{ color: #06e; }
 17 | a:active{ color:#faa700; }
 18 | a:focus{ outline: thin dotted; }
 19 | a:hover, a:active{ outline: 0; }
 20 | 
 21 | ::-moz-selection{background:rgba(255,255,0,0.3);color:#000}
 22 | ::selection{background:rgba(255,255,0,0.3);color:#000}
 23 | 
 24 | a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad}
 25 | a::selection{background:rgba(255,255,0,0.3);color:#0645ad}
 26 | 
 27 | p{
 28 | margin:1em 0;
 29 | }
 30 | 
 31 | img{
 32 | max-width:100%;
 33 | }
 34 | 
 35 | h1,h2,h3,h4,h5,h6{
 36 | font-weight:normal;
 37 | color:#111;
 38 | line-height:1em;
 39 | }
 40 | h4,h5,h6{ font-weight: bold; }
 41 | h1{ font-size:2.5em; }
 42 | h2{ font-size:2em; }
 43 | h3{ font-size:1.5em; }
 44 | h4{ font-size:1.2em; }
 45 | h5{ font-size:1em; }
 46 | h6{ font-size:0.9em; }
 47 | 
 48 | blockquote{
 49 | color:#666666;
 50 | margin:0;
 51 | padding-left: 3em;
 52 | border-left: 0.5em #EEE solid;
 53 | }
 54 | hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }
 55 | pre, code, kbd, samp { color: #111111; font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 0.90em; }
 56 | pre { 
 57 |     white-space: pre; 
 58 |     white-space: pre-wrap; 
 59 |     word-wrap: break-word; 
 60 |     font-size: 0.95em; 
 61 |     background-color: #F0F0F0;
 62 |     margin: 10px 20px;
 63 |     padding: 5px 5px;
 64 |     -webkit-border-radius: 10px;
 65 |     -moz-border-radius: 10px;
 66 |     -ms-border-radius: 10px;
 67 |     -o-border-radius: 10px;
 68 |     border-radius: 10px;
 69 | }
 70 | 
 71 | b, strong { font-weight: bold; }
 72 | 
 73 | dfn { font-style: italic; }
 74 | 
 75 | ins { background: #ff9; color: #000; text-decoration: none; }
 76 | 
 77 | mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
 78 | 
 79 | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
 80 | sup { top: -0.5em; }
 81 | sub { bottom: -0.25em; }
 82 | 
 83 | ul, ol { margin: 1em 0; padding: 0 0 0 2em; }
 84 | li p:last-child { margin:0 }
 85 | dd { margin: 0 0 0 2em; }
 86 | 
 87 | img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
 88 | 
 89 | table { border-collapse: collapse; border-spacing: 0; }
 90 | td { vertical-align: top; }
 91 | 
 92 | @media only screen and (min-width: 480px) {
 93 | body{font-size:14px;}
 94 | }
 95 | 
 96 | @media only screen and (min-width: 768px) {
 97 | body{font-size:16px;}
 98 | }
 99 | 
100 | @media print {
101 |   * { background: transparent !important; color: black !important; filter:none !important; -ms-filter: none !important; }
102 |   body{font-size:12pt; max-width:100%;}
103 |   a, a:visited { text-decoration: underline; }
104 |   hr { height: 1px; border:0; border-bottom:1px solid black; }
105 |   a[href]:after { content: " (" attr(href) ")"; }
106 |   abbr[title]:after { content: " (" attr(title) ")"; }
107 |   .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
108 |   pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
109 |   tr, img { page-break-inside: avoid; }
110 |   img { max-width: 100% !important; }
111 |   @page :left { margin: 15mm 20mm 15mm 10mm; }
112 |   @page :right { margin: 15mm 10mm 15mm 20mm; }
113 |   p, h2, h3 { orphans: 3; widows: 3; }
114 |   h2, h3 { page-break-after: avoid; }
115 | }
116 | 


--------------------------------------------------------------------------------
/tutorial/header.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8" />
 5 | 	<title>Backbone-relational Tutorial - Nested Models With Backbone.js</title>
 6 |     <link rel="stylesheet" href="css/markdown.css">
 7 |     <link rel="stylesheet" href="css/highlight.css">
 8 | 
 9 |     <script type="text/javascript" src="js/highlight.pack.js"></script>
10 |     <script type="text/javascript">
11 |         hljs.initHighlightingOnLoad();
12 |     </script>
13 | 
14 | </head>
15 | 
16 | <body>
17 | 
18 | 


--------------------------------------------------------------------------------
/tutorial/img/screenshot1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoviaque/backbone-relational-tutorial/f9fe7f4b4d50510fd815ac92d5dd6fc1ae043d4f/tutorial/img/screenshot1.png


--------------------------------------------------------------------------------
/tutorial/img/screenshot2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoviaque/backbone-relational-tutorial/f9fe7f4b4d50510fd815ac92d5dd6fc1ae043d4f/tutorial/img/screenshot2.png


--------------------------------------------------------------------------------
/tutorial/js/highlight.pack.js:
--------------------------------------------------------------------------------
1 | var hljs=new function(){function m(p){return p.replace(/&/gm,"&amp;").replace(/</gm,"&lt;")}function c(r,q,p){return RegExp(q,"m"+(r.cI?"i":"")+(p?"g":""))}function j(r){for(var p=0;p<r.childNodes.length;p++){var q=r.childNodes[p];if(q.nodeName=="CODE"){return q}if(!(q.nodeType==3&&q.nodeValue.match(/\s+/))){break}}}function g(t,s){var r="";for(var q=0;q<t.childNodes.length;q++){if(t.childNodes[q].nodeType==3){var p=t.childNodes[q].nodeValue;if(s){p=p.replace(/\n/g,"")}r+=p}else{if(t.childNodes[q].nodeName=="BR"){r+="\n"}else{r+=g(t.childNodes[q])}}}if(/MSIE [678]/.test(navigator.userAgent)){r=r.replace(/\r/g,"\n")}return r}function a(s){var q=s.className.split(/\s+/);q=q.concat(s.parentNode.className.split(/\s+/));for(var p=0;p<q.length;p++){var r=q[p].replace(/^language-/,"");if(d[r]||r=="no-highlight"){return r}}}function b(p){var q=[];(function(s,t){for(var r=0;r<s.childNodes.length;r++){if(s.childNodes[r].nodeType==3){t+=s.childNodes[r].nodeValue.length}else{if(s.childNodes[r].nodeName=="BR"){t+=1}else{q.push({event:"start",offset:t,node:s.childNodes[r]});t=arguments.callee(s.childNodes[r],t);q.push({event:"stop",offset:t,node:s.childNodes[r]})}}}return t})(p,0);return q}function l(y,z,x){var r=0;var w="";var t=[];function u(){if(y.length&&z.length){if(y[0].offset!=z[0].offset){return(y[0].offset<z[0].offset)?y:z}else{return z[0].event=="start"?y:z}}else{return y.length?y:z}}function s(C){var D="<"+C.nodeName.toLowerCase();for(var A=0;A<C.attributes.length;A++){var B=C.attributes[A];D+=" "+B.nodeName.toLowerCase();if(B.nodeValue!=undefined&&B.nodeValue!=false&&B.nodeValue!=null){D+='="'+m(B.nodeValue)+'"'}}return D+">"}while(y.length||z.length){var v=u().splice(0,1)[0];w+=m(x.substr(r,v.offset-r));r=v.offset;if(v.event=="start"){w+=s(v.node);t.push(v.node)}else{if(v.event=="stop"){var q=t.length;do{q--;var p=t[q];w+=("</"+p.nodeName.toLowerCase()+">")}while(p!=v.node);t.splice(q,1);while(q<t.length){w+=s(t[q]);q++}}}}w+=x.substr(r);return w}function i(){function p(u,t,v){if(u.compiled){return}if(!v){u.bR=c(t,u.b?u.b:"\\B|\\b");if(!u.e&&!u.eW){u.e="\\B|\\b"}if(u.e){u.eR=c(t,u.e)}}if(u.i){u.iR=c(t,u.i)}if(u.r==undefined){u.r=1}if(u.k){u.lR=c(t,u.l||hljs.IR,true)}for(var s in u.k){if(!u.k.hasOwnProperty(s)){continue}if(u.k[s] instanceof Object){u.kG=u.k}else{u.kG={keyword:u.k}}break}if(!u.c){u.c=[]}u.compiled=true;for(var r=0;r<u.c.length;r++){p(u.c[r],t,false)}if(u.starts){p(u.starts,t,false)}}for(var q in d){if(!d.hasOwnProperty(q)){continue}p(d[q].dM,d[q],true)}}function e(J,D){if(!i.called){i();i.called=true}function z(r,M){for(var L=0;L<M.c.length;L++){if(M.c[L].bR.test(r)){return M.c[L]}}}function w(L,r){if(C[L].e&&C[L].eR.test(r)){return 1}if(C[L].eW){var M=w(L-1,r);return M?M+1:0}return 0}function x(r,L){return L.iR&&L.iR.test(r)}function A(O,N){var M=[];for(var L=0;L<O.c.length;L++){M.push(O.c[L].b)}var r=C.length-1;do{if(C[r].e){M.push(C[r].e)}r--}while(C[r+1].eW);if(O.i){M.push(O.i)}return c(N,"("+M.join("|")+")",true)}function s(M,L){var N=C[C.length-1];if(!N.t){N.t=A(N,H)}N.t.lastIndex=L;var r=N.t.exec(M);if(r){return[M.substr(L,r.index-L),r[0],false]}else{return[M.substr(L),"",true]}}function p(O,r){var L=H.cI?r[0].toLowerCase():r[0];for(var N in O.kG){if(!O.kG.hasOwnProperty(N)){continue}var M=O.kG[N].hasOwnProperty(L);if(M){return[N,M]}}return false}function F(M,O){if(!O.k){return m(M)}var N="";var P=0;O.lR.lastIndex=0;var L=O.lR.exec(M);while(L){N+=m(M.substr(P,L.index-P));var r=p(O,L);if(r){t+=r[1];N+='<span class="'+r[0]+'">'+m(L[0])+"</span>"}else{N+=m(L[0])}P=O.lR.lastIndex;L=O.lR.exec(M)}N+=m(M.substr(P,M.length-P));return N}function K(r,M){if(M.sL&&d[M.sL]){var L=e(M.sL,r);t+=L.keyword_count;return L.value}else{return F(r,M)}}function I(M,r){var L=M.cN?'<span class="'+M.cN+'">':"";if(M.rB){q+=L;M.buffer=""}else{if(M.eB){q+=m(r)+L;M.buffer=""}else{q+=L;M.buffer=r}}C.push(M);B+=M.r}function E(O,L,Q){var R=C[C.length-1];if(Q){q+=K(R.buffer+O,R);return false}var M=z(L,R);if(M){q+=K(R.buffer+O,R);I(M,L);return M.rB}var r=w(C.length-1,L);if(r){var N=R.cN?"</span>":"";if(R.rE){q+=K(R.buffer+O,R)+N}else{if(R.eE){q+=K(R.buffer+O,R)+N+m(L)}else{q+=K(R.buffer+O+L,R)+N}}while(r>1){N=C[C.length-2].cN?"</span>":"";q+=N;r--;C.length--}var P=C[C.length-1];C.length--;C[C.length-1].buffer="";if(P.starts){I(P.starts,"")}return R.rE}if(x(L,R)){throw"Illegal"}}var H=d[J];var C=[H.dM];var B=0;var t=0;var q="";try{var v=0;H.dM.buffer="";do{var y=s(D,v);var u=E(y[0],y[1],y[2]);v+=y[0].length;if(!u){v+=y[1].length}}while(!y[2]);if(C.length>1){throw"Illegal"}return{r:B,keyword_count:t,value:q}}catch(G){if(G=="Illegal"){return{r:0,keyword_count:0,value:m(D)}}else{throw G}}}function f(t){var r={keyword_count:0,r:0,value:m(t)};var q=r;for(var p in d){if(!d.hasOwnProperty(p)){continue}var s=e(p,t);s.language=p;if(s.keyword_count+s.r>q.keyword_count+q.r){q=s}if(s.keyword_count+s.r>r.keyword_count+r.r){q=r;r=s}}if(q.language){r.second_best=q}return r}function h(r,q,p){if(q){r=r.replace(/^((<[^>]+>|\t)+)/gm,function(t,w,v,u){return w.replace(/\t/g,q)})}if(p){r=r.replace(/\n/g,"<br>")}return r}function o(u,x,q){var y=g(u,q);var s=a(u);if(s=="no-highlight"){return}if(s){var w=e(s,y)}else{var w=f(y);s=w.language}var p=b(u);if(p.length){var r=document.createElement("pre");r.innerHTML=w.value;w.value=l(p,b(r),y)}w.value=h(w.value,x,q);var t=u.className;if(!t.match("(\\s|^)(language-)?"+s+"(\\s|$)")){t=t?(t+" "+s):s}if(/MSIE [678]/.test(navigator.userAgent)&&u.tagName=="CODE"&&u.parentNode.tagName=="PRE"){var r=u.parentNode;var v=document.createElement("div");v.innerHTML="<pre><code>"+w.value+"</code></pre>";u=v.firstChild.firstChild;v.firstChild.cN=r.cN;r.parentNode.replaceChild(v.firstChild,r)}else{u.innerHTML=w.value}u.className=t;u.result={language:s,kw:w.keyword_count,re:w.r};if(w.second_best){u.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function k(){if(k.called){return}k.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p<r.length;p++){var q=j(r[p]);if(q){o(q,hljs.tabReplace)}}}function n(){if(window.addEventListener){window.addEventListener("DOMContentLoaded",k,false);window.addEventListener("load",k,false)}else{if(window.attachEvent){window.attachEvent("onload",k)}else{window.onload=k}}}var d={};this.LANGUAGES=d;this.highlight=e;this.highlightAuto=f;this.fixMarkup=h;this.highlightBlock=o;this.initHighlighting=k;this.initHighlightingOnLoad=n;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="\\b(0x[A-Za-z0-9]+|\\d+(\\.\\d+)?)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\.",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.inherit=function(p,s){var r={};for(var q in p){r[q]=p[q]}if(s){for(var q in s){r[q]=s[q]}}return r}}();hljs.LANGUAGES.bash=function(){var d={"true":1,"false":1};var b={cN:"variable",b:"\\$([a-zA-Z0-9_]+)\\b"};var a={cN:"variable",b:"\\$\\{(([^}])|(\\\\}))+\\}",c:[hljs.CNM]};var c={cN:"string",b:'"',e:'"',i:"\\n",c:[hljs.BE,b,a],r:0};var e={cN:"test_condition",b:"",e:"",c:[c,b,a,hljs.CNM],k:{literal:d},r:0};return{dM:{k:{keyword:{"if":1,then:1,"else":1,fi:1,"for":1,"break":1,"continue":1,"while":1,"in":1,"do":1,done:1,echo:1,exit:1,"return":1,set:1,declare:1},literal:d},c:[{cN:"shebang",b:"(#!\\/bin\\/bash)|(#!\\/bin\\/sh)",r:10},hljs.HCM,hljs.CNM,c,b,a,hljs.inherit(e,{b:"\\[ ",e:" \\]",r:0}),hljs.inherit(e,{b:"\\[\\[ ",e:" \\]\\]"})]}}}();hljs.LANGUAGES.javascript={dM:{k:{keyword:{"in":1,"if":1,"for":1,"while":1,"finally":1,"var":1,"new":1,"function":1,"do":1,"return":1,"void":1,"else":1,"break":1,"catch":1,"instanceof":1,"with":1,"throw":1,"case":1,"default":1,"try":1,"this":1,"switch":1,"continue":1,"typeof":1,"delete":1},literal:{"true":1,"false":1,"null":1}},c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM,hljs.CNM,{b:"("+hljs.RSR+"|case|return|throw)\\s*",k:{"return":1,"throw":1,"case":1},c:[hljs.CLCM,hljs.CBLCLM,{cN:"regexp",b:"/",e:"/[gim]*",c:[{b:"\\\\/"}]}],r:0},{cN:"function",b:"\\bfunction\\b",e:"{",k:{"function":1},c:[{cN:"title",b:"[A-Za-z$_][0-9A-Za-z$_]*"},{cN:"params",b:"\\(",e:"\\)",c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM]}]}]}};hljs.LANGUAGES.css=function(){var a={cN:"function",b:hljs.IR+"\\(",e:"\\)",c:[{eW:true,eE:true,c:[hljs.NM,hljs.ASM,hljs.QSM]}]};return{cI:true,dM:{i:"[=/|']",c:[hljs.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:{"font-face":1,page:1}},{cN:"at_rule",b:"@",e:"[{;]",eE:true,k:{"import":1,page:1,media:1,charset:1},c:[a,hljs.ASM,hljs.QSM,hljs.NM]},{cN:"tag",b:hljs.IR,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[hljs.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[a,hljs.NM,hljs.QSM,hljs.ASM,hljs.CBLCLM,{cN:"hexcolor",b:"\\#[0-9A-F]+"},{cN:"important",b:"!important"}]}}]}]}]}}}();hljs.LANGUAGES.xml=function(){var b="[A-Za-z0-9\\._:-]+";var a={eW:true,c:[{cN:"attribute",b:b,r:0},{b:'="',rB:true,e:'"',c:[{cN:"value",b:'"',eW:true}]},{b:"='",rB:true,e:"'",c:[{cN:"value",b:"'",eW:true}]},{b:"=",c:[{cN:"value",b:"[^\\s/>]+"}]}]};return{cI:true,dM:{c:[{cN:"pi",b:"<\\?",e:"\\?>",r:10},{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style",e:">",k:{title:{style:1}},c:[a],starts:{cN:"css",e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script",e:">",k:{title:{script:1}},c:[a],starts:{cN:"javascript",e:"<\/script>",rE:true,sL:"javascript"}},{cN:"vbscript",b:"<%",e:"%>",sL:"vbscript"},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ />]+"},a]}]}}}();


--------------------------------------------------------------------------------
/tutorial/publish.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | 
3 | markdown_py -x toc tutorial.txt > _tutorial.html 
4 | cat header.html _tutorial.html | sed -e 's/<code>/<code class="javascript">/' >tutorial.html
5 | rm _tutorial.html
6 | 


--------------------------------------------------------------------------------
/tutorial/tutorial.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="utf-8" />
  5 | 	<title>Backbone-relational Tutorial - Nested Models With Backbone.js</title>
  6 |     <link rel="stylesheet" href="css/markdown.css">
  7 |     <link rel="stylesheet" href="css/highlight.css">
  8 | 
  9 |     <script type="text/javascript" src="js/highlight.pack.js"></script>
 10 |     <script type="text/javascript">
 11 |         hljs.initHighlightingOnLoad();
 12 |     </script>
 13 | 
 14 | </head>
 15 | 
 16 | <body>
 17 | 
 18 | <h1 id="backbone-relational-tutorial-nested-models-with-backbonejs">Backbone-relational Tutorial - Nested Models With Backbone.js</h1>
 19 | <h2 id="introduction">Introduction</h2>
 20 | <h3 id="backbonejs">Backbone.js</h3>
 21 | <p>Backbone.js allows to implement the whole MVC pattern on the client, leaving the server to do what he knows best: exposing a set of well-defined REST interfaces, which the client queries when he needs to fetch or update some information. No need to split the HTML rendering between the server templates and the client-side javascript. </p>
 22 | <p>It's not only cleaner, it's also an excellent architecture to make responsive applications. Less information needs to be exchanged with the server - the formatting (views and controllers) being on the client, you only need to exchange the data being manipulated on the REST interfaces. </p>
 23 | <p>No full page reload - the server sends a static HTML file upon the first request, then the JS client handles the interaction with the user, only remodeling the portions of the DOM that changes between pages. And, better still, Backbone.js takes care of a large part of the work required to synchronize data with the server. Sweet!</p>
 24 | <h3 id="backbone-relational">Backbone-relational</h3>
 25 | <p>However, when I recently started to learn about Backbone, I realized it doesn't help to handle relationships between models. Most non-trivial applications need this - forum threads each have a series of comments, billing invoices have several items to charge for... </p>
 26 | <p>If you're reading this, you've probably found out about backbone-relational after reading a few threads. But the documentation is sparse, and it's hard to see how to use it practically. How do you structure your views to represent the relations between models? How do you update or push relational models to their corresponding REST APIs?</p>
 27 | <h3 id="scope-of-the-tutorial">Scope of the tutorial</h3>
 28 | <p>This tutorial attempts to answer that - showing you, step by step, how to structure a sample application (a simplistic forum), using Backbone-relational to expose inter-dependent models from a set of REST APIs. </p>
 29 | <p>Note that this not meant to be a complete tutorial on Backbone.js, it is more a practical HOWTO on how to proceed with nested relationships once you've understood the basics. You may want to read a <a href="http://backbonetutorials.com/">Backbone.js tutorial</a> to learn about Backbone.js' models, views, routers and collections. Maybe also have a quick look at the <a href="http://documentcloud.github.com/backbone/examples/todos/index.html">TODO sample application</a> to get a feel of how code based on Backbone looks like - it is simpler as it doesn't use relational model and doesn't attempt to synchronize with REST services.</p>
 30 | <p>Another great source of information is the <a href="http://documentcloud.github.com/backbone/docs/backbone.html">source code of Backbone.js</a> itself, which is short, readable and extensively annotated. Whenever in doubt, don't hesitate to dig in.</p>
 31 | <blockquote>
 32 | <p><em>Warning: I'm new to Backbone, so don't expect a definitive resource. I merely attempted to provide the tutorial that I wish I had found when I first tried Backbone-relational. If you notice mistakes, or know better techniques than what is explained here, please leave a comment or make a pull request on the <a href="https://github.com/antoviaque/backbone-relational-tutorial">project page</a>. Thanks!</em></p>
 33 | </blockquote>
 34 | <h2 id="the-application">The Application</h2>
 35 | <p>To demonstrate how Backbone-relational allows you to define relationships between models, and how to sync the data with the server in this case, we're going to look at a simple forum application. It should allow to create forum threads (topics) and list the threads that have been created, as well as post messages in each thread. </p>
 36 | <p><img alt="Threads List" src="./img/screenshot1.png" title="Threads list" /></p>
 37 | <p>Fig 1 - Threads list</p>
 38 | <p><img alt="Contents of a thread" src="./img/screenshot2.png" title="Content of a thread" /></p>
 39 | <p>Fig 2 - Contents of a thread</p>
 40 | <h3 id="models-data-structure">Models Data Structure</h3>
 41 | <p>Although simple enough for the scope of this tutorial, the fact that each thread should be able to contain several messages is a good use case for Backbone-relational - one of those fairly common situation where you want to create a one-to-many relationship between two models. </p>
 42 | <ul>
 43 | <li>Thread object<ul>
 44 | <li>Thread._id: Unique identifier for a forum thread (defined by the database, String)</li>
 45 | <li>Thread.title: Topic of a forum thread (String)</li>
 46 | <li>Thread.messages (Array): Message objects<ul>
 47 | <li>Message._id: Unique identifier for a message (defined by the database, String)</li>
 48 | <li>Message.author: Name of the message author (String)</li>
 49 | <li>Message.text: Body of a message</li>
 50 | </ul>
 51 | </li>
 52 | </ul>
 53 | </li>
 54 | </ul>
 55 | <p>Backbone-relation supports other types of relationships, one-to-one and many-to-many - once you have been through this tutorial, using those other types of relationships should be straightforward. Refer to the <a href="https://github.com/PaulUithol/Backbone-relational">Backbone-relational documentation</a> for more information.</p>
 56 | <h3 id="getting-the-sample-application-running">Getting the sample application running</h3>
 57 | <p>The application is available via git, if you don't want to bother copy-pasting : )</p>
 58 | <pre><code class="javascript">$ git clone git://github.com/antoviaque/backbone-relational-tutorial.git
 59 | </code></pre>
 60 | <p>A sample implementation of the web service providing the REST interfaces is provided in the tutorial code. The server side is out of the scope of this tutorial, so I won't say much about it. If you're interested in learning more on this part, there are a lot of resources about <a href="http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js">Node.js</a>, <a href="http://mcavage.github.com/node-restify/">Restify</a>, <a href="http://www.mongodb.org/display/DOCS/Tutorial">MongoDB</a> and <a href="http://stackoverflow.com/questions/6319899/any-good-tutorial-for-mongoose-with-node-js">Mongoose</a> you can refer to.</p>
 61 | <p>To get the server-side to work, you need to install <a href="http://nodejs.org/">Node.js</a> (tested on 0.6.12), either from a <a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">package manager</a>, or from source:</p>
 62 | <pre><code class="javascript">$ wget http://nodejs.org/dist/v0.6.12/node-v0.6.12.tar.gz
 63 | $ tar xvzf node-v0.6.12.tar.gz
 64 | $ cd node-v0.6.12
 65 | $ ./configure
 66 | $ make
 67 | $ sudo make install
 68 | </code></pre>
 69 | <p>Then install <a href="http://www.mongodb.org/">MongoDB</a> - on a Debian/Ubuntu:</p>
 70 | <pre><code class="javascript">$ sudo apt-get install mongodb-server
 71 | $ sudo /etc/init.d/mongodb start
 72 | </code></pre>
 73 | <p>Use NPM to checkout the required packages</p>
 74 | <pre><code class="javascript">$ npm install
 75 | </code></pre>
 76 | <p>The node.js dependencies are already included in the node_modules/ directory, so all you should need once Node and mongodb are installed is to run:</p>
 77 | <pre><code class="javascript">$ node app
 78 | </code></pre>
 79 | <p>It will start a node instance on the port 3001.</p>
 80 | <ul>
 81 | <li>The <code class="javascript">static/</code> subdirectory on the root folder (loading <code>index.html</code> when you access <code>http://localhost:3000/</code> or any URL starting with <code>http://localhost:3000/thread/</code>);</li>
 82 | <li>Proxy requests made to any URL starting with <code class="javascript">http://localhost:3000/api</code> to the node server at <code>http://localhost:3001/</code></li>
 83 | </ul>
 84 | <h3 id="application-structure">Application structure</h3>
 85 | <ul>
 86 | <li><code class="javascript">static/index.html</code>: Includes all the base HTML structure we'll find on all pages, along with the templates for each of the views. You'll notice that I use <a href="http://handlebarsjs.com/">Handlebars</a> as the template engine, rather than <a href="http://documentcloud.github.com/underscore/">Underscore</a>'s default one, but you should be able to achieve the same results with any of the javascript templating engines around - just pick your favorite.</li>
 87 | <li><code class="javascript">static/js/forum.js</code>: Defines a <code>$.forum</code> object, which contains all the application objects. Some developers chose to assign them to the <code>window</code> object, or define them as globals. Defining a specific array allows to isolate ours objects on a dedicated namespace.</li>
 88 | <li><code class="javascript">app.js</code> and <code>models.js</code>: Node.js application files - serves the REST API requests and connects to the MongoDB database.</li>
 89 | </ul>
 90 | <h2 id="defining-the-models">Defining the models</h2>
 91 | <p>We're defining two models, <code class="javascript">Thread</code> and <code>Message</code>, a <code>Thread</code> being able to contain multiple <code>Messages</code>.</p>
 92 | <h3 id="message-model">Message Model</h3>
 93 | <pre><code class="javascript">$.forum.Message = Backbone.RelationalModel.extend({
 94 |     urlRoot: '/api/message',
 95 |     idAttribute: '_id',
 96 | });
 97 | </code></pre>
 98 | <p>The <code class="javascript">Message</code> model, the most simple. Note that we're extending Backbone.RelationalModel rather than BackboneModel, to take advantage of the extra features Backbone-relational. We're just telling Backbone where to find the corresponding resource on the server (<code>urlRoot</code>), and what attribute the server is using to uniquely identify each message (<code>idAttribute</code>).</p>
 99 | <h4 id="rest-api-post-apimessage">REST API - POST /api/message/</h4>
100 | <p>The REST interface on the server is at <code class="javascript">/api/message</code>, and allows to POST a message of the following JSON format:</p>
101 | <pre><code class="javascript">{
102 |     "author": "Author Name",
103 |     "text": "The message",
104 |     "thread": "thread_id"
105 | }
106 | </code></pre>
107 | <p>The <code class="javascript">thread</code> attribute will be automatically defined by Backbone-relational, and will contain the <code>_id</code> attribute of the Thread model defined below. It allows the webservice to know which thread the message belongs to.</p>
108 | <p>If the request is successful, the server returns the same object, to which it adds the unique <code class="javascript">_id</code> attribute used by the database to identify it.</p>
109 | <p>For the simple forum we're developing for this tutorial, we only need to define a <code class="javascript">POST</code> interface. It allows to add <em>new</em> <code>message</code> objects to the database - this will come handy when you'll be visiting a given thread and will want to post a reply to the initial post. We will be <code>GET</code>ting the <code>message</code> objects currently in the database from the <code>/api/thread/</code> interface defined below. If we were implementing a full-fledged application, we would define all the methods: <code>GET</code> to retreive individual <code>message</code> objects, <code>PUT</code> to update an existing <code>message</code>, <code>DELETE</code>, etc.</p>
110 | <h3 id="thread-model">Thread Model</h3>
111 | <pre><code class="javascript">$.forum.Thread = Backbone.RelationalModel.extend({
112 |     urlRoot: '/api/thread',
113 |     idAttribute: '_id',
114 |     relations: [{
115 |         type: Backbone.HasMany,
116 |         key: 'messages',
117 |         relatedModel: '$.forum.Message',
118 |         reverseRelation: {
119 |             key: 'thread',
120 |             includeInJSON: '_id',
121 |         },
122 |     }]
123 | });
124 | </code></pre>
125 | <p>The <code class="javascript">relations</code> option comes from Backbone-relational, and allows to specify how the <code>Thread</code> objects relate to the <code>Message</code> objects:</p>
126 | <ul>
127 | <li><code class="javascript">type: Backbone.HasMany</code>: Each <code>Thread</code> can contain references to multiple <code>Message</code>s.</li>
128 | <li><code class="javascript">key: 'messages'</code>: The name of the attribute of <code>Thread</code> objects containing the external references. <code>Thread.messages</code> will contain an array of <code>Message</code>s.</li>
129 | <li><code class="javascript">relatedModel: '$.forum.Message'</code>: The model being referenced.</li>
130 | <li><code class="javascript">reverseRelation.key = 'thread'</code>: The reverse reference to the <code>Thread</code> object, from each of the <code>Message</code> objects contained. For example, if <code>thread.messages = [message]</code>, then <code>message.thread</code> will contain a reference to the <code>thread</code> object.</li>
131 | <li><code class="javascript">reverseRelation.includeInJSON = '_id'</code>: Tells Backbone-relational to store the value of one of the <code>Thread</code> attributes in <code>message.thread</code>, rather than a reference to the object itself. Here, if <code>thread._id = '123'</code>, then <code>message.thread</code> will contain '123'.</li>
132 | </ul>
133 | <h4 id="rest-api-get-apithreadid">REST API - GET /api/thread/:id</h4>
134 | <p>The REST interface on the server is at <code class="javascript">/api/thread/</code>, and allows to GET a <code>thread</code> object along with all its messages by specifying its id (<code>/api/thread/456</code>), using the following JSON format:</p>
135 | <pre><code class="javascript">{
136 |     "_id": "456",
137 |     "title": "The thread title",
138 |     "messages": [
139 |         {
140 |             "_id": "123",
141 |             "author": "Author Name",
142 |             "text": "The message"
143 |         }, {
144 |             "_id": "124",
145 |             "author": "Second Author Name",
146 |             "text": "The reply to the previous message"
147 |         }
148 |     ]
149 | }
150 | </code></pre>
151 | <p>The <code class="javascript">messages</code> attribute contains a list of all the messages contained in the thread. The <code>message</code>s objects are expanded (it's not just a reference to their ids), to allow to get the whole content of a thread in one request. </p>
152 | <p>Backbone-relational will automatically assign each of the array elements of the <code class="javascript">message</code> attribute to a separate <code>Message</code> object, and set the reverse reference (<code>message.thread</code>) to the value of the <code>thread._id</code> attribute (here, "456").</p>
153 | <h4 id="rest-api-post-apithread">REST API - POST /api/thread/</h4>
154 | <p>The interface also allows to POST a new <code class="javascript">thread</code> to add to the database, by sending the following JSON structure:</p>
155 | <pre><code class="javascript">{
156 |     "title": "My new thread",
157 |     "messages": []
158 | }
159 | </code></pre>
160 | <p>If successful, the server returns the same object, to which it adds the unique '_id' attribute used by the database to identify it.</p>
161 | <h3 id="list-of-threads">List of threads</h3>
162 | <p>The <code class="javascript">Thread</code> and <code>Message</code> models, along with their associated APIs server-side, allow us to keep track of all the messages in a given thread, and to post new threads and messages. However, we're still missing one important piece of informations - how do we know which threads are already in the forum? We want to present a list of all the forum threads to the visitors.</p>
163 | <p>This is where collections come in - they allow to query the database for a set of objects (here, all the forum threads), a bit like the way a <code class="javascript">Thread</code> contains a reference to a set of <code>Message</code>s.</p>
164 | <pre><code class="javascript">$.forum.ThreadCollection = Backbone.Collection.extend({
165 |     url: '/api/thread',
166 |     model: $.forum.Thread,
167 | })
168 | </code></pre>
169 | <h4 id="rest-api-get-apithread">REST API - GET /api/thread/</h4>
170 | <p>The collection will <code class="javascript">GET /api/thread/</code> for the array of all the forum threads:</p>
171 | <pre><code class="javascript">[
172 |     {
173 |         "_id": "456",
174 |         "title": "The thread title",
175 |         "messages": [
176 |             {
177 |                 "_id": "123",
178 |                 "author": "Author Name",
179 |                 "text": "The message"
180 |             }, {
181 |                 "_id": "124",
182 |                 "author": "Second Author Name",
183 |                 "text": "The reply to the previous message"
184 |             }
185 |         ]
186 |     }, {
187 |         "_id": "457",
188 |         "title": "My new thread",
189 |         "messages": []
190 |     }
191 | ]
192 | </code></pre>
193 | <h2 id="the-router">The Router</h2>
194 | <p>Now that we have our models, we can start looking at doing something with the data they contain. In our simple forum, we serve only two different types of pages:</p>
195 | <ul>
196 | <li>The <em>list of threads</em>, which is also be the homepage, available at <code class="javascript">http://localhost:3000/</code> (<code>show_thread_list</code>)</li>
197 | <li>The content of a <em>single thread</em>, available at <code class="javascript">http://localhost:3000/thread/&lt;id_of_the_thread&gt;/</code> (<code>show_thread</code>)</li>
198 | </ul>
199 | <p>The URL router, which binds URLs (routes) to views, is:</p>
200 | <pre><code class="javascript">$.forum.Router = Backbone.Router.extend({
201 |     routes: {
202 |         "": "show_thread_list",
203 |         "thread/:_id/": "show_thread",
204 |     },
205 | 
206 |     show_thread_list: function() {
207 |         var thread_collection = new $.forum.ThreadCollection();
208 |         var thread_list_view = new $.forum.ThreadListView({el: $('#content'), model: thread_collection });
209 |         thread_collection.fetch();
210 |     },
211 | 
212 |     show_thread: function(_id) {
213 |         var thread = new $.forum.Thread({_id: _id});
214 |         var thread_view = new $.forum.ThreadView({el: $('#content'), model: thread});
215 |         thread.fetch();
216 |     },
217 | 
218 | });
219 | </code></pre>
220 | <p>In both controller methods, the approach is similar (note that you don't need to understand every detail just yet - just keep in mind the way requests are processed):</p>
221 | <ol>
222 | <li>Instantiate the model (or the collection, since a collection is simply a way to refer to several models simulteanously) corresponding to the current URL/view.</li>
223 | <li>Instantiate a view, which will use the model from 1) to produce its HTML representation. It will insert the result inside the DOM element we provide (<code class="javascript">el: $('#content')</code>).</li>
224 | <li>Get the model/collection to retreive the data from the server corresponding to its instantiation in 1). Doing so will trigger events in the view we instantiated in 2), and cause the view to refresh itself. Note that steps 1) and 2) don't actually modify the DOM or manipulate any data from or to the server. They just instantiate objects which start to listen to events. </li>
225 | </ol>
226 | <p>For example, a request to <code class="javascript">http://localhost:3000/thread/123</code> will get a <code>Thread({id: '123'})</code> object instantiated, which will <code>fetch()</code> its data at <code>/api/thread/123</code>. Once the server has returned the JSON data, events will be triggered on the <code>ThreadView</code> object (see below).</p>
227 | <h2 id="displaying-a-single-thread">Displaying a Single Thread</h2>
228 | <p>A single thread can contain multiple messages. We thus need to define two different views - one to represent the Thread, for example its title (<code class="javascript">ThreadView</code>), one to represent each of the messages it contains (<code>MessageView</code>).</p>
229 | <h3 id="threadview">ThreadView</h3>
230 | <h4 id="template">Template</h4>
231 | <pre><code class="javascript">&lt;script type="text/template" id="tpl_thread"&gt;
232 |     &lt;h2 class="centered"&gt;Thread - "{{title}}"&lt;/h2&gt;
233 | 
234 |     &lt;div class="message_list"&gt;&lt;/div&gt;
235 | 
236 |     &lt;h2&gt;New message&lt;/div&gt;
237 |     &lt;ul&gt;
238 |         &lt;li&gt;Author: &lt;input class="new_message_author" type="text" /&gt;&lt;/li&gt;
239 |         &lt;li&gt;Text: &lt;textarea class="new_message_text" /&gt;&lt;/li&gt;
240 |     &lt;/ul&gt;
241 |     &lt;input type="submit" value="Post message" /&gt;
242 |     &lt;/ul&gt;
243 |     &lt;div class="error_message"&gt;&lt;/div&gt;
244 | &lt;/script&gt;
245 | </code></pre>
246 | <h4 id="view">View</h4>
247 | <pre><code class="javascript">$.forum.ThreadView = Backbone.View.extend({
248 |     tagName: 'div',
249 | 
250 |     className: 'thread_view',
251 | </code></pre>
252 | <p>The HTML representation of the thread will be contained in a <code class="javascript">&lt;div class="thread_view"&gt;&lt;/div&gt;</code> container.</p>
253 | <pre><code class="javascript">    initialize: function(){
254 |         _.bindAll(this, 'render', 'render_message', 'on_submit');
255 |         this.model.bind('change', this.render);
256 |         this.model.bind('reset', this.render);
257 |         this.model.bind('add:messages', this.render_message); 
258 |     },
259 | </code></pre>
260 | <p><code class="javascript">bindAll()</code> comes from <a href="http://documentcloud.github.com/underscore/">Underscore</a>, and allows to make sure that the specified methods are always invoked with <code>this</code> pointing to the current object.</p>
261 | <p><code class="javascript">this.model</code> points to the <code>{model: ...}</code> attribute passed when ThreadView is initialized in the router. It contains a reference to the model the view is representing, and allows us to listen to events from the model:</p>
262 | <ul>
263 | <li>When the model <code class="javascript">change</code>s or is <code>reset</code>, we redraw the view entirely (<code>this.render</code>)</li>
264 | <li>
265 | <p>When a new message is added to the thread, add it on the DOM. This happens when a new message is added to the <code class="javascript">thread.messages</code> array, or when a new message is saved with a <code>message.thread</code> set to the same value as the <code>thread._id</code>.</p>
266 | <pre><code class="javascript">template: Handlebars.compile($('#tpl_thread').html()),
267 | 
268 | render: function() {
269 |     return $(this.el).html(this.template(this.model.toJSON()));
270 | },
271 | </code></pre>
272 | </li>
273 | </ul>
274 | <p>Use <code class="javascript">#tpl_thread</code> as the template. The model's attributes are passed as the current context to Handlebars, which replaces the corresponding variables in the <code>#tpl_thread</code> template and returns the resulting HTML. This HTML is inserted in the <code>{el: ...}</code> element via jQuery (cf the route, <code>el</code> here is <code>$(#content')</code>).</p>
275 | <p>Note that the thread template doesn't attempt to represent the thread's messages. Backbone-relational triggers the 'add:messages' event on the model for each contained message, every time the model is <code class="javascript">fetch()</code>'ed. When the router calls <code>thread.fetch()</code>, Backbone will first trigger the 'reset' event, which will run the <code>render()</code> method and get the <code>#tpl_thread</code> inserted. Then Backbone-relational will trigger the 'add:messages' event, and call <code>render_message()</code> for each of the messages the thread contains:</p>
276 | <pre><code class="javascript">    render_message: function(message) {
277 |         var message_view = new $.forum.MessageView({model: message});
278 |         this.$('div.message_list').append($(message_view.render()));
279 |     },
280 | </code></pre>
281 | <p><code class="javascript">message</code> will be an instance of the <code>Message</code> model. We use it to instantiate a <code>MessageView</code> view, like we did in the router for the <code>ThreadView</code>. The main difference is that Backbone-relational has already retreived the messages data, so we don't need to <code>fetch()</code> it. The messages data was contained in the response from the API request to get the thread data (<code>/api/thread/123</code> - see <em>"REST API - GET /api/thread/:id"</em> above).</p>
282 | <pre><code class="javascript">    events: {
283 |         'click input[type=submit]': 'on_submit',
284 |     },
285 | 
286 |     on_submit: function(e) {
287 |         var new_message = new $.forum.Message({author: this.$('.new_message_author').val(), text: this.$('.new_message_text').val(), thread: this.model});
288 |         new_message.save();
289 |     },
290 | });
291 | </code></pre>
292 | <p>Here, we give the visitor the ability to post a new message in the current thread. We monitor clicks on the submit button, retreive the data the user entered using jQuery selectors (<code class="javascript">this.$('.class')</code> is a shortcut for <code>$('.class', this.el)</code>), instantiate a new <code>Message</code> object with the user data, and get Backbone to send it to the API with the <code>save()</code> method. This will send the data to <code>/api/message</code> as a POST request. The <code>message.thread</code> attribute will be set to the value of <code>thread._id</code>, to let the server know which thread to add the message to.</p>
293 | <p>Since we're adding a new message to <code class="javascript">thread.messages</code>, Backbone-relational will trigger the "add:messages" event, and the new message will get automatically inserted in the DOM via the <code>render_message()</code> method - no extra effort required!</p>
294 | <h3 id="messageview">MessageView</h3>
295 | <h4 id="template_1">Template</h4>
296 | <pre><code class="javascript">&lt;script type="text/template" id="tpl_message"&gt;
297 |     &lt;div class="message"&gt;
298 |         &lt;div class="message_author"&gt;By: {{author}}&lt;/div&gt;
299 |         &lt;div class="message_text"&gt;{{text}}&lt;/div&gt;
300 |     &lt;/div&gt;
301 | &lt;/script&gt;
302 | </code></pre>
303 | <h4 id="view_1">View</h4>
304 | <p>We used a <code class="javascript">MessageView</code> view above to represent individual messages - we thus need to define it to let Backbone know which template to use:</p>
305 | <pre><code class="javascript">$.forum.MessageView = Backbone.View.extend({
306 |     tagName: 'div',
307 | 
308 |     className: 'message_view',
309 | 
310 |     initialize: function(){
311 |         _.bindAll(this, 'render');
312 |         this.model.bind('change', this.render);
313 |     },
314 | 
315 |     template: Handlebars.compile($('#tpl_message').html()),
316 | 
317 |     render: function() {
318 |         return $(this.el).html(this.template(this.model.toJSON()));
319 |     },
320 | });
321 | </code></pre>
322 | <h2 id="displaying-a-list-of-all-threads">Displaying a List of All Threads</h2>
323 | <p>This is very similar to displaying a single thread - instead of having a thread model containing a list of messages, we have a collection containining a list of all the threads. So we'll need one view for the collection, <code class="javascript">ThreadListView</code>, and one view for each of the threads, <code>ThreadSummaryView</code>. We don't need to display individual messages, but we'll still use them inside of the <code>ThreadSummaryView</code> to show a message count for the whole thread.</p>
324 | <h3 id="threadlistview">ThreadListView</h3>
325 | <h4 id="template_2">Template</h4>
326 | <pre><code class="javascript">&lt;script type="text/template" id="tpl_thread_list"&gt;
327 |     &lt;h2 class="centered"&gt;Threads&lt;/h2&gt;
328 | 
329 |     &lt;ul class="thread_list"&gt;&lt;/ul&gt;
330 | 
331 |     &lt;h2&gt;New Thread&lt;/h2&gt;
332 |     &lt;ul&gt;
333 |         &lt;li&gt;Title: &lt;input type="text" class="new_thread_title" /&gt;&lt;/li&gt;
334 |         &lt;li&gt;Author: &lt;input class="new_message_author" type="text" /&gt;&lt;/li&gt;
335 |         &lt;li&gt;Message: &lt;textarea class="new_message_text" /&gt;&lt;/li&gt;
336 |         &lt;li&gt;&lt;input type="submit" class="new_thread_submit" value="Create thread" /&gt;&lt;/li&gt;
337 |     &lt;/ul&gt;
338 |     &lt;div class="error_message"&gt;&lt;/div&gt;
339 | &lt;/script&gt;
340 | </code></pre>
341 | <h4 id="view_2">View</h4>
342 | <pre><code class="javascript">$.forum.ThreadListView = Backbone.View.extend({
343 |     tagName: 'div',
344 | 
345 |     className: 'thread_list_view',
346 | 
347 |     initialize: function(){
348 |         _.bindAll(this, 'render', 'render_thread_summary', 'on_submit', 'on_thread_created', 'on_error');
349 |         this.model.bind('reset', this.render); 
350 |         this.model.bind('change', this.render); 
351 |         this.model.bind('add', this.render_thread_summary); 
352 |     },
353 | </code></pre>
354 | <p>Although the view renders a collection and not a single model, we attach the collection object to the <code class="javascript">this.model</code> attribute. This is because Backbone automatically sets the <code>model</code> attribute of a view when a <code>{model: xxx}</code> option is passed when the view is instantiated. If we passed a <code>{collection: xxx}</code> instead in the router method, we would have to access the attribute at <code>this.options.collection</code>.</p>
355 | <pre><code class="javascript">    template: Handlebars.compile($('#tpl_thread_list').html()),
356 | 
357 |     render: function() {
358 |         $(this.el).html(this.template());
359 |         this.model.forEach(this.render_thread_summary);
360 |         return $(this.el).html();
361 |     },
362 | </code></pre>
363 | <p>One notable difference in the way collections and relational models behave regarding events is that collections don't trigger the 'add' event when the collection is initially <code class="javascript">fetch()</code>'ed. We thus have to call the <code>render_thread_summary()</code> manually in the <code>render()</code> method, we can't assume <code>render_thread_summary()</code> will be called after <code>render()</code> every time the collection is rendered.</p>
364 | <pre><code class="javascript">    render_thread_summary: function(thread) {
365 |         var thread_summary_view = new $.forum.ThreadSummaryView({model: thread});
366 |         this.$('ul.thread_list').prepend($(thread_summary_view.render()));
367 |     },
368 | 
369 |     events: {
370 |         'click input[type=submit]': 'on_submit',
371 |     },
372 | </code></pre>
373 | <p>This is also similar to the <code class="javascript">ThreadView</code>. We append the HTML from the <code>ThreadSummaryView</code> of each of the threads to the DOM, and monitor clicks on the submit button, on the form allowing a visitor to create a new thread and post a first message in it.</p>
374 | <pre><code class="javascript">    on_submit: function(e) {
375 |         var thread = new $.forum.Thread({ title: this.$('.new_thread_title').val() });
376 |         thread.save({}, { success: this.on_thread_created, error: this.on_error });
377 |     },
378 | </code></pre>
379 | <p>Here, however, we'll be saving two distinct objects: first we'll create the new thread, and once the thread has been created on the server, we'll add a message in it. We wait for the <code class="javascript">thread.save()</code> to complete to get the <code>thread._id</code> from the server's response:</p>
380 | <pre><code class="javascript">    on_thread_created: function(thread, response) {
381 |         this.model.add(thread, {at: 0});
382 |         var message = new $.forum.Message({ author: this.$('.new_message_author').val(), text: this.$('.new_message_text').val(), thread: thread.get('_id') });
383 |         message.save({}, { 
384 |             success: function() {
385 |                 $.forum.app.navigate('thread/'+thread.get('_id')+'/', { trigger: true });
386 |             },
387 |             error: this.on_error,
388 |         });
389 |     },
390 | </code></pre>
391 | <p>The collection doesn't automatically know that the new thread should belong to the collection, we thus need to add it manually. This will trigger the <code class="javascript">render_thread_summary()</code> method, and add the new thread to the DOM.</p>
392 | <pre><code class="javascript">    on_error: function(model, response) {
393 |         var error = $.parseJSON(response.responseText);
394 |         this.$('.error_message').html(error.message);
395 |     },
396 | });
397 | </code></pre>
398 | <p>We also define an error method, to alert the user if something goes wrong. In such a case - for example a validation error - the server should return a JSON string of the following format:</p>
399 | <pre><code class="javascript">{'error': 'Error message'}
400 | </code></pre>
401 | <h3 id="threadsummaryview">ThreadSummaryView</h3>
402 | <p>The <code class="javascript">ThreadSummaryView</code> uses the same model as <code>ThreadView</code>, but presents it differently. Since we're showing a list of all threads, we don't need to show all the details - especially the content of the messages, even if the data itself is available in a similar manner.</p>
403 | <h4 id="template_3">Template</h4>
404 | <pre><code class="javascript">&lt;script type="text/template" id="tpl_thread_summary"&gt;
405 |     &lt;span class="thread_title"&gt;{{title}}&lt;/span&gt; 
406 |     &lt;span class="thread_nb_messages"&gt;{{messages.length}} messages&lt;/span&gt;
407 | &lt;/script&gt;
408 | </code></pre>
409 | <h4 id="view_3">View</h4>
410 | <pre><code class="javascript">$.forum.ThreadSummaryView = Backbone.View.extend({
411 |     tagName: 'li',
412 | 
413 |     className: 'thread_summary_view',
414 | 
415 |     initialize: function(){
416 |         _.bindAll(this, 'render', 'on_click');
417 |         this.model.bind('change', this.render);
418 |     },
419 | 
420 |     template: Handlebars.compile($('#tpl_thread_summary').html()),
421 | 
422 |     render: function() {
423 |         return $(this.el).html(this.template(this.model.toJSON()));
424 |     },
425 | </code></pre>
426 | <p>You should now be familiar with those - we get the right template, render it and insert the resulting HTML in the DOM.</p>
427 | <pre><code class="javascript">    events: {
428 |         'click': 'on_click',
429 |     },
430 | 
431 |     on_click: function(e) {
432 |         $.forum.app.navigate('thread/'+this.model.get('_id')+'/', {trigger: true});
433 |     },
434 | });
435 | </code></pre>
436 | <p>The last missing bit - allowing the visitor to click on a thread in the threads list (at <code class="javascript">"/"</code>), to be able to navigate to the dedicated thread page (<code>"/thread/123"</code>). We monitor the 'click' event on the current view (clicks on <code>this.el</code>), and when this happen, we ask the router to change the URL. <code>{trigger: true}</code> makes the router also trigger the controller method corresponding to the new URL - here, <code>show_thread()</code>.</p>
437 | <h2 id="license">License</h2>
438 | <p>The text of this tutorial, aside from the code portions, is licensed under the <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>. </p>
439 | <p>The code and graphical assets are released under the <a href="http://www.gnu.org/licenses/agpl.html">GNU Affero General Public License</a> as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.</p>
440 | <p>This tutorial and the sample program are distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the <a href="http://www.gnu.org/licenses/agpl.html">GNU Affero General Public License</a> for more details.</p>
441 | 


--------------------------------------------------------------------------------
/tutorial/tutorial.txt:
--------------------------------------------------------------------------------
  1 | Backbone-relational Tutorial - Nested Models With Backbone.js
  2 | =============================================================
  3 | 
  4 | Introduction
  5 | ------------
  6 | 
  7 | ### Backbone.js
  8 | 
  9 | Backbone.js allows to implement the whole MVC pattern on the client, leaving the server to do what he knows best: exposing a set of well-defined REST interfaces, which the client queries when he needs to fetch or update some information. No need to split the HTML rendering between the server templates and the client-side javascript. 
 10 | 
 11 | It's not only cleaner, it's also an excellent architecture to make responsive applications. Less information needs to be exchanged with the server - the formatting (views and controllers) being on the client, you only need to exchange the data being manipulated on the REST interfaces. 
 12 | 
 13 | No full page reload - the server sends a static HTML file upon the first request, then the JS client handles the interaction with the user, only remodeling the portions of the DOM that changes between pages. And, better still, Backbone.js takes care of a large part of the work required to synchronize data with the server. Sweet!
 14 | 
 15 | ### Backbone-relational
 16 | 
 17 | However, when I recently started to learn about Backbone, I realized it doesn't help to handle relationships between models. Most non-trivial applications need this - forum threads each have a series of comments, billing invoices have several items to charge for... 
 18 | 
 19 | If you're reading this, you've probably found out about backbone-relational after reading a few threads. But the documentation is sparse, and it's hard to see how to use it practically. How do you structure your views to represent the relations between models? How do you update or push relational models to their corresponding REST APIs?
 20 | 
 21 | ### Scope of the tutorial
 22 | 
 23 | This tutorial attempts to answer that - showing you, step by step, how to structure a sample application (a simplistic forum), using Backbone-relational to expose inter-dependent models from a set of REST APIs. 
 24 | 
 25 | Note that this not meant to be a complete tutorial on Backbone.js, it is more a practical HOWTO on how to proceed with nested relationships once you've understood the basics. You may want to read a [Backbone.js tutorial][Backbone.js Tutorials] to learn about Backbone.js' models, views, routers and collections. Maybe also have a quick look at the [TODO sample application][TODO Sample Application] to get a feel of how code based on Backbone looks like - it is simpler as it doesn't use relational model and doesn't attempt to synchronize with REST services.
 26 | 
 27 | Another great source of information is the [source code of Backbone.js][Source Code of Backbone.js] itself, which is short, readable and extensively annotated. Whenever in doubt, don't hesitate to dig in.
 28 | 
 29 | > _Warning: I'm new to Backbone, so don't expect a definitive resource. I merely attempted to provide the tutorial that I wish I had found when I first tried Backbone-relational. If you notice mistakes, or know better techniques than what is explained here, please leave a comment or make a pull request on the [project page][Project Page]. Thanks!_
 30 | 
 31 | The Application
 32 | ---------------
 33 | 
 34 | To demonstrate how Backbone-relational allows you to define relationships between models, and how to sync the data with the server in this case, we're going to look at a simple forum application. It should allow to create forum threads (topics) and list the threads that have been created, as well as post messages in each thread. 
 35 | 
 36 | ![Threads List](./img/screenshot1.png "Threads list")
 37 | 
 38 | Fig 1 - Threads list
 39 | 
 40 | ![Contents of a thread](./img/screenshot2.png "Content of a thread")
 41 | 
 42 | Fig 2 - Contents of a thread
 43 | 
 44 | ### Models Data Structure
 45 | 
 46 | Although simple enough for the scope of this tutorial, the fact that each thread should be able to contain several messages is a good use case for Backbone-relational - one of those fairly common situation where you want to create a one-to-many relationship between two models. 
 47 | 
 48 | * Thread object
 49 |     * Thread._id: Unique identifier for a forum thread (defined by the database, String)
 50 |     * Thread.title: Topic of a forum thread (String)
 51 |     * Thread.messages (Array): Message objects
 52 |         * Message._id: Unique identifier for a message (defined by the database, String)
 53 |         * Message.author: Name of the message author (String)
 54 |         * Message.text: Body of a message
 55 | 
 56 | Backbone-relation supports other types of relationships, one-to-one and many-to-many - once you have been through this tutorial, using those other types of relationships should be straightforward. Refer to the [Backbone-relational documentation][Backbone-relational] for more information.
 57 | 
 58 | ### Getting the sample application running
 59 | 
 60 | The application is available via git, if you don't want to bother copy-pasting : )
 61 | 
 62 |     $ git clone git://github.com/antoviaque/backbone-relational-tutorial.git
 63 | 
 64 | A sample implementation of the web service providing the REST interfaces is provided in the tutorial code. The server side is out of the scope of this tutorial, so I won't say much about it. If you're interested in learning more on this part, there are a lot of resources about [Node.js][Node.js Tutorials], [Restify][Restify Documentation], [MongoDB][MongoDB Tutorial] and [Mongoose][Mongoose Tutorial] you can refer to.
 65 | 
 66 | To get the server-side to work, you need to install [Node.js][Node.js] (tested on 0.6.12), either from a [package manager][Installing Node.js via a package manager], or from source:
 67 | 
 68 |     $ wget http://nodejs.org/dist/v0.6.12/node-v0.6.12.tar.gz
 69 |     $ tar xvzf node-v0.6.12.tar.gz
 70 |     $ cd node-v0.6.12
 71 |     $ ./configure
 72 |     $ make
 73 |     $ sudo make install
 74 | 
 75 | Then install [MongoDB][MongoDB] - on a Debian/Ubuntu:
 76 | 
 77 |     $ sudo apt-get install mongodb-server
 78 |     $ sudo /etc/init.d/mongodb start
 79 | 
 80 | Use NPM to checkout the required packages
 81 | 
 82 |     $ npm install
 83 | 
 84 | The node.js dependencies are already included in the node_modules/ directory, so all you should need once Node and mongodb are installed is to run:
 85 | 
 86 |     $ node app
 87 | 
 88 | It will start a node instance on the port 3001.
 89 | 
 90 | * The `static/` subdirectory on the root folder (loading `index.html` when you access `http://localhost:3000/` or any URL starting with `http://localhost:3000/thread/`);
 91 | * Proxy requests made to any URL starting with `http://localhost:3000/api` to the node server at `http://localhost:3001/`
 92 | 
 93 | ### Application structure
 94 | 
 95 | * `static/index.html`: Includes all the base HTML structure we'll find on all pages, along with the templates for each of the views. You'll notice that I use [Handlebars][Handlebars] as the template engine, rather than [Underscore][Underscore]'s default one, but you should be able to achieve the same results with any of the javascript templating engines around - just pick your favorite.
 96 | * `static/js/forum.js`: Defines a `$.forum` object, which contains all the application objects. Some developers chose to assign them to the `window` object, or define them as globals. Defining a specific array allows to isolate ours objects on a dedicated namespace.
 97 | * `app.js` and `models.js`: Node.js application files - serves the REST API requests and connects to the MongoDB database.
 98 | 
 99 | Defining the models
100 | -------------------
101 | 
102 | We're defining two models, `Thread` and `Message`, a `Thread` being able to contain multiple `Messages`.
103 | 
104 | ### Message Model
105 | 
106 |     $.forum.Message = Backbone.RelationalModel.extend({
107 |         urlRoot: '/api/message',
108 |         idAttribute: '_id',
109 |     });
110 | 
111 | The `Message` model, the most simple. Note that we're extending Backbone.RelationalModel rather than BackboneModel, to take advantage of the extra features Backbone-relational. We're just telling Backbone where to find the corresponding resource on the server (`urlRoot`), and what attribute the server is using to uniquely identify each message (`idAttribute`).
112 | 
113 | 
114 | #### REST API - POST /api/message/
115 | 
116 | The REST interface on the server is at `/api/message`, and allows to POST a message of the following JSON format:
117 | 
118 |     {
119 |         "author": "Author Name",
120 |         "text": "The message",
121 |         "thread": "thread_id"
122 |     }
123 | 
124 | The `thread` attribute will be automatically defined by Backbone-relational, and will contain the `_id` attribute of the Thread model defined below. It allows the webservice to know which thread the message belongs to.
125 | 
126 | If the request is successful, the server returns the same object, to which it adds the unique `_id` attribute used by the database to identify it.
127 | 
128 | For the simple forum we're developing for this tutorial, we only need to define a `POST` interface. It allows to add _new_ `message` objects to the database - this will come handy when you'll be visiting a given thread and will want to post a reply to the initial post. We will be `GET`ting the `message` objects currently in the database from the `/api/thread/` interface defined below. If we were implementing a full-fledged application, we would define all the methods: `GET` to retreive individual `message` objects, `PUT` to update an existing `message`, `DELETE`, etc.
129 | 
130 | ### Thread Model
131 | 
132 |     $.forum.Thread = Backbone.RelationalModel.extend({
133 |         urlRoot: '/api/thread',
134 |         idAttribute: '_id',
135 |         relations: [{
136 |             type: Backbone.HasMany,
137 |             key: 'messages',
138 |             relatedModel: '$.forum.Message',
139 |             reverseRelation: {
140 |                 key: 'thread',
141 |                 includeInJSON: '_id',
142 |             },
143 |         }]
144 |     });
145 | 
146 | The `relations` option comes from Backbone-relational, and allows to specify how the `Thread` objects relate to the `Message` objects:
147 | 
148 | * `type: Backbone.HasMany`: Each `Thread` can contain references to multiple `Message`s.
149 | * `key: 'messages'`: The name of the attribute of `Thread` objects containing the external references. `Thread.messages` will contain an array of `Message`s.
150 | * `relatedModel: '$.forum.Message'`: The model being referenced.
151 | * `reverseRelation.key = 'thread'`: The reverse reference to the `Thread` object, from each of the `Message` objects contained. For example, if `thread.messages = [message]`, then `message.thread` will contain a reference to the `thread` object.
152 | * `reverseRelation.includeInJSON = '_id'`: Tells Backbone-relational to store the value of one of the `Thread` attributes in `message.thread`, rather than a reference to the object itself. Here, if `thread._id = '123'`, then `message.thread` will contain '123'.
153 | 
154 | #### REST API - GET /api/thread/:id
155 | 
156 | The REST interface on the server is at `/api/thread/`, and allows to GET a `thread` object along with all its messages by specifying its id (`/api/thread/456`), using the following JSON format:
157 | 
158 |     {
159 |         "_id": "456",
160 |         "title": "The thread title",
161 |         "messages": [
162 |             {
163 |                 "_id": "123",
164 |                 "author": "Author Name",
165 |                 "text": "The message"
166 |             }, {
167 |                 "_id": "124",
168 |                 "author": "Second Author Name",
169 |                 "text": "The reply to the previous message"
170 |             }
171 |         ]
172 |     }
173 | 
174 | The `messages` attribute contains a list of all the messages contained in the thread. The `message`s objects are expanded (it's not just a reference to their ids), to allow to get the whole content of a thread in one request. 
175 | 
176 | Backbone-relational will automatically assign each of the array elements of the `message` attribute to a separate `Message` object, and set the reverse reference (`message.thread`) to the value of the `thread._id` attribute (here, "456").
177 | 
178 | #### REST API - POST /api/thread/
179 | 
180 | The interface also allows to POST a new `thread` to add to the database, by sending the following JSON structure:
181 | 
182 |     {
183 |         "title": "My new thread",
184 |         "messages": []
185 |     }
186 | 
187 | If successful, the server returns the same object, to which it adds the unique '_id' attribute used by the database to identify it.
188 | 
189 | ### List of threads
190 | 
191 | The `Thread` and `Message` models, along with their associated APIs server-side, allow us to keep track of all the messages in a given thread, and to post new threads and messages. However, we're still missing one important piece of informations - how do we know which threads are already in the forum? We want to present a list of all the forum threads to the visitors.
192 | 
193 | This is where collections come in - they allow to query the database for a set of objects (here, all the forum threads), a bit like the way a `Thread` contains a reference to a set of `Message`s.
194 | 
195 |     $.forum.ThreadCollection = Backbone.Collection.extend({
196 |         url: '/api/thread',
197 |         model: $.forum.Thread,
198 |     })
199 | 
200 | #### REST API - GET /api/thread/
201 | 
202 | The collection will `GET /api/thread/` for the array of all the forum threads:
203 | 
204 |     [
205 |         {
206 |             "_id": "456",
207 |             "title": "The thread title",
208 |             "messages": [
209 |                 {
210 |                     "_id": "123",
211 |                     "author": "Author Name",
212 |                     "text": "The message"
213 |                 }, {
214 |                     "_id": "124",
215 |                     "author": "Second Author Name",
216 |                     "text": "The reply to the previous message"
217 |                 }
218 |             ]
219 |         }, {
220 |             "_id": "457",
221 |             "title": "My new thread",
222 |             "messages": []
223 |         }
224 |     ]
225 | 
226 | 
227 | The Router
228 | ----------
229 | 
230 | Now that we have our models, we can start looking at doing something with the data they contain. In our simple forum, we serve only two different types of pages:
231 | 
232 | * The *list of threads*, which is also be the homepage, available at `http://localhost:3000/` (`show_thread_list`)
233 | * The content of a *single thread*, available at `http://localhost:3000/thread/<id_of_the_thread>/` (`show_thread`)
234 | 
235 | The URL router, which binds URLs (routes) to views, is:
236 | 
237 |     $.forum.Router = Backbone.Router.extend({
238 |         routes: {
239 |             "": "show_thread_list",
240 |             "thread/:_id/": "show_thread",
241 |         },
242 |     
243 |         show_thread_list: function() {
244 |             var thread_collection = new $.forum.ThreadCollection();
245 |             var thread_list_view = new $.forum.ThreadListView({el: $('#content'), model: thread_collection });
246 |             thread_collection.fetch();
247 |         },
248 |         
249 |         show_thread: function(_id) {
250 |             var thread = new $.forum.Thread({_id: _id});
251 |             var thread_view = new $.forum.ThreadView({el: $('#content'), model: thread});
252 |             thread.fetch();
253 |         },
254 |         
255 |     });
256 |     
257 | In both controller methods, the approach is similar (note that you don't need to understand every detail just yet - just keep in mind the way requests are processed):
258 | 
259 | 1. Instantiate the model (or the collection, since a collection is simply a way to refer to several models simulteanously) corresponding to the current URL/view.
260 | 2. Instantiate a view, which will use the model from 1) to produce its HTML representation. It will insert the result inside the DOM element we provide (`el: $('#content')`).
261 | 3. Get the model/collection to retreive the data from the server corresponding to its instantiation in 1). Doing so will trigger events in the view we instantiated in 2), and cause the view to refresh itself. Note that steps 1) and 2) don't actually modify the DOM or manipulate any data from or to the server. They just instantiate objects which start to listen to events. 
262 | 
263 | For example, a request to `http://localhost:3000/thread/123` will get a `Thread({id: '123'})` object instantiated, which will `fetch()` its data at `/api/thread/123`. Once the server has returned the JSON data, events will be triggered on the `ThreadView` object (see below).
264 | 
265 | Displaying a Single Thread
266 | --------------------------
267 | 
268 | A single thread can contain multiple messages. We thus need to define two different views - one to represent the Thread, for example its title (`ThreadView`), one to represent each of the messages it contains (`MessageView`).
269 | 
270 | ### ThreadView
271 | 
272 | #### Template
273 | 
274 |     <script type="text/template" id="tpl_thread">
275 |         <h2 class="centered">Thread - "{{title}}"</h2>
276 | 
277 |         <div class="message_list"></div>
278 | 
279 |         <h2>New message</div>
280 |         <ul>
281 |             <li>Author: <input class="new_message_author" type="text" /></li>
282 |             <li>Text: <textarea class="new_message_text" /></li>
283 |         </ul>
284 |         <input type="submit" value="Post message" />
285 |         </ul>
286 |         <div class="error_message"></div>
287 |     </script>
288 | 
289 | #### View
290 | 
291 |     $.forum.ThreadView = Backbone.View.extend({
292 |         tagName: 'div',
293 | 
294 |         className: 'thread_view',
295 | 
296 | The HTML representation of the thread will be contained in a `<div class="thread_view"></div>` container.
297 |         
298 |         initialize: function(){
299 |             _.bindAll(this, 'render', 'render_message', 'on_submit');
300 |             this.model.bind('change', this.render);
301 |             this.model.bind('reset', this.render);
302 |             this.model.bind('add:messages', this.render_message); 
303 |         },
304 | 
305 | `bindAll()` comes from [Underscore][Underscore], and allows to make sure that the specified methods are always invoked with `this` pointing to the current object.
306 | 
307 | `this.model` points to the `{model: ...}` attribute passed when ThreadView is initialized in the router. It contains a reference to the model the view is representing, and allows us to listen to events from the model:
308 | 
309 | * When the model `change`s or is `reset`, we redraw the view entirely (`this.render`)
310 | * When a new message is added to the thread, add it on the DOM. This happens when a new message is added to the `thread.messages` array, or when a new message is saved with a `message.thread` set to the same value as the `thread._id`.
311 |     
312 |         template: Handlebars.compile($('#tpl_thread').html()),
313 |         
314 |         render: function() {
315 |             return $(this.el).html(this.template(this.model.toJSON()));
316 |         },
317 | 
318 | Use `#tpl_thread` as the template. The model's attributes are passed as the current context to Handlebars, which replaces the corresponding variables in the `#tpl_thread` template and returns the resulting HTML. This HTML is inserted in the `{el: ...}` element via jQuery (cf the route, `el` here is `$(#content')`).
319 | 
320 | Note that the thread template doesn't attempt to represent the thread's messages. Backbone-relational triggers the 'add:messages' event on the model for each contained message, every time the model is `fetch()`'ed. When the router calls `thread.fetch()`, Backbone will first trigger the 'reset' event, which will run the `render()` method and get the `#tpl_thread` inserted. Then Backbone-relational will trigger the 'add:messages' event, and call `render_message()` for each of the messages the thread contains:
321 |         
322 |         render_message: function(message) {
323 |             var message_view = new $.forum.MessageView({model: message});
324 |             this.$('div.message_list').append($(message_view.render()));
325 |         },
326 | 
327 | `message` will be an instance of the `Message` model. We use it to instantiate a `MessageView` view, like we did in the router for the `ThreadView`. The main difference is that Backbone-relational has already retreived the messages data, so we don't need to `fetch()` it. The messages data was contained in the response from the API request to get the thread data (`/api/thread/123` - see _"REST API - GET /api/thread/:id"_ above).
328 |         
329 |         events: {
330 |             'click input[type=submit]': 'on_submit',
331 |         },
332 |         
333 |         on_submit: function(e) {
334 |             var new_message = new $.forum.Message({author: this.$('.new_message_author').val(), text: this.$('.new_message_text').val(), thread: this.model});
335 |             new_message.save();
336 |         },
337 |     });
338 | 
339 | Here, we give the visitor the ability to post a new message in the current thread. We monitor clicks on the submit button, retreive the data the user entered using jQuery selectors (`this.$('.class')` is a shortcut for `$('.class', this.el)`), instantiate a new `Message` object with the user data, and get Backbone to send it to the API with the `save()` method. This will send the data to `/api/message` as a POST request. The `message.thread` attribute will be set to the value of `thread._id`, to let the server know which thread to add the message to.
340 | 
341 | Since we're adding a new message to `thread.messages`, Backbone-relational will trigger the "add:messages" event, and the new message will get automatically inserted in the DOM via the `render_message()` method - no extra effort required!
342 | 
343 | ### MessageView
344 | 
345 | #### Template
346 | 
347 |     <script type="text/template" id="tpl_message">
348 |         <div class="message">
349 |             <div class="message_author">By: {{author}}</div>
350 |             <div class="message_text">{{text}}</div>
351 |         </div>
352 |     </script>
353 | 
354 | #### View
355 | 
356 | We used a `MessageView` view above to represent individual messages - we thus need to define it to let Backbone know which template to use:
357 |     
358 |     $.forum.MessageView = Backbone.View.extend({
359 |         tagName: 'div',
360 | 
361 |         className: 'message_view',
362 |         
363 |         initialize: function(){
364 |             _.bindAll(this, 'render');
365 |             this.model.bind('change', this.render);
366 |         },
367 |     
368 |         template: Handlebars.compile($('#tpl_message').html()),
369 |         
370 |         render: function() {
371 |             return $(this.el).html(this.template(this.model.toJSON()));
372 |         },
373 |     });
374 | 
375 | 
376 | Displaying a List of All Threads
377 | --------------------------------
378 | 
379 | This is very similar to displaying a single thread - instead of having a thread model containing a list of messages, we have a collection containining a list of all the threads. So we'll need one view for the collection, `ThreadListView`, and one view for each of the threads, `ThreadSummaryView`. We don't need to display individual messages, but we'll still use them inside of the `ThreadSummaryView` to show a message count for the whole thread.
380 | 
381 | ### ThreadListView
382 | 
383 | #### Template
384 | 
385 |     <script type="text/template" id="tpl_thread_list">
386 |         <h2 class="centered">Threads</h2>
387 |                 
388 |         <ul class="thread_list"></ul>
389 | 
390 |         <h2>New Thread</h2>
391 |         <ul>
392 |             <li>Title: <input type="text" class="new_thread_title" /></li>
393 |             <li>Author: <input class="new_message_author" type="text" /></li>
394 |             <li>Message: <textarea class="new_message_text" /></li>
395 |             <li><input type="submit" class="new_thread_submit" value="Create thread" /></li>
396 |         </ul>
397 |         <div class="error_message"></div>
398 |     </script>
399 | 
400 | #### View
401 | 
402 |     $.forum.ThreadListView = Backbone.View.extend({
403 |         tagName: 'div',
404 | 
405 |         className: 'thread_list_view',
406 |         
407 |         initialize: function(){
408 |             _.bindAll(this, 'render', 'render_thread_summary', 'on_submit', 'on_thread_created', 'on_error');
409 |             this.model.bind('reset', this.render); 
410 |             this.model.bind('change', this.render); 
411 |             this.model.bind('add', this.render_thread_summary); 
412 |         },
413 | 
414 | Although the view renders a collection and not a single model, we attach the collection object to the `this.model` attribute. This is because Backbone automatically sets the `model` attribute of a view when a `{model: xxx}` option is passed when the view is instantiated. If we passed a `{collection: xxx}` instead in the router method, we would have to access the attribute at `this.options.collection`.
415 |     
416 |         template: Handlebars.compile($('#tpl_thread_list').html()),
417 |     
418 |         render: function() {
419 |             $(this.el).html(this.template());
420 |             this.model.forEach(this.render_thread_summary);
421 |             return $(this.el).html();
422 |         },
423 |         
424 | One notable difference in the way collections and relational models behave regarding events is that collections don't trigger the 'add' event when the collection is initially `fetch()`'ed. We thus have to call the `render_thread_summary()` manually in the `render()` method, we can't assume `render_thread_summary()` will be called after `render()` every time the collection is rendered.
425 | 
426 |         render_thread_summary: function(thread) {
427 |             var thread_summary_view = new $.forum.ThreadSummaryView({model: thread});
428 |             this.$('ul.thread_list').prepend($(thread_summary_view.render()));
429 |         },
430 |         
431 |         events: {
432 |             'click input[type=submit]': 'on_submit',
433 |         },
434 | 
435 | This is also similar to the `ThreadView`. We append the HTML from the `ThreadSummaryView` of each of the threads to the DOM, and monitor clicks on the submit button, on the form allowing a visitor to create a new thread and post a first message in it.
436 |         
437 |         on_submit: function(e) {
438 |             var thread = new $.forum.Thread({ title: this.$('.new_thread_title').val() });
439 |             thread.save({}, { success: this.on_thread_created, error: this.on_error });
440 |         },
441 | 
442 | Here, however, we'll be saving two distinct objects: first we'll create the new thread, and once the thread has been created on the server, we'll add a message in it. We wait for the `thread.save()` to complete to get the `thread._id` from the server's response:
443 | 
444 |         on_thread_created: function(thread, response) {
445 |             this.model.add(thread, {at: 0});
446 |             var message = new $.forum.Message({ author: this.$('.new_message_author').val(), text: this.$('.new_message_text').val(), thread: thread.get('_id') });
447 |             message.save({}, { 
448 |                 success: function() {
449 |                     $.forum.app.navigate('thread/'+thread.get('_id')+'/', { trigger: true });
450 |                 },
451 |                 error: this.on_error,
452 |             });
453 |         },
454 | 
455 | The collection doesn't automatically know that the new thread should belong to the collection, we thus need to add it manually. This will trigger the `render_thread_summary()` method, and add the new thread to the DOM.
456 |                 
457 |         on_error: function(model, response) {
458 |             var error = $.parseJSON(response.responseText);
459 |             this.$('.error_message').html(error.message);
460 |         },
461 |     });
462 | 
463 | We also define an error method, to alert the user if something goes wrong. In such a case - for example a validation error - the server should return a JSON string of the following format:
464 | 
465 |     {'error': 'Error message'}
466 | 
467 | ### ThreadSummaryView
468 | 
469 | The `ThreadSummaryView` uses the same model as `ThreadView`, but presents it differently. Since we're showing a list of all threads, we don't need to show all the details - especially the content of the messages, even if the data itself is available in a similar manner.
470 | 
471 | #### Template
472 | 
473 |     <script type="text/template" id="tpl_thread_summary">
474 |         <span class="thread_title">{{title}}</span> 
475 |         <span class="thread_nb_messages">{{messages.length}} messages</span>
476 |     </script>
477 | 
478 | #### View
479 |     
480 |     $.forum.ThreadSummaryView = Backbone.View.extend({
481 |         tagName: 'li',
482 | 
483 |         className: 'thread_summary_view',
484 |         
485 |         initialize: function(){
486 |             _.bindAll(this, 'render', 'on_click');
487 |             this.model.bind('change', this.render);
488 |         },
489 | 
490 |         template: Handlebars.compile($('#tpl_thread_summary').html()),
491 |         
492 |         render: function() {
493 |             return $(this.el).html(this.template(this.model.toJSON()));
494 |         },
495 | 
496 | You should now be familiar with those - we get the right template, render it and insert the resulting HTML in the DOM.
497 |         
498 |         events: {
499 |             'click': 'on_click',
500 |         },
501 |         
502 |         on_click: function(e) {
503 |             $.forum.app.navigate('thread/'+this.model.get('_id')+'/', {trigger: true});
504 |         },
505 |     });
506 | 
507 | The last missing bit - allowing the visitor to click on a thread in the threads list (at `"/"`), to be able to navigate to the dedicated thread page (`"/thread/123"`). We monitor the 'click' event on the current view (clicks on `this.el`), and when this happen, we ask the router to change the URL. `{trigger: true}` makes the router also trigger the controller method corresponding to the new URL - here, `show_thread()`.
508 | 
509 | 
510 | License
511 | -------
512 | 
513 | The text of this tutorial, aside from the code portions, is licensed under the [Creative Commons Attribution-ShareAlike 3.0 Unported License][CC-BY-SA 3.0]. 
514 | 
515 | The code and graphical assets are released under the [GNU Affero General Public License][AGPLv3] as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
516 | 
517 | This tutorial and the sample program are distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the [GNU Affero General Public License][AGPLv3] for more details.
518 | 
519 | 
520 | [Backbone-relational]:          https://github.com/PaulUithol/Backbone-relational
521 | [Backbone.js Tutorials]:        http://backbonetutorials.com/
522 | [Source Code of Backbone.js]:   http://documentcloud.github.com/backbone/docs/backbone.html
523 | [TODO Sample Application]:      http://documentcloud.github.com/backbone/examples/todos/index.html
524 | [Node.js]:                      http://nodejs.org/
525 | [Node.js Tutorials]:            http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js
526 | [Installing Node.js via a package manager]: https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
527 | [Restify Documentation]:        http://mcavage.github.com/node-restify/
528 | [MongoDB]:                      http://www.mongodb.org/
529 | [MongoDB Tutorial]:             http://www.mongodb.org/display/DOCS/Tutorial
530 | [Mongoose Tutorial]:            http://stackoverflow.com/questions/6319899/any-good-tutorial-for-mongoose-with-node-js
531 | [HandleBars]:                   http://handlebarsjs.com/
532 | [Underscore]:                   http://documentcloud.github.com/underscore/
533 | [Project Page]:                 https://github.com/antoviaque/backbone-relational-tutorial
534 | [CC-BY-SA 3.0]:                 http://creativecommons.org/licenses/by-sa/3.0/
535 | [AGPLv3]:                       http://www.gnu.org/licenses/agpl.html
536 | 
537 | 


--------------------------------------------------------------------------------