summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRyan Kirkman <ryan@ryankirkman.com>2011-10-11 20:18:20 +1000
committerRyan Kirkman <ryan@ryankirkman.com>2011-10-11 20:18:20 +1000
commitae82f62d68e9b9e2ef6a82989863fed07a2e06c1 (patch)
tree0b70630a4a743cf873e72a98070c98919c33ed92
parent83690fdac5aca5e924079afd91ae06bd8351f6ea (diff)
downloadbackbonetutorials-ae82f62d68e9b9e2ef6a82989863fed07a2e06c1.zip
backbonetutorials-ae82f62d68e9b9e2ef6a82989863fed07a2e06c1.tar.gz
backbonetutorials-ae82f62d68e9b9e2ef6a82989863fed07a2e06c1.tar.bz2
Fuck
-rw-r--r--_posts/2011-01-26-what-is-a-collection.textile9
-rw-r--r--_posts/2011-10-10-organizing-backbone-using-modules.textile101
-rw-r--r--_site/README.md2
-rw-r--r--_site/atom.xml90
-rw-r--r--_site/index.html18
-rw-r--r--_site/organizing-backbone-using-modules/index.html198
-rw-r--r--_site/what-is-a-collection/index.html5
-rw-r--r--index.html6
8 files changed, 410 insertions, 19 deletions
diff --git a/_posts/2011-01-26-what-is-a-collection.textile b/_posts/2011-01-26-what-is-a-collection.textile
index 6fdaca5..33e6264 100644
--- a/_posts/2011-01-26-what-is-a-collection.textile
+++ b/_posts/2011-01-26-what-is-a-collection.textile
@@ -66,14 +66,9 @@ p. Now we are going to populate a creation with some useful data.
{% endhighlight %}
-h3. So how does Backbone.js help?
-
-p. Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.
-
-
h3. Relevant Links
* "Backbone.js official website":http://documentcloud.github.com/backbone/
-* "great hackernews discussion /w post from author":http://news.ycombinator.com/item?id=2119704
+
h3. Author
@@ -82,4 +77,4 @@ h3. Author
h3. Contributors
-* "FND":https://github.com/FND
+* None
diff --git a/_posts/2011-10-10-organizing-backbone-using-modules.textile b/_posts/2011-10-10-organizing-backbone-using-modules.textile
new file mode 100644
index 0000000..5cbb323
--- /dev/null
+++ b/_posts/2011-10-10-organizing-backbone-using-modules.textile
@@ -0,0 +1,101 @@
+---
+layout: post
+title: Organizing your application using Modules (require.js)
+type: intermediate
+posturl: http://backbonetutorials.com/organizing-backbone-using-modules
+---
+
+h2. Organizing your application using Modules (require.js)
+
+p. Unfortunatly Backbone.js does not tell you how to organize your code leaving many developers in the dark of how to load scripts and lay out their development enviroments.
+
+This was quite a different decision to other Javascript MVC frameworks who were more in favor of setting a development philosophy.
+
+This tutorial will get you started on combining Backbone.js with "AMD":http://www.com (Asynchronous Module Definitions).
+
+h3. What is AMD?
+
+p. "Asynchronous Module Definitions":http:www.com designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around AMD, seeing it as the future of modular Javascript development.
+
+This tutorial will use "Require.js":http://requirejs.org to implement a modular and organized Backbone.js.
+
+**I highly recommend using AMD for application development**
+
+Quick Overview
+* Modular
+* Scalable
+
+h3. Why Require.js?
+
+p. Require.js has a great community.
+
+h3. Getting started
+
+
+* Model: Student, Collection: ClassStudents
+* Model: Todo Item, Collection: Todo List
+* Model: Animals, Collection: Zoo
+
+Typically your collection will only use one type of model but models themselves are not limited to a type of collection;
+
+* Model: Student, Collection: Gym Class
+* Model: Student, Collection: Art Class
+* Model: Student, Collection: English Class
+
+Here is a generic Model/Collection example.
+
+{% highlight javascript %}
+
+ var Song = Backbone.Model.extend({
+ initialize: function(){
+ console.log("Music is the answer");
+ }
+ });
+
+ var Album = Backbone.Collection.extend({
+ model: Song
+ });
+
+{% endhighlight %}
+
+h3. Building a collection
+
+p. Now we are going to populate a creation with some useful data.
+
+{% highlight javascript %}
+
+ var Song = Backbone.Model.extend({
+ defaults: {
+ name: "Not specified",
+ artist: "Not specified"
+ },
+ initialize: function(){
+ console.log("Music is the answer");
+ }
+ });
+
+ var Album = Backbone.Collection.extend({
+ model: Song
+ });
+
+ var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
+ var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });
+ var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });
+
+ var myAlbum = new Album([ song1, song2, song3]);
+ console.log( myAlbum.models ); // [song1, song2, song3]
+
+{% endhighlight %}
+
+h3. Relevant Links
+* "Backbone.js official website":http://documentcloud.github.com/backbone/
+
+
+
+h3. Author
+
+* "Thomas Davis":https://github.com/thomasdavis
+
+h3. Contributors
+
+* None
diff --git a/_site/README.md b/_site/README.md
index 2229aeb..7adf9ed 100644
--- a/_site/README.md
+++ b/_site/README.md
@@ -1,4 +1,3 @@
-
# Backbone Tutorials
This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.
@@ -13,6 +12,7 @@ Thomas Davis - [@neutralthoughts](http://twitter.com/neutralthoughts) - Twitter
## Contributions
* Thanks to Cactus([https://github.com/cactus](https://github.com/cactus)) for creating the blog feed
+* Thanks to Wes Bos ([https://github.com/wesbos](https://github.com/wesbos)) for CSS fixes
## About the author
diff --git a/_site/atom.xml b/_site/atom.xml
index ad9310a..72eb62c 100644
--- a/_site/atom.xml
+++ b/_site/atom.xml
@@ -4,7 +4,7 @@
<title>Backbone Tutorials</title>
<link href="http://backbonetutorials.com/atom.xml" rel="self"/>
<link href="http://backbonetutorials.com/"/>
- <updated>2011-08-30T21:11:53+10:00</updated>
+ <updated>2011-10-10T22:54:34+10:00</updated>
<id>http://backbonetutorials.com/</id>
<author>
<name>Thomas Davis</name>
@@ -13,6 +13,89 @@
<entry>
+ <title>Organizing your application using Modules (require.js)</title>
+ <link href="http://backbonetutorials.com/organizing-backbone-using-modules"/>
+ <updated>2011-10-10T00:00:00+10:00</updated>
+ <id>http://backbonetutorials.com/organizing-backbone-using-modules</id>
+ <content type="html">&lt;h2&gt;Organizing your application using Modules (require.js)&lt;/h2&gt;
+&lt;p&gt;Unfortunatly Backbone.js does not tell you how to organize your code leaving many developers in the dark of how to load scripts and lay out their development enviroments.&lt;/p&gt;
+&lt;p&gt;This was quite a different decision to other Javascript &lt;span class=&quot;caps&quot;&gt;MVC&lt;/span&gt; frameworks who were more in favor of setting a development philosophy.&lt;/p&gt;
+&lt;p&gt;This tutorial will get you started on combining Backbone.js with &lt;a href=&quot;http://www.com&quot;&gt;&lt;span class=&quot;caps&quot;&gt;AMD&lt;/span&gt;&lt;/a&gt; (Asynchronous Module Definitions).&lt;/p&gt;
+&lt;h3&gt;What is &lt;span class=&quot;caps&quot;&gt;AMD&lt;/span&gt;?&lt;/h3&gt;
+&lt;p&gt;Asynchronous Module Definitions designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around &lt;span class=&quot;caps&quot;&gt;AMD&lt;/span&gt;, seeing it as the future of modular Javascript development.&lt;/p&gt;
+&lt;p&gt;This tutorial will use Require.js to implement a modular and organized Backbone.js.&lt;/p&gt;
+&lt;p&gt;&lt;b&gt;I highly recommend using &lt;span class=&quot;caps&quot;&gt;AMD&lt;/span&gt; for application development&lt;/b&gt;&lt;/p&gt;
+&lt;p&gt;Quick Overview&lt;/p&gt;
+&lt;ul&gt;
+ &lt;li&gt;Modular&lt;/li&gt;
+ &lt;li&gt;Scalable&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h3&gt;Why Require.js?&lt;/h3&gt;
+&lt;p&gt;Require.js has a great community.&lt;/p&gt;
+&lt;h3&gt;Getting started&lt;/h3&gt;
+&lt;ul&gt;
+ &lt;li&gt;Model: Student, Collection: ClassStudents&lt;/li&gt;
+ &lt;li&gt;Model: Todo Item, Collection: Todo List&lt;/li&gt;
+ &lt;li&gt;Model: Animals, Collection: Zoo&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;Typically your collection will only use one type of model but models themselves are not limited to a type of collection;&lt;/p&gt;
+&lt;ul&gt;
+ &lt;li&gt;Model: Student, Collection: Gym Class&lt;/li&gt;
+ &lt;li&gt;Model: Student, Collection: Art Class&lt;/li&gt;
+ &lt;li&gt;Model: Student, Collection: English Class&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;Here is a generic Model/Collection example.&lt;/p&gt;
+&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt; &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Song&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Backbone&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Model&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;extend&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;initialize&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(){&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;Music is the answer&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
+ &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
+ &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
+
+ &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Album&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Backbone&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Collection&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;extend&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;model&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Song&lt;/span&gt;
+ &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;
+&lt;/div&gt;
+&lt;h3&gt;Building a collection&lt;/h3&gt;
+&lt;p&gt;Now we are going to populate a creation with some useful data.&lt;/p&gt;
+&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt; &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Song&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Backbone&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Model&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;extend&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;defaults&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;Not specified&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;artist&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;Not specified&amp;quot;&lt;/span&gt;
+ &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;initialize&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(){&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;Music is the answer&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
+ &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
+ &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
+
+ &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Album&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Backbone&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Collection&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;extend&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;model&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Song&lt;/span&gt;
+ &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
+
+ &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;song1&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Song&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;How Bizarre&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;artist&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;OMC&amp;quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
+ &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;song2&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Song&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;Sexual Healing&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;artist&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;Marvin Gaye&amp;quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
+ &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;song3&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Song&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;Talk It Over In Bed&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;artist&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;OMC&amp;quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
+
+ &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;myAlbum&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Album&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;song1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;song2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;song3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]);&lt;/span&gt;
+ &lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;myAlbum&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;models&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// [song1, song2, song3]&lt;/span&gt;
+
+&lt;/code&gt;&lt;/pre&gt;
+&lt;/div&gt;
+&lt;h3&gt;Relevant Links&lt;/h3&gt;
+&lt;ul&gt;
+ &lt;li&gt;&lt;a href=&quot;http://documentcloud.github.com/backbone/&quot;&gt;Backbone.js official website&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h3&gt;Author&lt;/h3&gt;
+&lt;ul&gt;
+ &lt;li&gt;&lt;a href=&quot;https://github.com/thomasdavis&quot;&gt;Thomas Davis&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h3&gt;Contributors&lt;/h3&gt;
+&lt;ul&gt;
+ &lt;li&gt;None&lt;/li&gt;
+&lt;/ul&gt;</content>
+ </entry>
+
+ <entry>
<title>Why would you use Backbone.js?</title>
<link href="http://backbonetutorials.com/why-would-you-use-backbone"/>
<updated>2011-02-01T00:00:00+10:00</updated>
@@ -531,12 +614,9 @@
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
-&lt;h3&gt;So how does Backbone.js help?&lt;/h3&gt;
-&lt;p&gt;Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.&lt;/p&gt;
&lt;h3&gt;Relevant Links&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://documentcloud.github.com/backbone/&quot;&gt;Backbone.js official website&lt;/a&gt;&lt;/li&gt;
- &lt;li&gt;&lt;a href=&quot;http://news.ycombinator.com/item?id=2119704&quot;&gt;great hackernews discussion /w post from author&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Author&lt;/h3&gt;
&lt;ul&gt;
@@ -544,7 +624,7 @@
&lt;/ul&gt;
&lt;h3&gt;Contributors&lt;/h3&gt;
&lt;ul&gt;
- &lt;li&gt;&lt;a href=&quot;https://github.com/FND&quot;&gt;&lt;span class=&quot;caps&quot;&gt;FND&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;None&lt;/li&gt;
&lt;/ul&gt;</content>
</entry>
diff --git a/_site/index.html b/_site/index.html
index 0f20001..856b581 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -93,6 +93,8 @@
<ul class="tutorials">
+
+
<li><a href="/why-would-you-use-backbone">Why would you use Backbone.js?</a> &raquo; <a href="http://thomasdavis.github.com">Thomas Davis</a></li>
@@ -116,7 +118,21 @@
<h2>Intermediate</h2>
<ul class="tutorials">
- <li>Coming Soon</li>
+
+
+ <li><a href="/organizing-backbone-using-modules">Organizing your application using Modules (require.js)</a> &raquo; <a href="http://thomasdavis.github.com">Thomas Davis</a></li>
+
+
+
+
+
+
+
+
+
+
+
+
</ul>
<h2>Advanced</h2>
diff --git a/_site/organizing-backbone-using-modules/index.html b/_site/organizing-backbone-using-modules/index.html
new file mode 100644
index 0000000..ec874f9
--- /dev/null
+++ b/_site/organizing-backbone-using-modules/index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Organizing your application using Modules (require.js) - Backbone.js Tutorials</title>
+<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml">
+ <meta name="author" content="Backbone Tutorials" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/reset.css" type="text/css" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+
+ <!-- github ribbon CSS -->
+ <link rel="stylesheet" href="/css/ribbon.css" type="text/css" />
+
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" />
+
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+
+ <style>
+ .container {
+ width: 760px;
+ margin: auto;
+ }
+ .menu {
+ margin-left: 40px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+ .menu a {
+ margin-right: 10px;
+ }
+ p {
+ width: 720px;
+ margin: auto;
+ }
+ .FlattrButton {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+ <div class="left ribbon-holder">
+ <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon">
+ <span class="text">Fork on GitHub</span>
+ </a>
+ </div>
+
+ <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a>
+<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+
+<div class="container">
+ <div class="menu">
+ <a href="/">home</a>
+ <a href="/examples.html">examples</a>
+ <a href="/contribute.html">contribute</a>
+ <a href="/about.html">about</a>
+ <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a>
+ <a href="/chat.html"><strong>chat</strong></a>
+ </div>
+
+
+
+
+ <div class="stack">
+ <div class="stackContent">
+ <h1>Backbone Tutorials</h1>
+ <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p>
+ <hr>
+ <div id="post">
+<h2>Organizing your application using Modules (require.js)</h2>
+<p>Unfortunatly Backbone.js does not tell you how to organize your code leaving many developers in the dark of how to load scripts and lay out their development enviroments.</p>
+<p>This was quite a different decision to other Javascript <span class="caps">MVC</span> frameworks who were more in favor of setting a development philosophy.</p>
+<p>This tutorial will get you started on combining Backbone.js with <a href="http://www.com"><span class="caps">AMD</span></a> (Asynchronous Module Definitions).</p>
+<h3>What is <span class="caps">AMD</span>?</h3>
+<p>Asynchronous Module Definitions designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around <span class="caps">AMD</span>, seeing it as the future of modular Javascript development.</p>
+<p>This tutorial will use Require.js to implement a modular and organized Backbone.js.</p>
+<p><b>I highly recommend using <span class="caps">AMD</span> for application development</b></p>
+<p>Quick Overview</p>
+<ul>
+ <li>Modular</li>
+ <li>Scalable</li>
+</ul>
+<h3>Why Require.js?</h3>
+<p>Require.js has a great community.</p>
+<h3>Getting started</h3>
+<ul>
+ <li>Model: Student, Collection: ClassStudents</li>
+ <li>Model: Todo Item, Collection: Todo List</li>
+ <li>Model: Animals, Collection: Zoo</li>
+</ul>
+<p>Typically your collection will only use one type of model but models themselves are not limited to a type of collection;</p>
+<ul>
+ <li>Model: Student, Collection: Gym Class</li>
+ <li>Model: Student, Collection: Art Class</li>
+ <li>Model: Student, Collection: English Class</li>
+</ul>
+<p>Here is a generic Model/Collection example.</p>
+<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+ <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Music is the answer&quot;</span><span class="p">);</span>
+ <span class="p">}</span>
+ <span class="p">});</span>
+
+ <span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+ <span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span>
+ <span class="p">});</span>
+</code></pre>
+</div>
+<h3>Building a collection</h3>
+<p>Now we are going to populate a creation with some useful data.</p>
+<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+ <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
+ <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Not specified&quot;</span><span class="p">,</span>
+ <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;Not specified&quot;</span>
+ <span class="p">},</span>
+ <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Music is the answer&quot;</span><span class="p">);</span>
+ <span class="p">}</span>
+ <span class="p">});</span>
+
+ <span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+ <span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span>
+ <span class="p">});</span>
+
+ <span class="kd">var</span> <span class="nx">song1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;How Bizarre&quot;</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;OMC&quot;</span> <span class="p">});</span>
+ <span class="kd">var</span> <span class="nx">song2</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Sexual Healing&quot;</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;Marvin Gaye&quot;</span> <span class="p">});</span>
+ <span class="kd">var</span> <span class="nx">song3</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Talk It Over In Bed&quot;</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;OMC&quot;</span> <span class="p">});</span>
+
+ <span class="kd">var</span> <span class="nx">myAlbum</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Album</span><span class="p">([</span> <span class="nx">song1</span><span class="p">,</span> <span class="nx">song2</span><span class="p">,</span> <span class="nx">song3</span><span class="p">]);</span>
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">myAlbum</span><span class="p">.</span><span class="nx">models</span> <span class="p">);</span> <span class="c1">// [song1, song2, song3]</span>
+
+</code></pre>
+</div>
+<h3>Relevant Links</h3>
+<ul>
+ <li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li>
+</ul>
+<h3>Author</h3>
+<ul>
+ <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li>
+</ul>
+<h3>Contributors</h3>
+<ul>
+ <li>None</li>
+</ul>
+</div>
+<!-- AddThis Button BEGIN -->
+<div class="addthis_toolbox addthis_default_style ">
+<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
+<a class="addthis_button_tweet"></a>
+<a class="addthis_counter addthis_pill_style"></a>
+</div>
+<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script>
+<!-- AddThis Button END -->
+<script>
+var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
+var idcomments_post_id;
+var idcomments_post_url = 'http://backbonetutorials.com/organizing-backbone-using-modules';
+</script>
+<span id="IDCommentsPostTitle" style="display:none"></span>
+<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
+</div>
+
+
+
+
+ </div>
+
+ </div>
+</div>
+<script src="//static.getclicky.com/js" type="text/javascript"></script>
+<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script>
+<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript>
+</body>
+</html>
diff --git a/_site/what-is-a-collection/index.html b/_site/what-is-a-collection/index.html
index ed7d811..100b7e7 100644
--- a/_site/what-is-a-collection/index.html
+++ b/_site/what-is-a-collection/index.html
@@ -141,12 +141,9 @@
</code></pre>
</div>
-<h3>So how does Backbone.js help?</h3>
-<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.</p>
<h3>Relevant Links</h3>
<ul>
<li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li>
- <li><a href="http://news.ycombinator.com/item?id=2119704">great hackernews discussion /w post from author</a></li>
</ul>
<h3>Author</h3>
<ul>
@@ -154,7 +151,7 @@
</ul>
<h3>Contributors</h3>
<ul>
- <li><a href="https://github.com/FND"><span class="caps">FND</span></a></li>
+ <li>None</li>
</ul>
</div>
<!-- AddThis Button BEGIN -->
diff --git a/index.html b/index.html
index cd15889..dee3674 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,11 @@ title:
<h2>Intermediate</h2>
<ul class="tutorials">
- <li>Coming Soon</li>
+ {% for post in site.posts %}
+ {% if post.type == "intermediate" %}
+ <li><a href="{{ post.url }}">{{ post.title }}</a> &raquo; <a href="http://thomasdavis.github.com">Thomas Davis</a></li>
+ {% endif %}
+ {% endfor %}
</ul>
<h2>Advanced</h2>