diff options
| author | samot <thomasalwyndavis@gmail.com> | 2011-04-04 00:12:25 +1000 |
|---|---|---|
| committer | samot <thomasalwyndavis@gmail.com> | 2011-04-04 00:12:25 +1000 |
| commit | 3ca3d56b5c51760680823cce6612bc127929f79c (patch) | |
| tree | 3f20507d401ee707e4794897a6a2a34a4c8c1d61 | |
| parent | 464b6df44fbc7211f7976b4c10db78472dd4d1c2 (diff) | |
| download | backbonetutorials-3ca3d56b5c51760680823cce6612bc127929f79c.zip backbonetutorials-3ca3d56b5c51760680823cce6612bc127929f79c.tar.gz backbonetutorials-3ca3d56b5c51760680823cce6612bc127929f79c.tar.bz2 | |
Added in static pages
| -rw-r--r-- | _layouts/default.html | 8 | ||||
| -rw-r--r-- | _layouts/post.html | 17 | ||||
| -rw-r--r-- | _posts/2011-02-01-backbone-introduction.textile | 212 | ||||
| -rw-r--r-- | _site/about.html | 79 | ||||
| -rw-r--r-- | _site/anonymous-functions/index.html | 28 | ||||
| -rw-r--r-- | _site/backbone-introduction/index.html | 194 | ||||
| -rw-r--r-- | _site/contact.html | 78 | ||||
| -rw-r--r-- | _site/contribute.html | 79 | ||||
| -rw-r--r-- | _site/css/style.css | 3 | ||||
| -rw-r--r-- | _site/index.html | 8 | ||||
| -rw-r--r-- | about.textile | 10 | ||||
| -rw-r--r-- | contact.textile | 9 | ||||
| -rw-r--r-- | contribute.textile | 10 | ||||
| -rw-r--r-- | css/style.css | 3 |
14 files changed, 326 insertions, 412 deletions
diff --git a/_layouts/default.html b/_layouts/default.html index f2cd3a5..6bd518a 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -45,15 +45,15 @@ <body> <div class="left ribbon-holder"> <a href="#" class="red ribbon"> - <span class="text">Fork me on GitHub</span> + <span class="text">Fork on GitHub</span> </a> </div> <div class="container"> <div class="menu"> <a href="/">home</a> - <a href="/">about</a> - <a href="/">contribute</a> - <a href="/">contact</a> + <a href="/about.html">about</a> + <a href="/contribute.html">contribute</a> + <a href="/contact.html">contact</a> </div> diff --git a/_layouts/post.html b/_layouts/post.html index 0938f45..6852390 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,12 +4,11 @@ layout: default <div id="post"> {{ content }} </div> - -<div id="related"> - <h2>Related Posts</h2> - <ul class="posts"> - {% for post in site.related_posts limit:3 %} - <li><span>{{ post.date | date_to_string }}</span> » <a href="{{ post.url }}">{{ post.title }}</a></li> - {% endfor %} - </ul> -</div>
\ No newline at end of file +<script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id; +var idcomments_post_url; +</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-02-01-backbone-introduction.textile b/_posts/2011-02-01-backbone-introduction.textile index 7c6b9fa..20b2e16 100644 --- a/_posts/2011-02-01-backbone-introduction.textile +++ b/_posts/2011-02-01-backbone-introduction.textile @@ -4,215 +4,19 @@ title: Why would you use backbone.js? type: beginner --- -h2. Why would you use backbone.js? +h2. Why do you need backbone.js? -p. Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. +p. Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements. -h3. So how does backbone.js help? - -p. Backbone.js was written by a beautiful man called Jash Kenas. Backbone.js supplies structure to heavy javascript applications. - -{% highlight html %} - -<!DOCTYPE html> -<html> -<head> - <title>I have a back bone</title> -</head> -<body> - <button id="add-friend">Add Friend</button> - <ul id="friends-list"> - </ul> - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> - <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> - <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> -</body> -</html> - -{% endhighlight %} - -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> - -p. The official "website":http://documentcloud.github.com/backbone/ describes Backbone.js as a library to supply structure to Javascript heavy web applications. After using Backbone.js for a week I could never see myself building any sort of Javascript functionality regardless of size without using Backbone.js or alternatives. - -p. I have decided to write a quick introduction for those trying to grasp the mechanics behind it. I am only a beginner also and would love suggestions and tips to improve my code. - -p. I am also very curious to hear what you think about how MVC ties into Javascript development and the most effective library you have used for logically organizing your Javascript. - -p. Would be great to get a discussion on MVC vs MVVM vs others etc leave comments at the bottom! - -p. Also could you implement this example better in another framework? - -h3. Understanding the Model View Controller Paradigm - -p. I have used many frameworks which promote that they use MVC. I don't think I have ever seen the same fundamental principals implemented the same way. - -p. Backbone.js has 4 classes: Models, Views, Controllers and Collections. The Models and Collections class work hand in hand and when combined essentially make up the M(model) of MVC. - -p. The main concept I follow when using Backbone.js is to make Views listen for changes in the Model and react accordingly. I would recommend bookmarking the homepage "documentation":http://documentcloud.github.com/backbone/ and I perusing the annotated "source":http://documentcloud.github.com/backbone/docs/backbone.html code. - -h3. Getting started - -p. I am going to run you through a basic tutorial that should get you on the right path if you are a bit lost like I was when I started. - -p. First of all we are going to just setup a basic page and include Backbone.js and Underscore.js(a dependency of Backbone.js) - -{% highlight html %} - -<!DOCTYPE html> -<html> -<head> - <title>I have a back bone</title> -</head> -<body> - <button id="add-friend">Add Friend</button> - <ul id="friends-list"> - </ul> - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> - <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> - <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> -</body> -</html> - -{% endhighlight %} +I shouldn't need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community. -p. For those of you who are lazy the full example can be viewed "here":http://thomasdavis.github.com/examples/backbone-101/ and downloaded -"here":https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101 -h3. Setting up the main view -p. Each view has a HTML DOM element associated with it. You can read more about why "here":http://documentcloud.github.com/backbone/#View-el . -Because this is our master view we are just going to associate the view with our page body in this example. - -p. If the el(element) specified does not exist, Backbone.js will attempt to create it. - -{% highlight javascript %} -(function ($) { -window.AppView = Backbone.View.extend({ - el: $("body"), - events: { - "click #add-friend": "showPrompt", - }, - showPrompt: function () { - var friend_name = prompt("Who is your friend?"); - } -}); -var appview = new AppView; -})(jQuery); -{% endhighlight %} - -p. So we just wrapped our Backbone code with jQuery to make sure the page has loaded correctly. Then we create our main application view by extending Backbone and passing a JSON object with our options. We specified "body" to be the associated element for this view. - -p. The events property is very powerful and lets us attach listeners to our views. In the example above we have attached a click listener to our button with id "add-friend". Read more about events "here":http://documentcloud.github.com/backbone/#View-delegateEvents - -p. After we have setup our AppView, we can just call to initiate it at anytime. - -h3. Collecting the Models - -p. A Model in Backbone.js can represent any entity you like and in this case we want it to represent a friend. We can easily create friend Models but without any structure they become fairly useless to us because we can't iterate through them unless they are grouped together. So Backbone.js implements the Collection class which allows us to order our models. Read more "here":http://documentcloud.github.com/backbone/#Collection . - -p. Now we get to the fun part. You can bind listeners/events to Models and Collections. So whenever there are changes to the data we can call events to react accordingly. - -p. We are going to add this code to our example which lets us add a friend Model to our friend Collection. We will then bind a listener to create a new list element when the data has changed. - -{% highlight javascript %} -(function ($) { - -Friend = Backbone.Model.extend({ -//Create a model to hold friend atribute -name: null -}); - -Friends = Backbone.Collection.extend({ -//This is our Friends collection and holds our Friend models -initialize: function (models, options) { -this.bind("add", options.view.addFriendLi); -//Listen for new additions to the collection and call a view function if so -} -}); - -AppView = Backbone.View.extend({ -el: $("body"), -initialize: function () { -this.friends = new Friends( null, { view: this }); -//Create a friends collection when the view is initialized. -//Pass it a reference to this view to create a connection between the two -}, -events: { -"click #add-friend": "showPrompt", -}, -showPrompt: function () { -var friend_name = prompt("Who is your friend?"); -var friend_model = new Friend({ name: friend_name }); -//Add a new friend model to our friend collection -this.friends.add( friend_model ); -}, -addFriendLi: function (model) { -//The parameter passed is a reference to the model that was added -$("#friends-list").append("<li>" + model.get('name') + "</li>"); -//Use .get to receive attributes of the model -} -}); - -var appview = new AppView; - -})(jQuery); - -{% endhighlight %} - -h2. "Demo":http://thomasdavis.github.com/examples/backbone-101 - "Source":https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101 - -h3. Conclusion - -p. I hope this helps anyone trying to pick it up. I don't mind answering any questions that I have the ability to answer. - -p. Would also love to hear to some optimization tips! - p.s. Would love some insight into MVVM, MVC etc - -p. Update: Changed the code to append the elements from the view and not the Model/Collection. The "problem":http://news.ycombinator.com/item?id=2158011 was described on ycombinator by emehrkay +h3. So how does backbone.js help? - Update 2: A user called <a href="http://twitter.com/svenlito" target="_blank">svnlto</a> had a pull request to fix up the example code to implement better coding practises, he was spot on so I merged his request into the master branch. You can view the pull request <a href="https://github.com/thomasdavis/thomasdavis.github.com/pull/1" target="_blank">here</a>. -<span class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span> -<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'bdee6d8c-ed9a-4867-90f6-011704c29ee3'});</script> </article> +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. -<script type="text/javascript"> -SyntaxHighlighter.all() -</script> -<script> -var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; -var idcomments_post_id = "backbone"; -var idcomments_post_url; -</script> -<span id="IDCommentsPostTitle" style="display:none"></span> -<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script> -</div> +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 diff --git a/_site/about.html b/_site/about.html new file mode 100644 index 0000000..870a63c --- /dev/null +++ b/_site/about.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>About Backbone Tutorials</title> + <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; + } + </style> +</head> +<body> + <div class="left ribbon-holder"> + <a href="#" class="red ribbon"> + <span class="text">Fork on GitHub</span> + </a> + </div> +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/about.html">about</a> + <a href="/contribute.html">contribute</a> + <a href="/contact.html">contact</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> + <h2>About Backbone Tutorials</h2> +<p>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</p> +<p>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.</p> + + + + </div> + + </div> +</div> + +</body> +</html> diff --git a/_site/anonymous-functions/index.html b/_site/anonymous-functions/index.html index 205bd91..98246cd 100644 --- a/_site/anonymous-functions/index.html +++ b/_site/anonymous-functions/index.html @@ -45,15 +45,15 @@ <body> <div class="left ribbon-holder"> <a href="#" class="red ribbon"> - <span class="text">Fork me on GitHub</span> + <span class="text">Fork on GitHub</span> </a> </div> <div class="container"> <div class="menu"> <a href="/">home</a> - <a href="/">about</a> - <a href="/">contribute</a> - <a href="/">contact</a> + <a href="/about.html">about</a> + <a href="/contribute.html">contribute</a> + <a href="/contact.html">contact</a> </div> @@ -150,19 +150,15 @@ var idcomments_post_url; <script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script></p> </div> </div> - -<div id="related"> - <h2>Related Posts</h2> - <ul class="posts"> - - <li><span>04 Mar 2011</span> » <a href="/jquery-create-your-own-deferred">Jquery Create Your Own Deferred</a></li> - - <li><span>07 Feb 2011</span> » <a href="/making-a-restful-ajax-app">Making A Restful Ajax App</a></li> - - <li><span>05 Feb 2011</span> » <a href="/backbone-views-and-templates">Backbone Views And Templates</a></li> - - </ul> +<script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id; +var idcomments_post_url; +</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/_site/backbone-introduction/index.html b/_site/backbone-introduction/index.html index d22d44d..5801b00 100644 --- a/_site/backbone-introduction/index.html +++ b/_site/backbone-introduction/index.html @@ -45,15 +45,15 @@ <body> <div class="left ribbon-holder"> <a href="#" class="red ribbon"> - <span class="text">Fork me on GitHub</span> + <span class="text">Fork on GitHub</span> </a> </div> <div class="container"> <div class="menu"> <a href="/">home</a> - <a href="/">about</a> - <a href="/">contribute</a> - <a href="/">contact</a> + <a href="/about.html">about</a> + <a href="/contribute.html">contribute</a> + <a href="/contact.html">contact</a> </div> @@ -65,182 +65,26 @@ <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>Why would you use backbone.js?</h2> -<p>Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure.</p> +<h2>Why do you need backbone.js?</h2> +<p>Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete <span class="caps">DOM</span> elements.</p> +<p>I shouldn’t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.</p> <h3>So how does backbone.js help?</h3> -<p>Backbone.js was written by a beautiful man called Jash Kenas. Backbone.js supplies structure to heavy javascript applications.</p> -<div class="highlight"><pre><code class="html"><span class="cp"><!DOCTYPE html></span> -<span class="nt"><html></span> -<span class="nt"><head></span> - <span class="nt"><title></span>I have a back bone<span class="nt"></title></span> -<span class="nt"></head></span> -<span class="nt"><body></span> - <span class="nt"><button</span> <span class="na">id=</span><span class="s">"add-friend"</span><span class="nt">></span>Add Friend<span class="nt"></button></span> - <span class="nt"><ul</span> <span class="na">id=</span><span class="s">"friends-list"</span><span class="nt">></span> - <span class="nt"></ul></span> - <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"</span><span class="nt">></script></span> - <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"</span><span class="nt">></script></span> - <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"</span><span class="nt">></script></span> -<span class="nt"></body></span> -<span class="nt"></html></span> -</code></pre> -</div><p><br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /></p> -<p>The official <a href="http://documentcloud.github.com/backbone/">website</a> describes Backbone.js as a library to supply structure to Javascript heavy web applications. After using Backbone.js for a week I could never see myself building any sort of Javascript functionality regardless of size without using Backbone.js or alternatives.</p> -<p>I have decided to write a quick introduction for those trying to grasp the mechanics behind it. I am only a beginner also and would love suggestions and tips to improve my code.</p> -<p>I am also very curious to hear what you think about how <span class="caps">MVC</span> ties into Javascript development and the most effective library you have used for logically organizing your Javascript.</p> -<p>Would be great to get a discussion on <span class="caps">MVC</span> vs <span class="caps">MVVM</span> vs others etc leave comments at the bottom!</p> -<p>Also could you implement this example better in another framework?</p> -<h3>Understanding the Model View Controller Paradigm</h3> -<p>I have used many frameworks which promote that they use <span class="caps">MVC</span>. I don’t think I have ever seen the same fundamental principals implemented the same way.</p> -<p>Backbone.js has 4 classes: Models, Views, Controllers and Collections. The Models and Collections class work hand in hand and when combined essentially make up the M(model) of <span class="caps">MVC</span>.</p> -<p>The main concept I follow when using Backbone.js is to make Views listen for changes in the Model and react accordingly. I would recommend bookmarking the homepage <a href="http://documentcloud.github.com/backbone/">documentation</a> and I perusing the annotated <a href="http://documentcloud.github.com/backbone/docs/backbone.html">source</a> code.</p> -<h3>Getting started</h3> -<p>I am going to run you through a basic tutorial that should get you on the right path if you are a bit lost like I was when I started.</p> -<p>First of all we are going to just setup a basic page and include Backbone.js and Underscore.js(a dependency of Backbone.js)</p> -<div class="highlight"><pre><code class="html"><span class="cp"><!DOCTYPE html></span> -<span class="nt"><html></span> -<span class="nt"><head></span> - <span class="nt"><title></span>I have a back bone<span class="nt"></title></span> -<span class="nt"></head></span> -<span class="nt"><body></span> - <span class="nt"><button</span> <span class="na">id=</span><span class="s">"add-friend"</span><span class="nt">></span>Add Friend<span class="nt"></button></span> - <span class="nt"><ul</span> <span class="na">id=</span><span class="s">"friends-list"</span><span class="nt">></span> - <span class="nt"></ul></span> - <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"</span><span class="nt">></script></span> - <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"</span><span class="nt">></script></span> - <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"</span><span class="nt">></script></span> -<span class="nt"></body></span> -<span class="nt"></html></span> -</code></pre> -</div><p>For those of you who are lazy the full example can be viewed <a href="http://thomasdavis.github.com/examples/backbone-101/">here</a> and downloaded <br /> -<a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101">here</a></p> -<h3>Setting up the main view</h3> -<p>Each view has a <span class="caps">HTML</span> <span class="caps">DOM</span> element associated with it. You can read more about why <a href="http://documentcloud.github.com/backbone/#View-el">here</a> .<br /> -Because this is our master view we are just going to associate the view with our page body in this example.</p> -<p>If the el(element) specified does not exist, Backbone.js will attempt to create it.</p> -<div class="highlight"><pre><code class="javascript"><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span> -<span class="nb">window</span><span class="p">.</span><span class="nx">AppView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> - <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"body"</span><span class="p">),</span> - <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> - <span class="s2">"click #add-friend"</span><span class="o">:</span> <span class="s2">"showPrompt"</span><span class="p">,</span> - <span class="p">},</span> - <span class="nx">showPrompt</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">friend_name</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">"Who is your friend?"</span><span class="p">);</span> - <span class="p">}</span> -<span class="p">});</span> -<span class="kd">var</span> <span class="nx">appview</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppView</span><span class="p">;</span> -<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span> -</code></pre> -</div><p>So we just wrapped our Backbone code with jQuery to make sure the page has loaded correctly. Then we create our main application view by extending Backbone and passing a <span class="caps">JSON</span> object with our options. We specified “body” to be the associated element for this view.</p> -<p>The events property is very powerful and lets us attach listeners to our views. In the example above we have attached a click listener to our button with id “add-friend”. Read more about events <a href="http://documentcloud.github.com/backbone/#View-delegateEvents">here</a></p> -<p>After we have setup our AppView, we can just call to initiate it at anytime.</p> -<h3>Collecting the Models</h3> -<p>A Model in Backbone.js can represent any entity you like and in this case we want it to represent a friend. We can easily create friend Models but without any structure they become fairly useless to us because we can’t iterate through them unless they are grouped together. So Backbone.js implements the Collection class which allows us to order our models. Read more <a href="http://documentcloud.github.com/backbone/#Collection">here</a> .</p> -<p>Now we get to the fun part. You can bind listeners/events to Models and Collections. So whenever there are changes to the data we can call events to react accordingly.</p> -<p>We are going to add this code to our example which lets us add a friend Model to our friend Collection. We will then bind a listener to create a new list element when the data has changed.</p> -<div class="highlight"><pre><code class="javascript"><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span> - -<span class="nx">Friend</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="c1">//Create a model to hold friend atribute</span> -<span class="nx">name</span><span class="o">:</span> <span class="kc">null</span> -<span class="p">});</span> - -<span class="nx">Friends</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="c1">//This is our Friends collection and holds our Friend models</span> -<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">models</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span> -<span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"add"</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">addFriendLi</span><span class="p">);</span> -<span class="c1">//Listen for new additions to the collection and call a view function if so</span> -<span class="p">}</span> -<span class="p">});</span> - -<span class="nx">AppView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> -<span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"body"</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="p">{</span> -<span class="k">this</span><span class="p">.</span><span class="nx">friends</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Friends</span><span class="p">(</span> <span class="kc">null</span><span class="p">,</span> <span class="p">{</span> <span class="nx">view</span><span class="o">:</span> <span class="k">this</span> <span class="p">});</span> -<span class="c1">//Create a friends collection when the view is initialized.</span> -<span class="c1">//Pass it a reference to this view to create a connection between the two</span> -<span class="p">},</span> -<span class="nx">events</span><span class="o">:</span> <span class="p">{</span> -<span class="s2">"click #add-friend"</span><span class="o">:</span> <span class="s2">"showPrompt"</span><span class="p">,</span> -<span class="p">},</span> -<span class="nx">showPrompt</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> -<span class="kd">var</span> <span class="nx">friend_name</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">"Who is your friend?"</span><span class="p">);</span> -<span class="kd">var</span> <span class="nx">friend_model</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Friend</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="nx">friend_name</span> <span class="p">});</span> -<span class="c1">//Add a new friend model to our friend collection</span> -<span class="k">this</span><span class="p">.</span><span class="nx">friends</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span> <span class="nx">friend_model</span> <span class="p">);</span> -<span class="p">},</span> -<span class="nx">addFriendLi</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span> -<span class="c1">//The parameter passed is a reference to the model that was added</span> -<span class="nx">$</span><span class="p">(</span><span class="s2">"#friends-list"</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s2">"<li>"</span> <span class="o">+</span> <span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'name'</span><span class="p">)</span> <span class="o">+</span> <span class="s2">"</li>"</span><span class="p">);</span> -<span class="c1">//Use .get to receive attributes of the model</span> -<span class="p">}</span> -<span class="p">});</span> - -<span class="kd">var</span> <span class="nx">appview</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppView</span><span class="p">;</span> - -<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span> -</code></pre> -</div><h2><a href="http://thomasdavis.github.com/examples/backbone-101">Demo</a><br /> - <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101">Source</a></h2> -<h3>Conclusion</h3> -<p>I hope this helps anyone trying to pick it up. I don’t mind answering any questions that I have the ability to answer.</p> -<p>Would also love to hear to some optimization tips! <br /> - p.s. Would love some insight into <span class="caps">MVVM</span>, <span class="caps">MVC</span> etc</p> -<p>Update: Changed the code to append the elements from the view and not the Model/Collection. The <a href="http://news.ycombinator.com/item?id=2158011">problem</a> was described on ycombinator by emehrkay</p> -Update 2: A user called <a href="http://twitter.com/svenlito" target="_blank">svnlto</a> had a pull request to fix up the example code to implement better coding practises, he was spot on so I merged his request into the master branch. You can view the pull request <a href="https://github.com/thomasdavis/thomasdavis.github.com/pull/1" target="_blank">here</a>. -<p><span class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span><br /> -<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'bdee6d8c-ed9a-4867-90f6-011704c29ee3'});</script> </article></p> -<script type="text/javascript"> -SyntaxHighlighter.all() -</script><script> +<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> +</div> +<script> var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; -var idcomments_post_id = "backbone"; +var idcomments_post_id; var idcomments_post_url; -</script><p><span id="IDCommentsPostTitle" style="display:none"></span><br /> -<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script></p> -</div> +</script> +<span id="IDCommentsPostTitle" style="display:none"></span> +<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script> </div> -<div id="related"> - <h2>Related Posts</h2> - <ul class="posts"> - - <li><span>07 Mar 2011</span> » <a href="/anonymous-functions">javascript - pass "this" to your anonymous functions</a></li> - - <li><span>04 Mar 2011</span> » <a href="/jquery-create-your-own-deferred">Jquery Create Your Own Deferred</a></li> - - <li><span>07 Feb 2011</span> » <a href="/making-a-restful-ajax-app">Making A Restful Ajax App</a></li> - - </ul> -</div> diff --git a/_site/contact.html b/_site/contact.html new file mode 100644 index 0000000..d25952b --- /dev/null +++ b/_site/contact.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Contact</title> + <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; + } + </style> +</head> +<body> + <div class="left ribbon-holder"> + <a href="#" class="red ribbon"> + <span class="text">Fork on GitHub</span> + </a> + </div> +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/about.html">about</a> + <a href="/contribute.html">contribute</a> + <a href="/contact.html">contact</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> + <h2>Contact</h2> +<p>You can contact the original owner of this site through <a href="https://github.com/thomasdavis">github</a> or via twitter(<a href="http://twitter.com/neutralthoughts">@neutralthoughts</a>).</p> + + + + </div> + + </div> +</div> + +</body> +</html> diff --git a/_site/contribute.html b/_site/contribute.html new file mode 100644 index 0000000..464fdd6 --- /dev/null +++ b/_site/contribute.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Contribute</title> + <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; + } + </style> +</head> +<body> + <div class="left ribbon-holder"> + <a href="#" class="red ribbon"> + <span class="text">Fork on GitHub</span> + </a> + </div> +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/about.html">about</a> + <a href="/contribute.html">contribute</a> + <a href="/contact.html">contact</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> + <h2>Contribute</h2> +<p>The main goal behind BackboneTutorials.com is to build a comprehensive guide for developers of all levels of experience. Discussion and debate to breed innovation for javascript applications is encouraged.</p> +<p>All contributions will be well acknowledge on the site.</p> + + + + </div> + + </div> +</div> + +</body> +</html> diff --git a/_site/css/style.css b/_site/css/style.css index a73a2ea..15b60ff 100644 --- a/_site/css/style.css +++ b/_site/css/style.css @@ -75,3 +75,6 @@ hr { margin-bottom:1.625em; } list-style: none; margin-left: 20px; } +ul { + margin-left: 20px; +} diff --git a/_site/index.html b/_site/index.html index eba624e..879e123 100644 --- a/_site/index.html +++ b/_site/index.html @@ -45,15 +45,15 @@ <body> <div class="left ribbon-holder"> <a href="#" class="red ribbon"> - <span class="text">Fork me on GitHub</span> + <span class="text">Fork on GitHub</span> </a> </div> <div class="container"> <div class="menu"> <a href="/">home</a> - <a href="/">about</a> - <a href="/">contribute</a> - <a href="/">contact</a> + <a href="/about.html">about</a> + <a href="/contribute.html">contribute</a> + <a href="/contact.html">contact</a> </div> diff --git a/about.textile b/about.textile new file mode 100644 index 0000000..aeace4b --- /dev/null +++ b/about.textile @@ -0,0 +1,10 @@ +--- +layout: default +title: About Backbone Tutorials +--- + +h2. About Backbone Tutorials + +p. 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. diff --git a/contact.textile b/contact.textile new file mode 100644 index 0000000..c80ab39 --- /dev/null +++ b/contact.textile @@ -0,0 +1,9 @@ +--- +layout: default +title: Contact +--- + +h2. Contact + +p. You can contact the original owner of this site through "github":https://github.com/thomasdavis or via twitter("@neutralthoughts":http://twitter.com/neutralthoughts). + diff --git a/contribute.textile b/contribute.textile new file mode 100644 index 0000000..469da93 --- /dev/null +++ b/contribute.textile @@ -0,0 +1,10 @@ +--- +layout: default +title: Contribute +--- + +h2. Contribute + +p. The main goal behind BackboneTutorials.com is to build a comprehensive guide for developers of all levels of experience. Discussion and debate to breed innovation for javascript applications is encouraged. + +All contributions will be well acknowledge on the site. diff --git a/css/style.css b/css/style.css index a73a2ea..15b60ff 100644 --- a/css/style.css +++ b/css/style.css @@ -75,3 +75,6 @@ hr { margin-bottom:1.625em; } list-style: none; margin-left: 20px; } +ul { + margin-left: 20px; +} |