nN

bhargavshah · Aug 30, 2011 · 1d0a086 · 1d0a086
1 parent cc55c44
commit 1d0a086
Show file tree

Hide file tree

Showing 71 changed files with 8,488 additions and 0 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+backbonetutorials.com
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+
+# Backbone Tutorials
+
+This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.
+About Backbone Tutorials
+
+As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial
+
+I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others.
+
+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
+
+## About the author
+
+Looking for feedback on my latest startup Protosal(http://protosal.com) any and all would be great!
+
+**Contact:**
+
+*   \#cdnjs on freenode
+*   @neutralthoughts on twitter
+*   [email protected]
+
+**Projects:**
+
+*   Javascript Library CDN - http://cdnjs.com
+*   Proposal Generation Start up - http://protosal.com
+*   Backbone.js Tutorials - http://backbonetutorials.com
+*   Technical Blog - http://thomasdavis.github.com
+*   Github Account - https://github.com/thomasdavis
+*   Freelance Blog - http://thomasalwyndavis.com
+*   Quora - http://www.quora.com/Thomas-Davis
+*   StackOverflow - http://stackoverflow.com/users/580675/thomas-davis
+
+Love you mum!
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,3 @@
+markdown: rdiscount
+pygments: true
+permalink: /:title
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,104 @@
+<!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>{{ page.title }} - 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>
+             {{ content }}
+
+
+
+        </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/_layouts/post.html b/_layouts/post.html
@@ -0,0 +1,22 @@
+---
+layout: default
+---
+<div id="post">
+{{ content }}
+</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 = '{{page.posturl}}';
+</script>
+<span id="IDCommentsPostTitle" style="display:none"></span>
+<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
+</div>
diff --git a/_posts/2011-01-26-what-is-a-collection.textile b/_posts/2011-01-26-what-is-a-collection.textile
@@ -0,0 +1,85 @@
+---
+layout: post
+title: What is a collection?
+type: beginner
+posturl: http://backbonetutorials.com/what-would-you-use-backbone
+---
+
+h1. In progress
+
+h2. What is a collection?
+
+p. Backbone collections are simply an ordered set of "models":/what-is-a-model.   Such that it can be used in situations such as;
+
+* 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. 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
+
+* "Thomas Davis":https://github.com/thomasdavis
+
+h3. Contributors
+
+* "FND":https://github.com/FND
diff --git a/_posts/2011-01-27-what-is-a-router.textile b/_posts/2011-01-27-what-is-a-router.textile
@@ -0,0 +1,127 @@
+---
+layout: post
+title: What is a router?
+type: beginner
+posturl: http://backbonetutorials.com/what-is-a-router
+---
+
+h2. What is a router?
+
+p. Backbone routers are used for routing your applications URL's when using hash tags(#).   In the traditional MVC sense they don't neccesarily fit the semantics and if you have read ""What is a view?":http://backbonetutorials.com/what-is-a-view" it will elaborate on this point.   Though a Backbone "router" is still very useful for any application/feature that needs URL routing/history capabilities.   
+
+Defined routers should always contain at least one route and a function to map the particular route to.   In the example below we are going to define a route that is always called.
+
+Also note that routes intepret anything after "#" tag in the url.   All links in your application should target "#/action" or "#action".   (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help)
+
+{% highlight html %}
+
+<script>
+    var AppRouter = Backbone.Router.extend({
+        routes: {
+            "*actions": "defaultRoute" // matches http://example.com/#anything-here
+        },
+        defaultRoute: function( actions ){
+            // The variable passed in matches the variable in the route definition "actions"
+            alert( actions ); 
+        }
+    });
+    // Initiate the router
+    var app_router = new AppRouter;
+    // Start Backbone history a neccesary step for bookmarkable URL's
+    Backbone.history.start();
+
+</script>
+
+<a href="#action">Activate route</a>
+<a href="#/route/action">Activate another route</a>
+<!-- Notice the change in the url -->
+
+{% endhighlight %}
+
+*Please note: * Prior to Backbone 0.5 (released 1. July 2011) Routes was originally called Controllers. Due to clearity developers on the Backbone team renamed it to Routes. Hence, if you find yourself using an older version of Backbone you should write Backbone.Controller.extend({ ** });
+
+h4. Dynamic Routing
+
+p. Most conventional frameworks allow you to define routes that contain a mix of static and dynamic route parameters. For example you might want to retrieve a post with a variable id with a friendly URL string. Such that your URL would look like "http://example.com/#/posts/12".   Once this route was activated you would want to access the id given in the URL string.   This example is implemented below.
+
+{% highlight html %}
+
+<script>
+    var AppRouter = Backbone.Router.extend({
+        routes: {
+            "/posts/:id": "getPost",
+            "*actions": "defaultRoute" // Backbone will try match the route above first
+        },
+        getPost: function( id ) {
+            // Note the variable in the route definition being passed in here
+            alert( "Get post number " + id );   
+        },
+        defaultRoute: function( actions ){
+            alert( actions ); 
+        }
+    });
+    // Instantiate the router
+    var app_router = new AppRouter;
+    // Start Backbone history a neccesary step for bookmarkable URL's
+    Backbone.history.start();
+
+</script>
+
+<a href="#/posts/120">Post 120</a>
+<a href="#/posts/130">Post 130</a>
+<!-- Notice the change in the url -->
+
+{% endhighlight %}
+
+h4. Dynamic Routing Cont. ":params" and "*splats"
+
+p. Backbone uses two styles of variables when implementing routes.   First there are ":params" which match any URL components between slashes.  Then there are "*splats" which match any number of URL components.   Note that due to the nature of a "*splat" it will always be the last variable in your URL as it will match any and all components.
+
+Any "*splats" or ":params" in route definitions are passed as variables respective order to the associated function.  A route defined as "/:route/:action" will pass 2 variables(route, action) to the call back function.   Which can be accessed with "function( route, action )".   (If this is confusing please post a comment and I will try articulate it better)
+
+Here are some examples of using ":params" and "*splats"
+
+{% highlight javascript %}
+
+        routes: {
+
+            "/posts/:id": "getPost",
+            // <a href="http://example.com/#/posts/121">Example</a>
+
+            "/download/*path": "downloadFile",
+            // <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
+
+            "/:route/:action": "loadView",
+            // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
+
+        },
+
+        getPost: function( id ){ alert(id); /* 121 */ },
+        downloadFile: function( path ){ alert(path); /* user/images/hey.gif */ },
+        loadView: function( route, action ){ 
+            alert(route + "_" + action); 
+            /* dashboard_graph */ 
+        }
+
+
+{% endhighlight %}
+
+p. Routes are quite powerful and in an ideal world your application should never contain too many.   If you need to implement hash tags with SEO in mind, do a google search for "google seo hashbangs".
+
+Remember to do a pull request for any errors you come across.
+
+h4. Tips and Tricks
+
+p. No Tips and Tricks
+
+h3. Relevant Links
+* "Backbone.js official router documentation":http://documentcloud.github.com/backbone/#Router
+* "Using routes and understanding the hash tag":http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html
+
+h3. Author
+
+* "Thomas Davis":https://github.com/thomasdavis
+
+h3. Contributors
+
+* "Herman Schistad":http://schistad.info (Backbone 0.5 rename from Controller to Router)