diff options
| author | Thomas Davis <thomasalwyndavis@gmail.com> | 2014-11-14 09:30:31 +1000 |
|---|---|---|
| committer | Thomas Davis <thomasalwyndavis@gmail.com> | 2014-11-14 09:30:31 +1000 |
| commit | 1782c2c3299338e79ef5f4a9a950e8fcf90b42ac (patch) | |
| tree | 88ab9478ef92f4b240fc12d1e6a859b82373035b | |
| parent | 5fe3d858830a88dbcd54fd53ff08f225e48e45cc (diff) | |
| download | backbonetutorials-1782c2c3299338e79ef5f4a9a950e8fcf90b42ac.zip backbonetutorials-1782c2c3299338e79ef5f4a9a950e8fcf90b42ac.tar.gz backbonetutorials-1782c2c3299338e79ef5f4a9a950e8fcf90b42ac.tar.bz2 | |
update
30 files changed, 1351 insertions, 1449 deletions
diff --git a/_config.yml b/_config.yml index 7878bba..782b49a 100644 --- a/_config.yml +++ b/_config.yml @@ -1,2 +1,3 @@ +markdown: redcarpet pygments: true permalink: /:title diff --git a/_layouts/default.html b/_layouts/default.html index cd65b18..cf2387b 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,26 +54,27 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> {{ content }} - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_layouts/post.html b/_layouts/post.html index a1120ac..1b1a653 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -2,34 +2,31 @@ layout: default --- -<div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - + <div id="post"> {{ content }} </div> - </div> +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -42,4 +39,3 @@ layout: default (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> diff --git a/_posts/2012-8-1-seo-for-single-page-apps.md b/_posts/2012-8-1-seo-for-single-page-apps.md index 5c26733..f879527 100644 --- a/_posts/2012-8-1-seo-for-single-page-apps.md +++ b/_posts/2012-8-1-seo-for-single-page-apps.md @@ -27,7 +27,7 @@ Using modern headless browsers, we can easily return the fully rendered content You will need to install node.js and phantom.js onto a box. Then start up this server below. There are two files, one which is the web server and the other is a phantomjs script that renders the page. -```javascript +```js // web.js // Express is our web server that can handle request diff --git a/_site/2011-12-12-cross-domain-backbone-apps.html b/_site/2011-12-12-cross-domain-backbone-apps.html index ff7bae5..f3641c0 100644 --- a/_site/2011-12-12-cross-domain-backbone-apps.html +++ b/_site/2011-12-12-cross-domain-backbone-apps.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,32 +54,27 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - - - -<div id="post"> + <div id="post"> <h2>Cross Browser problems when consuming your own <span class="caps">API</span></h2> <p>This tutorial aims to help those who have separated their front-end completely from their back-end by building a restful interface as the mediator between the two.</p> <p>Consuming your own public api has great benefits and sites such as foursquare have <a href="http://engineering.foursquare.com/2011/12/08/web-sites-are-clients-too/">recently</a> converted.</p> @@ -398,24 +392,25 @@ We should setup any useful containers that might be used by our Backbone views.< <li><a href="https://github.com/dzejkej">Jakub Kozisek</a> (created modular-backbone-updated containing updated libs with <span class="caps">AMD</span> support)</li> </ul> </div> - </div> +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -428,9 +423,7 @@ We should setup any useful containers that might be used by our Backbone views.< (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/about.html b/_site/about.html index e43e37a..fbfe595 100644 --- a/_site/about.html +++ b/_site/about.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,30 +54,31 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> <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> <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>). You can also find me at #cdnjs on freenode.net.</p> <p>thomasalwyndavis@gmail.com</p> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/atom.xml b/_site/atom.xml index 6488d59..c39c6f9 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>2014-11-14T09:02:49+10:00</updated> + <updated>2014-11-14T09:29:21+10:00</updated> <id>http://backbonetutorials.com/</id> <author> <name>Thomas Davis</name> @@ -16,17 +16,17 @@ <link href="http://backbonetutorials.com/real-time-backbone-with-pubnub"/> <updated>2013-08-29T00:00:00+10:00</updated> <id>http://backbonetutorials.com/real-time-backbone-with-pubnub</id> - <content type="html"><h1 id="real-time-backbone-with-pubnub">Real-Time Backbone With PubNub</h1> + <content type="html"><h1>Real-Time Backbone With PubNub</h1> <p>Backbone is one of the most popular JavaScript based frameworks to date. It is a simple yet powerful way to create interactive JavaScript applications with data bindings to a back-end server. Instead of having to constantly synchronize data between your client and server though, why not have all the data there when it happens? Users should not have to wait to see updates to their model’s data so we decided to tackle this problem by integrating Backbone.js with PubNub.</p> -<p><img src="http://blogly.pubnub.com/wp-content/uploads/2013/08/PubNubBackboneJS.png" alt="PubnNub and Backbone" /></p> +<p><img src="http://blogly.pubnub.com/wp-content/uploads/2013/08/PubNubBackboneJS.png" alt="PubnNub and Backbone"></p> <p>Our integration allows developers to create a Backbone model or collection and have them synchronize with every other client instance of those models or collections in real-time. This will give any Backbone application a better user experience when working with collaborative, social, or any type of multi-user interface. It works by taking all of the create, update, and delete methods that are spawned by Backbone and propagating them across the PubNub real-time network.</p> <p>Want to see it in action? A full working tutorial and all the code you need is available at our <a href="http://pubnub.github.io/backbone/">GitHub page</a></p> -<h2 id="getting-started">Getting Started</h2> +<h2>Getting Started</h2> <p>The easiest way to get started is by using bower via <code>bower install pubnub-backbone</code>. You can also clone the repository and copy the built javascript files. Now you can include this and the base PubNub library found at <a href="https://github.com/pubnub/javascript#pubnub-cdn-javascript-sdk">https://github.com/pubnub/javascript#pubnub-cdn-javascript-sdk</a> like so:</p> @@ -40,7 +40,7 @@ <span class="nx">subscribe_key</span><span class="o">:</span> <span class="s1">&#39;demo&#39;</span> <span class="p">});</span></code></pre></div> -<h2 id="creating-a-real-time-collection">Creating a Real-Time Collection</h2> +<h2>Creating a Real-Time Collection</h2> <p>Now that we have a connection to PubNub, we can feed that connection into our custom Backbone collection:</p> @@ -49,7 +49,7 @@ <span class="nx">pubnub</span><span class="o">:</span> <span class="nx">pubnub</span> <span class="p">});</span></code></pre></div> -<p>This will look and act just like a normal Backbone collection with two extra keys. The “name” key allows PubNub to distinguish this collection, so it connects this collections to only collections of the same type. Think of this as a namespace so you can have multiple types of collections all updating in real-time. It uses this to generate a PubNub channel that is unique to the collection in the form of “backbone-collection-{name}”. The “pubnub” property is the globally referenced connection to the PubNub network. This is the object that comes back after calling PUBNUB.init.</p> +<p>This will look and act just like a normal Backbone collection with two extra keys. The “name” key allows PubNub to distinguish this collection, so it connects this collections to only collections of the same type. Think of this as a namespace so you can have multiple types of collections all updating in real-time. It uses this to generate a PubNub channel that is unique to the collection in the form of &quot;backbone-collection-{name}&quot;. The &quot;pubnub&quot; property is the globally referenced connection to the PubNub network. This is the object that comes back after calling PUBNUB.init.</p> <p>Now your Backbone collection will update in real-time. You can listen for add and remove events just like usual when something gets added or removed in real-time. The next step is to implement a way to get the current set of data when the collection first loads so every client is using the same data set. A great way of accomplishing this is by listening to the PubNub based events with a server and replicating the data store. Then the client can ask for the current set of data every time the application loads. This is made even simpler when using the backbone npm module for nodejs:</p> @@ -110,70 +110,68 @@ <link href="http://backbonetutorials.com/seo-for-single-page-apps"/> <updated>2012-08-01T00:00:00+10:00</updated> <id>http://backbonetutorials.com/seo-for-single-page-apps</id> - <content type="html"><h1 id="seo-for-single-page-apps">SEO for single page apps</h1> + <content type="html"><h1>SEO for single page apps</h1> -<p>This tutorial will show you how to index your application on search engines. As the author I believe that servers should be completely independent of the client in the age of API’s. Which speeds up development for the ever increasing array of clients. It is on the shoulders of the search engines to conform and they should not dictate how the web is stored and accessed.</p> +<p>This tutorial will show you how to index your application on search engines. As the author I believe that servers should be completely independent of the client in the age of API&#39;s. Which speeds up development for the ever increasing array of clients. It is on the shoulders of the search engines to conform and they should not dictate how the web is stored and accessed.</p> <p>In 2009 Google released the idea of <a href="http://googlewebmastercentral.blogspot.com.au/2009/10/proposal-for-making-ajax-crawlable.html">escaped fragments</a>. </p> <p>The idea simply stating that if a search engine should come across your JavaScript application then you have the permission to redirect the search engine to another URL that serves the fully rendered version of the page (The current search engines cannot execute much JavaScript (Some people speculate that Google Chrome was born of Google Search wishing to successfully render every web page to retrieve ajaxed content)).</p> -<h2 id="how-does-redirecting-bots-work">How does redirecting bots work?</h2> +<h2>How does redirecting bots work?</h2> <p>Using modern headless browsers, we can easily return the fully rendered content per request by redirecting bots using our web servers configuration. Here is an image made by Google depicting the setup.</p> -<p><img src="http://acris.googlecode.com/svn/wiki/images/seo_google_crawlability.png" alt="headless seo" /></p> +<p><img src="http://acris.googlecode.com/svn/wiki/images/seo_google_crawlability.png" alt="headless seo"></p> -<div style="clear: both;"></div> +<div style='clear: both;'></div> -<h2 id="implementation-using-phantomjs">Implementation using Phantom.js</h2> +<h2>Implementation using Phantom.js</h2> <p><a href="http://phantomjs.org/">Phantom.js</a> is a headless webkit browser. We are going to setup a node.js server that given a URL, it will fully render the page content. Then we will redirect bots to this server to retrieve the correct content.</p> <p>You will need to install node.js and phantom.js onto a box. Then start up this server below. There are two files, one which is the web server and the other is a phantomjs script that renders the page.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// web.js</span> + +<span class="c1">// Express is our web server that can handle request</span> +<span class="kd">var</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;express&#39;</span><span class="p">);</span> +<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> + + +<span class="kd">var</span> <span class="nx">getContent</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span> + <span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span> + <span class="c1">// Here we spawn a phantom.js process, the first element of the </span> + <span class="c1">// array is our phantomjs script and the second element is our url </span> + <span class="kd">var</span> <span class="nx">phantom</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;child_process&#39;</span><span class="p">).</span><span class="nx">spawn</span><span class="p">(</span><span class="s1">&#39;phantomjs&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;phantom-server.js&#39;</span><span class="p">,</span> <span class="nx">url</span><span class="p">]);</span> + <span class="nx">phantom</span><span class="p">.</span><span class="nx">stdout</span><span class="p">.</span><span class="nx">setEncoding</span><span class="p">(</span><span class="s1">&#39;utf8&#39;</span><span class="p">);</span> + <span class="c1">// Our phantom.js script is simply logging the output and</span> + <span class="c1">// we access it here through stdout</span> + <span class="nx">phantom</span><span class="p">.</span><span class="nx">stdout</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;data&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">content</span> <span class="o">+=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span> + <span class="p">});</span> + <span class="nx">phantom</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;exit&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">code</span><span class="p">)</span> <span class="p">{</span> + <span class="k">if</span> <span class="p">(</span><span class="nx">code</span> <span class="o">!==</span> <span class="mi">0</span><span class="p">)</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="s1">&#39;We have an error&#39;</span><span class="p">);</span> + <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> + <span class="c1">// once our phantom.js script exits, let&#39;s call out call back</span> + <span class="c1">// which outputs the contents to the page</span> + <span class="nx">callback</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> +<span class="p">};</span> -<p>```javascript -// web.js</p> - -<p>// Express is our web server that can handle request -var express = require(‘express’); -var app = express();</p> - -<p>var getContent = function(url, callback) { - var content = ‘’; - // Here we spawn a phantom.js process, the first element of the - // array is our phantomjs script and the second element is our url - var phantom = require(‘child_process’).spawn(‘phantomjs’, [‘phantom-server.js’, url]); - phantom.stdout.setEncoding(‘utf8’); - // Our phantom.js script is simply logging the output and - // we access it here through stdout - phantom.stdout.on(‘data’, function(data) { - content += data.toString(); - }); - phantom.on(‘exit’, function(code) { - if (code !== 0) { - console.log(‘We have an error’); - } else { - // once our phantom.js script exits, let’s call out call back - // which outputs the contents to the page - callback(content); - } - }); -};</p> - -<p>var respond = function (req, res) { - // Because we use [P] in htaccess we have access to this header - url = ‘http://’ + req.headers[‘x-forwarded-host’] + req.params[0]; - getContent(url, function (content) { - res.send(content); - }); -}</p> - -<p>app.get(/(.*)/, respond); -app.listen(3000); -```</p> - -<p>The script below is <code>phantom-server.js</code> and will be in charge of fully rendering the content. We don’t return the content until the page is fully rendered. We hook into the resources listener to do this.</p> +<span class="kd">var</span> <span class="nx">respond</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span> + <span class="c1">// Because we use [P] in htaccess we have access to this header</span> + <span class="nx">url</span> <span class="o">=</span> <span class="s1">&#39;http://&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">headers</span><span class="p">[</span><span class="s1">&#39;x-forwarded-host&#39;</span><span class="p">]</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">params</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span> + <span class="nx">getContent</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">content</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span> + <span class="p">});</span> +<span class="p">}</span> + +<span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="sr">/(.*)/</span><span class="p">,</span> <span class="nx">respond</span><span class="p">);</span> +<span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">3000</span><span class="p">);</span> +</code></pre></div> +<p>The script below is <code>phantom-server.js</code> and will be in charge of fully rendering the content. We don&#39;t return the content until the page is fully rendered. We hook into the resources listener to do this.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">page</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;webpage&#39;</span><span class="p">).</span><span class="nx">create</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">system</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;system&#39;</span><span class="p">);</span> @@ -213,9 +211,9 @@ app.listen(3000); <span class="c1">// Let us check to see if the page is finished rendering</span> <span class="kd">var</span> <span class="nx">checkCompleteInterval</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="nx">checkComplete</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span></code></pre></div> -<p>Once we have this server up and running we just redirect bots to the server in our client’s web server configuration.</p> +<p>Once we have this server up and running we just redirect bots to the server in our client&#39;s web server configuration.</p> -<h2 id="redirecting-bots">Redirecting bots</h2> +<h2>Redirecting bots</h2> <p>If you are using apache we can edit out <code>.htaccess</code> such that Google requests are proxied to our middle man phantom.js server.</p> @@ -225,8 +223,8 @@ app.listen(3000); <p>We could also include other <code>RewriteCond</code>, such as <code>user agent</code> to redirect other search engines we wish to be indexed on.</p> -<p>Though Google won’t use <code>_escaped_fragment_</code> unless we tell it to by either including a meta tag; -<code>&lt;meta name="fragment" content="!"&gt;</code> +<p>Though Google won&#39;t use <code>_escaped_fragment_</code> unless we tell it to by either including a meta tag; +<code>&lt;meta name=&quot;fragment&quot; content=&quot;!&quot;&gt;</code> or using <code>#!</code> URLs in our links.</p> @@ -236,10 +234,10 @@ using <code>#!</code> URLs in our links.</p> <p>This has been tested with Google Webmasters fetch tool. Make sure you include <code>#!</code> on your URLs when using the fetch tool.</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://seo.apiengine.io">Open source node.js Seo Server</a></li> +<li><a href="http://seo.apiengine.io">Open source node.js Seo Server</a></li> </ul> </content> </entry> @@ -249,7 +247,7 @@ using <code>#!</code> URLs in our links.</p> <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"><h1 id="organizing-your-application-using-modules-requirejs">Organizing your application using Modules (require.js)</h1> + <content type="html"><h1>Organizing your application using Modules (require.js)</h1> <p>Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development environments.</p> @@ -259,7 +257,7 @@ using <code>#!</code> URLs in our links.</p> <p>This tutorial will get you started on combining Backbone.js with <a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD</a> (Asynchronous Module Definitions).</p> -<h2 id="what-is-amd">What is AMD?</h2> +<h2>What is AMD?</h2> <p><a href="https://github.com/amdjs/amdjs-api/wiki/AMD">Asynchronous Module Definitions</a> 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.</p> @@ -270,20 +268,20 @@ using <code>#!</code> URLs in our links.</p> <p>Quick Overview</p> <ul> - <li>Modular</li> - <li>Scalable</li> - <li>Compiles well(see <a href="http://requirejs.org/docs/optimization.html">r.js</a> )</li> - <li>Market Adoption( <a href="http://dojotoolkit.org/reference-guide/releasenotes/1.6.html">Dojo 1.6 converted fully to AMD</a> )</li> +<li>Modular</li> +<li>Scalable</li> +<li>Compiles well(see <a href="http://requirejs.org/docs/optimization.html">r.js</a> )</li> +<li>Market Adoption( <a href="http://dojotoolkit.org/reference-guide/releasenotes/1.6.html">Dojo 1.6 converted fully to AMD</a> )</li> </ul> -<h2 id="why-requirejs">Why Require.js?</h2> +<h2>Why Require.js?</h2> <p>p. Require.js has a great community and it is growing rapidly. <a href="http://tagneto.blogspot.com/">James Burke</a> the author is married to Require.js and always responds to user feedback. He is a leading expert in script loading and a contributer to the AMD specification.</p> <p><a href="https://twitter.com/jrburke" class="twitter-follow-button">Follow @jrburke</a> <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></p> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>To easily understand this tutorial you should jump straight into the example code base.</p> @@ -295,9 +293,9 @@ using <code>#!</code> URLs in our links.</p> <p>If you would like to see how a particular use case would be implemented please visit the GitHub page and create an issue.(Example Request: How to do nested views).</p> -<p>The example isn’t super fleshed out but should give you a vague idea.</p> +<p>The example isn&#39;t super fleshed out but should give you a vague idea.</p> -<h2 id="example-file-structure">Example File Structure</h2> +<h2>Example File Structure</h2> <p>There are many different ways to lay out your files and I believe it is actually dependent on the size and type of the project. In the example below views and templates are mirrored in file structure. Collections and Models are categorized into folders kind of like an ORM.</p> @@ -344,19 +342,19 @@ using <code>#!</code> URLs in our links.</p> <p>To continue you must really understand what we are aiming towards as described in the introduction.</p> -<h2 id="bootstrapping-your-application">Bootstrapping your application</h2> +<h2>Bootstrapping your application</h2> <p>Using Require.js we define a single entry point on our index page. We should setup any useful containers that might be used by our Backbone views.</p> -<p><em>Note: The data-main attribute on our single script tag tells Require.js to load the script located at “js/main.js”. It automatically appends the “.js”</em></p> +<p><em>Note: The data-main attribute on our single script tag tells Require.js to load the script located at &quot;js/main.js&quot;. It automatically appends the &quot;.js&quot;</em></p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!doctype html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> - <span class="nt">&lt;title&gt;</span>Jackie Chan<span class="nt">&lt;/title&gt;</span> - <span class="c">&lt;!-- Load the script &quot;js/main.js&quot; as our entry point --&gt;</span> - <span class="nt">&lt;script </span><span class="na">data-main=</span><span class="s">&quot;js/main&quot;</span> <span class="na">src=</span><span class="s">&quot;js/libs/require/require.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span> + <span class="nt">&lt;title&gt;</span>Jackie Chan<span class="nt">&lt;/title&gt;</span> + <span class="c">&lt;!-- Load the script &quot;js/main.js&quot; as our entry point --&gt;</span> + <span class="nt">&lt;script </span><span class="na">data-main=</span><span class="s">&quot;js/main&quot;</span> <span class="na">src=</span><span class="s">&quot;js/libs/require/require.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> @@ -370,19 +368,19 @@ We should setup any useful containers that might be used by our Backbone views.& <p>You should most always end up with quite a light weight index file. You can serve this off your server and then the rest of your site off a CDN ensuring that everything that can be cached, will be. (You can also now serve the index file off the CDN using Cloudfront)</p> -<h3 id="what-does-the-bootstrap-look-like">What does the bootstrap look like?</h3> +<h3>What does the bootstrap look like?</h3> <p>Our bootstrap file will be responsible for configuring Require.js and loading initially important dependencies.</p> <p>In the example below we configure Require.js to create a shortcut alias to commonly used scripts such as jQuery, Underscore and Backbone.</p> -<p>Unfortunately Backbone.js isn’t AMD enabled so I downloaded the community managed repository and patched it on <a href="https://github.com/amdjs">amdjs</a>.</p> +<p>Unfortunately Backbone.js isn&#39;t AMD enabled so I downloaded the community managed repository and patched it on <a href="https://github.com/amdjs">amdjs</a>.</p> <p>Hopefully if the AMD specification takes off these libraries will add code to allow themselves to be loaded asynchronously. Due to this inconvenience the bootstrap is not as intuitive as it could be.</p> -<p>We also request a module called “app”, this will contain the entirety of our application logic.</p> +<p>We also request a module called &quot;app&quot;, this will contain the entirety of our application logic.</p> -<p><em>Note: Modules are loaded relatively to the boot strap and always append with “.js”. So the module “app” will load “app.js” which is in the same directory as the bootstrap.</em></p> +<p><em>Note: Modules are loaded relatively to the boot strap and always append with &quot;.js&quot;. So the module &quot;app&quot; will load &quot;app.js&quot; which is in the same directory as the bootstrap.</em></p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Filename: main.js</span> @@ -406,17 +404,17 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="nx">App</span><span class="p">.</span><span class="nx">initialize</span><span class="p">();</span> <span class="p">});</span></code></pre></div> -<h2 id="how-should-we-lay-out-external-scripts">How should we lay out external scripts?</h2> +<h2>How should we lay out external scripts?</h2> <p>Any modules we develop for our application using AMD/Require.js will be asynchronously loaded.</p> <p>We have a heavy dependency on jQuery, Underscore and Backbone, unfortunately this libraries are loaded synchronously and also depend on each other existing in the global namespace.</p> -<h2 id="a-boiler-plate-module">A boiler plate module</h2> +<h2>A boiler plate module</h2> -<p>So before we start developing our application, let’s quickly look over boiler plate code that will be reused quite often.</p> +<p>So before we start developing our application, let&#39;s quickly look over boiler plate code that will be reused quite often.</p> -<p>For convenience sake I generally keep a “boilerplate.js” in my application root so I can copy it when I need to.</p> +<p>For convenience sake I generally keep a &quot;boilerplate.js&quot; in my application root so I can copy it when I need to.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">//Filename: boilerplate.js</span> @@ -434,7 +432,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>The first argument of the define function is our dependency array, in the future we can pass in any modules we like.</p> -<h2 id="appjs-building-our-applications-main-module">App.js Building our applications main module</h2> +<h2>App.js Building our applications main module</h2> <p>Our applications main module should always remain light weight. This tutorial only covers setting up a Backbone Router and initializing it in our main module.</p> @@ -501,7 +499,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="p">};</span> <span class="p">});</span></code></pre></div> -<h2 id="modularizing-a-backbone-view">Modularizing a Backbone View</h2> +<h2>Modularizing a Backbone View</h2> <p>Backbone views usually interact with the DOM. Using our new modular system we can load in JavaScript templates using the Require.js text! plug-in.</p> @@ -530,7 +528,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>JavaScript templating allows us to separate the design from the application logic by placing all our HTML in the templates folder.</p> -<h2 id="modularizing-a-collection-model-and-view">Modularizing a Collection, Model and View</h2> +<h2>Modularizing a Collection, Model and View</h2> <p>Now we put it altogether by chaining up a Model, Collection and View which is a typical scenario when building a Backbone.js application.</p> @@ -550,10 +548,10 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="k">return</span> <span class="nx">ProjectModel</span><span class="p">;</span> <span class="p">});</span></code></pre></div> -<p>Now that we have a model, our collection module can depend on it. We will set the “model” attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.</p> +<p>Now that we have a model, our collection module can depend on it. We will set the &quot;model&quot; attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.</p> <blockquote> - <p>Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.</p> +<p>Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.</p> </blockquote> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Filename: collections/projects</span> @@ -595,22 +593,22 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="k">return</span> <span class="nx">ProjectListView</span><span class="p">;</span> <span class="p">});</span></code></pre></div> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p>Looking forward to feedback so I can turn this post and example into quality references on building modular JavaScript applications.</p> <p>Get in touch with me on twitter, comments or GitHub!</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></li> +<li><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/dzejkej">Jakub Kozisek</a> (created modular-backbone-updated containing updated libs with AMD support)</li> +<li><a href="https://github.com/dzejkej">Jakub Kozisek</a> (created modular-backbone-updated containing updated libs with AMD support)</li> </ul> </content> </entry> @@ -620,7 +618,7 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/cross-domain-sessions"/> <updated>2011-05-01T00:00:00+10:00</updated> <id>http://backbonetutorials.com/cross-domain-sessions</id> - <content type="html"><h1 id="cross-domain-backbonejs-with-sessions-using-cors">Cross-domain Backbone.js with sessions using CORS</h1> + <content type="html"><h1>Cross-domain Backbone.js with sessions using CORS</h1> <p>** This tutorial is a proof of concept and needs to be checked for security flaws **</p> @@ -629,35 +627,35 @@ We should setup any useful containers that might be used by our Backbone views.& <p>On a personal note, I consider this development practice highly desirable and encourage others to think of the possible benefits but the security still needs to be proved.</p> <blockquote> - <p>Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries. - <a href="http://enable-cors.org/">enable-cors.org</a></p> +<p>Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries. - <a href="http://enable-cors.org/">enable-cors.org</a></p> </blockquote> <p><strong>Some benefits include</strong></p> <ul> - <li>The client and back end exist independently regardless of where they are each hosted and built.</li> - <li>Due to the separation of concerns, testing now becomes easier and more controlled.</li> - <li>Develop only one API on the server, your front-end could be outsourced or built by a in-house team.</li> - <li>As a front-end developer you can host the client anywhere.</li> - <li>This separation enforces that the API be built robustly, documented, collaboratively and versioned.</li> +<li>The client and back end exist independently regardless of where they are each hosted and built.</li> +<li>Due to the separation of concerns, testing now becomes easier and more controlled.</li> +<li>Develop only one API on the server, your front-end could be outsourced or built by a in-house team.</li> +<li>As a front-end developer you can host the client anywhere.</li> +<li>This separation enforces that the API be built robustly, documented, collaboratively and versioned.</li> </ul> <p>** Cons of this tutorial **</p> <ul> - <li>This tutorial doesn’t explain how to perform this with cross browser support. CORS headers aren’t supported by Opera and IE 6/7. Though it is do-able using <a href="http://easyxdm.net/wp/">easyXDM</a></li> - <li>Security is somewhat addressed but maybe a more thorough security expert can chime in.</li> +<li>This tutorial doesn&#39;t explain how to perform this with cross browser support. CORS headers aren&#39;t supported by Opera and IE 6/7. Though it is do-able using <a href="http://easyxdm.net/wp/">easyXDM</a></li> +<li>Security is somewhat addressed but maybe a more thorough security expert can chime in.</li> </ul> -<h2 id="security">Security</h2> +<h2>Security</h2> <ul> - <li>Don’t allow GET request to change data, only retrieve.</li> - <li>Whitelist your allowed domains (see <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/cross-domain/server.js">server.js</a>)</li> - <li>Protect again <a href="http://blog.opensecurityresearch.com/2012/02/json-csrf-with-parameter-padding.html">JSON padding</a></li> +<li>Don&#39;t allow GET request to change data, only retrieve.</li> +<li>Whitelist your allowed domains (see <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/cross-domain/server.js">server.js</a>)</li> +<li>Protect again <a href="http://blog.opensecurityresearch.com/2012/02/json-csrf-with-parameter-padding.html">JSON padding</a></li> </ul> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>To easily understand this tutorial you should jump straight into the example code base.</p> @@ -669,7 +667,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>This tutorial focuses on building a flexible Session model to control session state in your application.</p> -<h2 id="checking-session-state-at-first-load">Checking session state at first load</h2> +<h2>Checking session state at first load</h2> <p>Before starting any routes, we should really know whether the user is authenticated. This will allow us to load the appropriate views. We will simply wrap our <code>Backbone.history.start</code> in a callback that executes after <code>Session.getAuth</code> has checked the server. We will jump into our Session model next.</p> @@ -703,15 +701,15 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> <span class="p">})</span> <span class="p">}</span> - <span class="p">});</span> + <span class="p">});</span> <span class="k">return</span> <span class="nx">AppView</span><span class="p">;</span> <span class="p">});</span></code></pre></div> <p><em>Note: We have used jQuery <code>ajaxPrefilter</code> to hook into all AJAX requests before they are executed. This is where we specify what server we want the application to hit.</em></p> -<h2 id="an-example-session-model">An example Session model</h2> +<h2>An example Session model</h2> -<p>This is a very light weight Session model which handles most situations. Read through the code and comments below. The model simply has a login, logout and check function. Again we have hooked into jQuery <code>ajaxPrefilter</code> to allow for csrf tokens and also telling jQuery to send cookies with the <code>withCredentials</code> property. The model relies heavily on it’s <code>auth</code> property. Throughout your application, each view can simply bind to <code>change:auth</code> on the Session model and react accordingly. Because we return this AMD module instantiated using the new keyword, then it will keep state throughout the page. (This may not be best practice but it’s highly convenient)</p> +<p>This is a very light weight Session model which handles most situations. Read through the code and comments below. The model simply has a login, logout and check function. Again we have hooked into jQuery <code>ajaxPrefilter</code> to allow for csrf tokens and also telling jQuery to send cookies with the <code>withCredentials</code> property. The model relies heavily on it&#39;s <code>auth</code> property. Throughout your application, each view can simply bind to <code>change:auth</code> on the Session model and react accordingly. Because we return this AMD module instantiated using the new keyword, then it will keep state throughout the page. (This may not be best practice but it&#39;s highly convenient)</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// views/app.js</span> <span class="nx">define</span><span class="p">([</span> @@ -771,9 +769,9 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: This session model is missing one useful feature. If a user looses auth when navigating your application then the application should set {auth: false} on this model. To do this, in the <code>ajaxPrefilter</code> edit outgoing <code>success</code> functions to check if the server response was {auth: false} and then call the original <code>success()</code> function.</em></p> -<h2 id="hooking-up-views-to-listen-to-changes-in-auth">Hooking up views to listen to changes in <code>auth</code></h2> +<h2>Hooking up views to listen to changes in <code>auth</code></h2> -<p>Now that we have a Session model, let’s hook up our <code>login/logout</code> view to listen to changes in <code>auth</code>. When creating the view we use <code>on</code> to bind a listener to the <code>auth</code> attribute of our model. Everytime it changes we will re-render the view which will conditionally load a template depending on the value of <code>Session.get('auth')</code>.</p> +<p>Now that we have a Session model, let&#39;s hook up our <code>login/logout</code> view to listen to changes in <code>auth</code>. When creating the view we use <code>on</code> to bind a listener to the <code>auth</code> attribute of our model. Everytime it changes we will re-render the view which will conditionally load a template depending on the value of <code>Session.get(&#39;auth&#39;)</code>.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// models/session.js</span> <span class="nx">define</span><span class="p">([</span> @@ -842,46 +840,46 @@ We should setup any useful containers that might be used by our Backbone views.& <p>This wraps up setting up the client, there are some notable points to make sure this technique works.</p> <ul> - <li>You must use <code>withCredentials</code> supplied by jQuery - session.js</li> - <li>You must send your request with csrf tokens for security - session.js</li> - <li>You should wrap your applications entry pointer (router in this example) in a check auth function - app.js</li> - <li>You must point your application at the right server - app.js</li> +<li>You must use <code>withCredentials</code> supplied by jQuery - session.js</li> +<li>You must send your request with csrf tokens for security - session.js</li> +<li>You should wrap your applications entry pointer (router in this example) in a check auth function - app.js</li> +<li>You must point your application at the right server - app.js</li> </ul> -<h2 id="building-a-compatible-server">Building a compatible server</h2> +<h2>Building a compatible server</h2> <p>This tutorial uses node.js, express.js and a modified csrf.js library. An example server.js file exist in the <code>examples/cross-domain</code> folder. When inside the folder simply type <code>npm install -d</code> to install the dependencies and then <code>node server.js</code> to start the server. Again, make sure your <code>app.js</code> points at the correct server.</p> <p>The server has to do a few things;</p> <ul> - <li>Allow CORS request</li> - <li>Implement csrf protection</li> - <li>Allow jQuery to send credentials</li> - <li>Set a whitelist of allowed domains</li> - <li>Configure the correct response headers</li> +<li>Allow CORS request</li> +<li>Implement csrf protection</li> +<li>Allow jQuery to send credentials</li> +<li>Set a whitelist of allowed domains</li> +<li>Configure the correct response headers</li> </ul> <p>To save you sometime here are some gotchas;</p> <ul> - <li>When sending <code>withCredentials</code> you must set correct response header <code>Access-Control-Allow-Credentials: true</code>. Also as a security policy browsers do not allow <code>Access-Control-Allow-Origin</code> to be set to <code>*</code>. So the origin of the request has to be known and trusted, so in the example below we use an of white listed domains.</li> - <li>jQuery ajax will trigger the browser to send these headers to enforce security <code>origin, x-requested-with, accept</code> so our server must allow them.</li> - <li>The browser might send out a <code>pre-flight</code> request to verify that it can talk to the server. The server must return <code>200 OK</code> on these <code>pre-flight</code> request.</li> +<li>When sending <code>withCredentials</code> you must set correct response header <code>Access-Control-Allow-Credentials: true</code>. Also as a security policy browsers do not allow <code>Access-Control-Allow-Origin</code> to be set to <code>*</code>. So the origin of the request has to be known and trusted, so in the example below we use an of white listed domains.</li> +<li>jQuery ajax will trigger the browser to send these headers to enforce security <code>origin, x-requested-with, accept</code> so our server must allow them.</li> +<li>The browser might send out a <code>pre-flight</code> request to verify that it can talk to the server. The server must return <code>200 OK</code> on these <code>pre-flight</code> request.</li> </ul> <p>Be sure to read this Mozilla <a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/">documentation</a> on the above.</p> -<h2 id="example-node-server">Example node server</h2> +<h2>Example node server</h2> <p>This server below implements everything we have talked about so far. It should be relatively easy to see how would translate into other frameworks and languages. <code>app.configure</code> runs the specified libraries against every request. We have told the server that on each request it should check the csrf token and check if the origin domain is white-listed. If so we edit each request to contain the appropriate headers.</p> <p>This server has 3 endpoints, that are pseudo-restful;</p> <ul> - <li>POST /session - Login - Sets the session username and returns a csrf token for the user to use</li> - <li>DELETE /session - Logout - Destroys the session and regenerates a new csrf token if the user wants to re-login</li> - <li>GET /session - Checks Auth - Simply returns if auth is true or false, if true then also returns some session details</li> +<li>POST /session - Login - Sets the session username and returns a csrf token for the user to use</li> +<li>DELETE /session - Logout - Destroys the session and regenerates a new csrf token if the user wants to re-login</li> +<li>GET /session - Checks Auth - Simply returns if auth is true or false, if true then also returns some session details</li> </ul> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;express&#39;</span><span class="p">);</span> @@ -952,9 +950,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">8000</span><span class="p">);</span></code></pre></div> -<p><em>Note: I wrote a custom csrf module for this which can be found in the example directory. It’s based of connects and uses the <code>crypto</code> library. I didn’t spend much time on it but other traditional csrf modules won’t work because they aren’t exactly built for this implementation technique.</em></p> +<p><em>Note: I wrote a custom csrf module for this which can be found in the example directory. It&#39;s based of connects and uses the <code>crypto</code> library. I didn&#39;t spend much time on it but other traditional csrf modules won&#39;t work because they aren&#39;t exactly built for this implementation technique.</em></p> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p>This approach really hammers in the need for a well documented and designed API. A powerful API will let you do application iterations with ease.</p> @@ -968,12 +966,12 @@ We should setup any useful containers that might be used by our Backbone views.& <p><a href="http://backbonetutorials.com/examples/cross-domain/">Example Demo</a></p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/">cross-site xmlhttprequest with CORS</a></li> - <li><a href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing</a></li> - <li><a href="http://www.kendoui.com/blogs/teamblog/posts/11-10-04/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> +<li><a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/">cross-site xmlhttprequest with CORS</a></li> +<li><a href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing</a></li> +<li><a href="http://www.kendoui.com/blogs/teamblog/posts/11-10-04/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> </ul> </content> </entry> @@ -983,9 +981,9 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/infinite-scrolling"/> <updated>2011-04-28T00:00:00+10:00</updated> <id>http://backbonetutorials.com/infinite-scrolling</id> - <content type="html"><h1 id="lightweight-infinite-scrolling-using-twitter-api">Lightweight Infinite Scrolling using Twitter API</h1> + <content type="html"><h1>Lightweight Infinite Scrolling using Twitter API</h1> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>In this example we are going to build a widget that pulls in tweets and when the user scrolls to the bottom of the widget Backbone.js will re-sync with the server to bring down the next page of results.</p> @@ -995,13 +993,13 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: This tutorial will use <a href="http://backbonetutorials.com/organizing-backbone-using-modules">AMD</a> for modularity.</em></p> -<h2 id="the-twitter-collection">The Twitter Collection</h2> +<h2>The Twitter Collection</h2> -<p>Twitter offers a jsonp API for browsing tweets. The first thing to note is that we have to append ‘&amp;callback?’ to allow cross domain Ajax calls which is a feature of <a href="http://en.wikipedia.org/wiki/JSONP">jsonp</a>.</p> +<p>Twitter offers a jsonp API for browsing tweets. The first thing to note is that we have to append &#39;&amp;callback?&#39; to allow cross domain Ajax calls which is a feature of <a href="http://en.wikipedia.org/wiki/JSONP">jsonp</a>.</p> -<p>Using the ‘q’ and ‘page’ query parameters we can find the results we are after. In the collection definition below we have set some defaults which can be overridden at any point.</p> +<p>Using the &#39;q&#39; and &#39;page&#39; query parameters we can find the results we are after. In the collection definition below we have set some defaults which can be overridden at any point.</p> -<p>Twitter’s search API actually returns a whole bunch of meta information alongside the results. Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection. </p> +<p>Twitter&#39;s search API actually returns a whole bunch of meta information alongside the results. Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection. </p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// collections/twitter.js</span> <span class="nx">define</span><span class="p">([</span> @@ -1032,9 +1030,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="k">return</span> <span class="nx">resp</span><span class="p">.</span><span class="nx">results</span><span class="p">;</span> <span class="p">},</span></code></pre></div> -<h2 id="setting-up-the-view">Setting up the View</h2> +<h2>Setting up the View</h2> -<p>The first thing to do is to load our Twitter collection and template into the widget module. We should attach our collection to our view in our <code>initialize</code> function. <code>loadResults</code> will be responsible for calling fetch on our Twitter collection. On success we will append the latest results to our widget using our template. Our Backbone.js <code>events</code> will listen for <code>scroll</code> on the current <code>el</code> of the view which is ‘.twitter-widget’. If the current <code>scrollTop</code> is at the bottom then we simply increment the Twitter collections current page property and call <code>loadResults</code> again.</p> +<p>The first thing to do is to load our Twitter collection and template into the widget module. We should attach our collection to our view in our <code>initialize</code> function. <code>loadResults</code> will be responsible for calling fetch on our Twitter collection. On success we will append the latest results to our widget using our template. Our Backbone.js <code>events</code> will listen for <code>scroll</code> on the current <code>el</code> of the view which is &#39;.twitter-widget&#39;. If the current <code>scrollTop</code> is at the bottom then we simply increment the Twitter collections current page property and call <code>loadResults</code> again.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// views/twitter/widget.js</span> <span class="nx">define</span><span class="p">([</span> @@ -1087,9 +1085,9 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: <code>triggerPoint</code> will allow you to set an offset where the user has to scroll to before loading the next page</em></p> -<h2 id="the-widget-template">The widget template</h2> +<h2>The widget template</h2> -<p>Our view above passes into our underscore template the variable tweets which we can simply iterate over with using underscore’s <code>each</code> method.</p> +<p>Our view above passes into our underscore template the variable tweets which we can simply iterate over with using underscore&#39;s <code>each</code> method.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c">&lt;!--</span> <span class="nx">templates</span><span class="o">/</span><span class="nx">twitter</span><span class="o">/</span><span class="nx">list</span><span class="p">.</span><span class="nx">html</span> <span class="o">--&gt;</span> <span class="o">&lt;</span><span class="nx">ul</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&quot;tweets&quot;</span><span class="o">&gt;</span> @@ -1100,7 +1098,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="o">&lt;%</span> <span class="p">});</span> <span class="o">%&gt;</span> <span class="o">&lt;</span><span class="err">/ul&gt;</span></code></pre></div> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p>This is a very lightweight but robust infinite scroll example. There are caveats to using infinite scroll in UI/UX so make sure to only use it when applicable.</p> @@ -1115,11 +1113,11 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/nodejs-restify-mongodb-mongoose"/> <updated>2011-04-22T00:00:00+10:00</updated> <id>http://backbonetutorials.com/nodejs-restify-mongodb-mongoose</id> - <content type="html"><h1 id="simple-example---nodejs-restify-mongodb-and-mongoose">Simple example - Node.js, Restify, MongoDb and Mongoose</h1> + <content type="html"><h1>Simple example - Node.js, Restify, MongoDb and Mongoose</h1> -<p>Before I start, the Backbone.js parts of this tutorial will be using techniques described in “Organizing your application using <a href="http://backbonetutorials.com/organizing-backbone-using-modules/">Modules</a> to construct a simple guestbook.</p> +<p>Before I start, the Backbone.js parts of this tutorial will be using techniques described in &quot;Organizing your application using <a href="http://backbonetutorials.com/organizing-backbone-using-modules/">Modules</a> to construct a simple guestbook.</p> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>To easily understand this tutorial you should jump straight into the example code base.</p> @@ -1129,31 +1127,31 @@ We should setup any useful containers that might be used by our Backbone views.& <p>This tutorial will assist you in saving data(Backbone.js Models) to MongoDb and retrieving a list(Backbone.js Collections) of them back.</p> -<h2 id="the-technologies">The technologies</h2> +<h2>The technologies</h2> <p>This stack is great for rapid prototyping and highly intuitive. Personal note: I love using JavaScript as my only language for the entire application (FrontEnd/BackEnd/API/Database). Restify is still in early development but is essentially just an extension of Express. So for anyone needing more stability you can easily just substitute Express in.</p> -<h3 id="nodejs">Node.js</h3> +<h3>Node.js</h3> -<p>“Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”</p> +<p>&quot;Node.js is a platform built on Chrome&#39;s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.&quot;</p> -<h3 id="restify">Restify</h3> +<h3>Restify</h3> -<p>“Restify is a node.js module built specifically to enable you to build correct REST web services. It borrows heavily from express (intentionally) as that is more or less the de facto API for writing web applications on top of node.js.”</p> +<p>&quot;Restify is a node.js module built specifically to enable you to build correct REST web services. It borrows heavily from express (intentionally) as that is more or less the de facto API for writing web applications on top of node.js.&quot;</p> -<h3 id="mongodb">MongoDb</h3> +<h3>MongoDb</h3> -<p>“MongoDB (from “humongous”) is a scalable, high-performance, open source NoSQL database.”</p> +<p>&quot;MongoDB (from &quot;humongous&quot;) is a scalable, high-performance, open source NoSQL database.&quot;</p> -<h3 id="mongoose">Mongoose</h3> +<h3>Mongoose</h3> -<p>“Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.”</p> +<p>&quot;Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.&quot;</p> -<h2 id="building-the-server">Building the server</h2> +<h2>Building the server</h2> <p>In the example repository there is a server.js example which can be executed by running <code>node server.js</code>. If you use this example in your own applications make sure to update the Backbone.js <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/models/message.js">Model</a> and <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/collections/messages.js">Collection</a> definitions to match your server address.</p> -<h2 id="restify-configuration">Restify configuration</h2> +<h2>Restify configuration</h2> <p>The first thing to do is require the Restify module. Restify will be in control of handling our restful endpoints and returning the appropriate JSON.</p> @@ -1163,7 +1161,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>Note: bodyParser() takes care of turning your request data into a JavaScript object on the server automatically.</p> -<h2 id="mongodbmongoose-configuration">MongoDb/Mongoose configuration</h2> +<h2>MongoDb/Mongoose configuration</h2> <p>We simply want to require the MongoDb module and pass it a MongoDb authentication URI e.g. mongodb://username:server@mongoserver:10059/somecollection</p> @@ -1174,7 +1172,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="nx">db</span> <span class="o">=</span> <span class="nx">mongoose</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">creds</span><span class="p">.</span><span class="nx">mongoose_auth</span><span class="p">),</span> <span class="nx">Schema</span> <span class="o">=</span> <span class="nx">mongoose</span><span class="p">.</span><span class="nx">Schema</span><span class="p">;</span></code></pre></div> -<h2 id="mongoose-schema">Mongoose Schema</h2> +<h2>Mongoose Schema</h2> <p>Mongoose introduces a concept of <a href="http://mongoosejs.com/docs/model-definition.html">model/schema</a> enforcing types which allow for easier input validation etc</p> @@ -1189,7 +1187,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: <code>Message</code> can now be used for all things CRUD related.</em></p> -<h2 id="setting-up-the-routes">Setting up the routes</h2> +<h2>Setting up the routes</h2> <p>Just like in Backbone, Restify allows you to configure different routes and their associated callbacks. In the code below we define two routes. One for saving new messages and one for retrieving all messages. After we have created our function definitions, we attach them to either GET/POST/PUT/DELETE on a particular restful endpoint e.g. GET /messages</p> @@ -1230,22 +1228,22 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: Again you must remember to change the <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/models/message.js">Model</a> and <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/collections/messages.js">Collection</a> definitions to match your server address.</em></p> -<h2 id="setting-up-the-client-backbonejs">Setting up the client (Backbone.js)</h2> +<h2>Setting up the client (Backbone.js)</h2> -<p>I’ve actually used the latest copy of <a href="http://backboneboilerplate.com">http://backboneboilerplate.com</a> to set up the example page.</p> +<p>I&#39;ve actually used the latest copy of <a href="http://backboneboilerplate.com">http://backboneboilerplate.com</a> to set up the example page.</p> <p>The important files you will want to check out are;</p> <ul> - <li>views/dashboard/page.js</li> - <li>views/guestbook/form.js</li> - <li>views/guestbook/list.js</li> - <li>models/message.js</li> - <li>collections/messages.js</li> - <li>templates/guestbook/</li> +<li>views/dashboard/page.js</li> +<li>views/guestbook/form.js</li> +<li>views/guestbook/list.js</li> +<li>models/message.js</li> +<li>collections/messages.js</li> +<li>templates/guestbook/</li> </ul> -<h2 id="saving-a-message">Saving a message</h2> +<h2>Saving a message</h2> <p>First of all we want to setup a <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/templates/guestbook/form.html">template</a> for showing our form that creates new messages.</p> @@ -1300,7 +1298,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: <code>trigger</code> is from Backbone Events, I binded a listener to this view in <code>views/dashboard/page.js</code> so when a new message is submitted, the list is re-rendered. We are setting the date of the POST on the server so there is no need to pass it up.</em></p> -<h2 id="retrieving-a-list-of-messages">Retrieving a list of messages</h2> +<h2>Retrieving a list of messages</h2> <p>We setup a route on our server to generate a list of all available messages at <code>GET /messages</code>. So we need to define a collection with the appropriate <code>url</code> to fetch this data down.</p> @@ -1353,13 +1351,13 @@ We should setup any useful containers that might be used by our Backbone views.& <p>This actually sums up everything you need to know to implement this simple example.</p> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p><a href="https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/nodejs-mongodb-mongoose-restify">Example Codebase</a></p> <p><a href="http://backbonetutorials.com/examples/nodejs-mongodb-mongoose-restify/app">Example Demo</a></p> -<p>In this example you should really be using relative URL’s in your collections/models and instead setting a baseUrl in a config file or by placing your index.html file on the restful server.</p> +<p>In this example you should really be using relative URL&#39;s in your collections/models and instead setting a baseUrl in a config file or by placing your index.html file on the restful server.</p> <p>This example is hosted on GitHub therefore we had to include the absolute URL to the server which is hosted on nodejitsu.com</p> @@ -1369,7 +1367,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>Get in touch with me on twitter, comments or GitHub!</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <p><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></p> </content> @@ -1380,33 +1378,33 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/why-would-you-use-backbone"/> <updated>2011-02-01T00:00:00+10:00</updated> <id>http://backbonetutorials.com/why-would-you-use-backbone</id> - <content type="html"><h1 id="why-do-you-need-backbonejs">Why do you need Backbone.js?</h1> + <content type="html"><h1>Why do you need Backbone.js?</h1> <p>Building single-page web apps or complicated user interfaces will get extremely difficult by simply using <a href="http://jquery.com">jQuery</a> or <a href="http://mootools.net">MooTools</a>. 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.</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 structuring your application but you miss out on the benefits of the open source community.</p> +<p>I shouldn&#39;t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of structuring your application but you miss out on the benefits of the open source community.</p> -<h2 id="why-single-page-applications-are-the-future">Why single page applications are the future</h2> +<h2>Why single page applications are the future</h2> <p>Backbone.js enforces that communication to the server should be done entirely through a RESTful API. The web is currently trending such that all data/content will be exposed through an API. This is because the browser is no longer the only client, we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc.</p> -<h2 id="so-how-does-backbonejs-help">So how does Backbone.js help?</h2> +<h2>So how does Backbone.js help?</h2> <p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. It is essentially MVC for the client and allows you to make your code modular. 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> -<h2 id="other-frameworks">Other frameworks</h2> +<h2>Other frameworks</h2> <p>If you are looking for comparisons to build your single page application, try some of these resourceful links.</p> <ul> - <li><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/">A feature comparison of different frontend frameworks</a></li> - <li><a href="http://addyosmani.github.com/todomvc/">Todo MVC - Todo list implemented in the many different types of frontend frameworks</a></li> +<li><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/">A feature comparison of different frontend frameworks</a></li> +<li><a href="http://addyosmani.github.com/todomvc/">Todo MVC - Todo list implemented in the many different types of frontend frameworks</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/FND">FND</a></li> +<li><a href="https://github.com/FND">FND</a></li> </ul> <p><strong>If you questions regarding why you should choose Backbone.js as your framework, please leave a comment below</strong></p> @@ -1418,15 +1416,15 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/what-is-a-model"/> <updated>2011-01-29T00:00:00+10:00</updated> <id>http://backbonetutorials.com/what-is-a-model</id> - <content type="html"><h1 id="what-is-a-model">What is a model?</h1> + <content type="html"><h1>What is a model?</h1> -<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a> is so diluted that it’s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> +<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a> is so diluted that it&#39;s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> <blockquote> - <p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> +<p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> </blockquote> -<p>So for the purpose of the tutorial let’s create a model.</p> +<p>So for the purpose of the tutorial let&#39;s create a model.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Person</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> @@ -1436,9 +1434,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span></code></pre></div> -<p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.</p> +<p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don&#39;t have to include it in your model declaration but you will find yourself using it more often than not.</p> -<h2 id="setting-attributes">Setting attributes</h2> +<h2>Setting attributes</h2> <p>Now we want to pass some parameters when we create an instance of our model.</p> @@ -1455,7 +1453,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>So passing a JavaScript object to our constructor is the same as calling <em>model.set()</em>. Now that these models have attributes set we need to be able to retrieve them. </p> -<h2 id="getting-attributes">Getting attributes</h2> +<h2>Getting attributes</h2> <p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> @@ -1471,9 +1469,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> <span class="kd">var</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;child&quot;</span><span class="p">);</span> <span class="c1">// &#39;Ryan&#39;</span></code></pre></div> -<h2 id="setting-model-defaults">Setting model defaults</h2> +<h2>Setting model defaults</h2> -<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.</p> +<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#39;defaults&#39; in your model declaration.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Person</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> @@ -1492,7 +1490,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> <span class="kd">var</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;child&quot;</span><span class="p">);</span> <span class="c1">// &#39;Ryan&#39;</span></code></pre></div> -<h2 id="manipulating-model-attributes">Manipulating model attributes</h2> +<h2>Manipulating model attributes</h2> <p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> @@ -1516,9 +1514,9 @@ We should setup any useful containers that might be used by our Backbone views.& <p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time. </p> -<h2 id="listening-for-changes-to-the-model">Listening for changes to the model</h2> +<h2>Listening for changes to the model</h2> -<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our “person” changes we will alert their new name.</p> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our &quot;person&quot; changes we will alert their new name.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Person</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> @@ -1537,9 +1535,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Stewie Griffin&#39;</span><span class="p">});</span> <span class="c1">// This triggers a change and will alert()</span></code></pre></div> -<p>So we can bind the change listener to individual attributes or if we like simply ‘<em>this.on(“change”, function(model){});</em>’ to listen for changes to all attributes of the model.</p> +<p>So we can bind the change listener to individual attributes or if we like simply &#39;<em>this.on(&quot;change&quot;, function(model){});</em>&#39; to listen for changes to all attributes of the model.</p> -<h2 id="interacting-with-the-server">Interacting with the server</h2> +<h2>Interacting with the server</h2> <p>Models are used to represent data from your server and actions you perform on them will be translated to RESTful operations.</p> @@ -1560,7 +1558,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="p">});</span></code></pre></div> -<h3 id="creating-a-new-model">Creating a new model</h3> +<h3>Creating a new model</h3> <p>If we wish to create a new user on the server then we will instantiate a new UserModel and call <code>save</code>. If the <code>id</code> attribute of the model is <code>null</code>, Backbone.js will send a POST request to the urlRoot of the server. </p> @@ -1588,13 +1586,13 @@ We should setup any useful containers that might be used by our Backbone views.& <p>Our table should now have the values</p> -<p>1, ‘Thomas’, ‘thomasalwyndavis@gmail.com’</p> +<p>1, &#39;Thomas&#39;, &#39;thomasalwyndavis@gmail.com&#39;</p> -<h3 id="getting-a-model">Getting a model</h3> +<h3>Getting a model</h3> <p>Now that we have saved a new user model, we can retrieve it from the server. We know that the <code>id</code> is 1 from the above example.</p> -<p>If we instantiate a model with an <code>id</code>, Backbone.js will automatically perform a get request to the urlRoot + ‘/id’ (conforming to RESTful conventions)</p> +<p>If we instantiate a model with an <code>id</code>, Backbone.js will automatically perform a get request to the urlRoot + &#39;/id&#39; (conforming to RESTful conventions)</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Here we have set the `id` of the model</span> <span class="kd">var</span> <span class="nx">user</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Usermodel</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="mi">1</span><span class="p">});</span> @@ -1607,7 +1605,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="p">}</span> <span class="p">})</span></code></pre></div> -<h3 id="updating-a-model">Updating a model</h3> +<h3>Updating a model</h3> <p>Now that we have a model that exist on the server we can perform an update using a PUT request. We will use the <code>save</code> api call which is intelligent and will send a PUT request instead of a POST request if an <code>id</code> is present(conforming to RESTful conventions)</p> @@ -1628,7 +1626,7 @@ We will use the <code>save</code> api call which is intelligent and <span class="p">}</span> <span class="p">});</span></code></pre></div> -<h3 id="deleting-a-model">Deleting a model</h3> +<h3>Deleting a model</h3> <p>When a model has an <code>id</code> we know that it exist on the server, so if we wish to remove it from the server we can call <code>destroy</code>. <code>destroy</code> will fire off a DELETE /user/id (conforming to RESTful conventions).</p> @@ -1647,7 +1645,7 @@ We will use the <code>save</code> api call which is intelligent and <span class="p">}</span> <span class="p">});</span></code></pre></div> -<h3 id="tips-and-tricks">Tips and Tricks</h3> +<h3>Tips and Tricks</h3> <p><em>Get all the current attributes</em></p> @@ -1685,10 +1683,10 @@ We will use the <code>save</code> api call which is intelligent and <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Dr Manhatten&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> <span class="c1">// God have mercy on our souls</span></code></pre></div> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> +<li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> </ul> </content> </entry> @@ -1698,11 +1696,11 @@ We will use the <code>save</code> api call which is intelligent and <link href="http://backbonetutorials.com/what-is-a-view"/> <updated>2011-01-28T00:00:00+10:00</updated> <id>http://backbonetutorials.com/what-is-a-view</id> - <content type="html"><h1 id="what-is-a-view">What is a view?</h1> + <content type="html"><h1>What is a view?</h1> -<p>Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically <a href="http://documentcloud.github.com/underscore/#template">Underscore.js’s _.template</a>.</p> +<p>Backbone views are used to reflect what your applications&#39; data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically <a href="http://documentcloud.github.com/underscore/#template">Underscore.js&#39;s _.template</a>.</p> -<p>We will be using <a href="http://jquery.com/">jQuery 1.8.2</a> as our DOM manipulator. It’s possible to use other libraries such as <a href="http://mootools.net/">MooTools</a> or <a href="http://sizzlejs.com/">Sizzle</a>, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.</p> +<p>We will be using <a href="http://jquery.com/">jQuery 1.8.2</a> as our DOM manipulator. It&#39;s possible to use other libraries such as <a href="http://mootools.net/">MooTools</a> or <a href="http://sizzlejs.com/">Sizzle</a>, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.</p> <p>For the purposes of this demonstration, we will be implementing a search box. <a href="http://jsfiddle.net/tBS4X/1/">A live example</a> can be found on jsFiddle.</p> @@ -1716,31 +1714,31 @@ We will use the <code>save</code> api call which is intelligent and <span class="c1">// Consider it the constructor of the class.</span> <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">();</span></code></pre></div> -<h2 id="the-el-property">The “el” property</h2> +<h2>The &quot;el&quot; property</h2> -<p>The “el” property references the DOM object created in the browser. Every Backbone.js view has an “el” property, and if it not defined, Backbone.js will construct its own, which is an empty div element.</p> +<p>The &quot;el&quot; property references the DOM object created in the browser. Every Backbone.js view has an &quot;el&quot; property, and if it not defined, Backbone.js will construct its own, which is an empty div element.</p> -<p>Let us set our view’s “el” property to div#search_container, effectively making Backbone.View the owner of the DOM element.</p> +<p>Let us set our view&#39;s &quot;el&quot; property to div#search_container, effectively making Backbone.View the owner of the DOM element.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> - <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Alerts suck.&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> + <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Alerts suck.&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span></code></pre></div> <p><em>Note: Keep in mind that this binds the container element. Any events we trigger must be in this element.</em></p> -<h2 id="loading-a-template">Loading a template</h2> +<h2>Loading a template</h2> -<p>Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to <a href="http://documentcloud.github.com/underscore/">Underscore.js’s documentation</a> for more information.</p> +<p>Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to <a href="http://documentcloud.github.com/underscore/">Underscore.js&#39;s documentation</a> for more information.</p> -<p>Let us implement a “render()” function and call it when the view is initialized. The “render()” function will load our template into the view’s “el” property using jQuery.</p> +<p>Let us implement a &quot;render()&quot; function and call it when the view is initialized. The &quot;render()&quot; function will load our template into the view&#39;s &quot;el&quot; property using jQuery.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;</span><span class="nx">Search</span><span class="o">&lt;</span><span class="err">/label&gt;</span> @@ -1751,26 +1749,26 @@ We will use the <code>save</code> api call which is intelligent and <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> - <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> - <span class="p">},</span> - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="c1">// Compile the template using underscore</span> - <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> - <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> - <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> + <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span></code></pre></div> <p><em>Tip: Place all your templates in a file and serve them from a CDN. This ensures your users will always have your application cached.</em></p> -<h2 id="listening-for-events">Listening for events</h2> +<h2>Listening for events</h2> -<p>To attach a listener to our view, we use the “events” attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the “el” property. Let us attach a “click” listener to our button.</p> +<p>To attach a listener to our view, we use the &quot;events&quot; attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the &quot;el&quot; property. Let us attach a &quot;click&quot; listener to our button.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;</span><span class="nx">Search</span><span class="o">&lt;</span><span class="err">/label&gt;</span> @@ -1801,7 +1799,7 @@ We will use the <code>save</code> api call which is intelligent and <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span></code></pre></div> -<h2 id="tips-and-tricks">Tips and Tricks</h2> +<h2>Tips and Tricks</h2> <p><em>Using template variables</em></p> @@ -1815,43 +1813,43 @@ We will use the <code>save</code> api call which is intelligent and <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> - <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> - <span class="p">},</span> - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="c1">//Pass variables in using Underscore.js Template</span> - <span class="kd">var</span> <span class="nx">variables</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">search_label</span><span class="o">:</span> <span class="s2">&quot;My Search&quot;</span> <span class="p">};</span> - <span class="c1">// Compile the template using underscore</span> - <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="nx">variables</span> <span class="p">);</span> - <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> - <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> - <span class="p">},</span> - <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> - <span class="s2">&quot;click input[type=button]&quot;</span><span class="o">:</span> <span class="s2">&quot;doSearch&quot;</span> - <span class="p">},</span> - <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> - <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> - <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Search for &quot;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_input&quot;</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> + <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">//Pass variables in using Underscore.js Template</span> + <span class="kd">var</span> <span class="nx">variables</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">search_label</span><span class="o">:</span> <span class="s2">&quot;My Search&quot;</span> <span class="p">};</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="nx">variables</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;click input[type=button]&quot;</span><span class="o">:</span> <span class="s2">&quot;doSearch&quot;</span> + <span class="p">},</span> + <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> + <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Search for &quot;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_input&quot;</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span></code></pre></div> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google API</a></li> - <li><a href="http://jsfiddle.net/thomas/C9wew/4/">This examples exact code on jsfiddle.net</a></li> - <li><a href="http://jsfiddle.net/thomas/dKK9Y/6/">Another semi-complete example on jsFiddle</a></li> +<li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google API</a></li> +<li><a href="http://jsfiddle.net/thomas/C9wew/4/">This examples exact code on jsfiddle.net</a></li> +<li><a href="http://jsfiddle.net/thomas/dKK9Y/6/">Another semi-complete example on jsFiddle</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/zaeleus">Michael Macias</a></li> - <li><a href="https://github.com/lawnday">Alex Lande</a></li> +<li><a href="https://github.com/zaeleus">Michael Macias</a></li> +<li><a href="https://github.com/lawnday">Alex Lande</a></li> </ul> </content> </entry> @@ -1861,13 +1859,13 @@ We will use the <code>save</code> api call which is intelligent and <link href="http://backbonetutorials.com/what-is-a-router"/> <updated>2011-01-27T00:00:00+10:00</updated> <id>http://backbonetutorials.com/what-is-a-router</id> - <content type="html"><h1 id="what-is-a-router">What is a router?</h1> + <content type="html"><h1>What is a router?</h1> -<p>Backbone routers are used for routing your applications URL’s when using hash tags(#). In the traditional MVC sense they don’t necessarily fit the semantics and if you have read “<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>” it will elaborate on this point. Though a Backbone “router” is still very useful for any application/feature that needs URL routing/history capabilities. </p> +<p>Backbone routers are used for routing your applications URL&#39;s when using hash tags(#). In the traditional MVC sense they don&#39;t necessarily fit the semantics and if you have read &quot;<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>&quot; it will elaborate on this point. Though a Backbone &quot;router&quot; is still very useful for any application/feature that needs URL routing/history capabilities. </p> <p>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.</p> -<p>Also note that routes interpret 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)</p> +<p>Also note that routes interpret anything after &quot;#&quot; tag in the URL. All links in your application should target &quot;#/action&quot; or &quot;#action&quot;. (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help)</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script&gt;</span> <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> @@ -1893,9 +1891,9 @@ We will use the <code>save</code> api call which is intelligent and <p><em>Notice the change in the url</em></p> -<h2 id="dynamic-routing">Dynamic Routing</h2> +<h2>Dynamic Routing</h2> -<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.</p> +<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 &quot;http://example.com/#/posts/12&quot;. Once this route was activated you would want to access the id given in the URL string. This example is implemented below.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script&gt;</span> <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> @@ -1924,13 +1922,13 @@ We will use the <code>save</code> api call which is intelligent and <p><em>Notice the change in the url</em></p> -<h2 id="dynamic-routing-cont-params-and-splats">Dynamic Routing Cont. “:params” and “*splats”</h2> +<h2>Dynamic Routing Cont. &quot;:params&quot; and &quot;*splats&quot;</h2> -<p>Backbone uses two styles of variables when implementing routes. First there are “:params” which match any URL components between slashes. Then there are “<em>splats” which match any number of URL components. Note that due to the nature of a “</em>splat” it will always be the last variable in your URL as it will match any and all components.</p> +<p>Backbone uses two styles of variables when implementing routes. First there are &quot;:params&quot; which match any URL components between slashes. Then there are &quot;<em>splats&quot; which match any number of URL components. Note that due to the nature of a &quot;</em>splat&quot; it will always be the last variable in your URL as it will match any and all components.</p> -<p>Any “*splats” or “:params” in route definitions are passed as arguments (in respective order) to the associated function. A route defined as “/:route/:action” will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)</p> +<p>Any &quot;*splats&quot; or &quot;:params&quot; in route definitions are passed as arguments (in respective order) to the associated function. A route defined as &quot;/:route/:action&quot; will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)</p> -<p>Here are some examples of using “:params” and “*splats”</p> +<p>Here are some examples of using &quot;:params&quot; and &quot;*splats&quot;</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> @@ -1955,21 +1953,22 @@ We will use the <code>save</code> api call which is intelligent and <span class="nx">alert</span><span class="p">(</span><span class="nx">route</span> <span class="o">+</span> <span class="s2">&quot;_&quot;</span> <span class="o">+</span> <span class="nx">action</span><span class="p">);</span> <span class="c1">// dashboard_graph </span> <span class="p">});</span></code></pre></div> -<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”. Also check out <a href="http://seo.apiengine.io">Seo Server</a></p> +<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 &quot;google seo hashbangs&quot;. Also check out <a href="http://seo.apiengine.io">Seo Server</a></p> <p>Remember to do a pull request for any errors you come across.</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> + <ul> - <li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li> - <li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li> +<li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li> +<li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="http://schistad.info">Herman Schistad</a> - (Backbone 0.5 rename from Controller to Router)</li> - <li><a href="http://paulirish.com">Paul Irish</a></li> +<li><a href="http://schistad.info">Herman Schistad</a> - (Backbone 0.5 rename from Controller to Router)</li> +<li><a href="http://paulirish.com">Paul Irish</a></li> </ul> </content> </entry> diff --git a/_site/chat.html b/_site/chat.html index 4acbcf2..4c14125 100644 --- a/_site/chat.html +++ b/_site/chat.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,28 +54,29 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> <p> <p>#cdnjs on irc.freenode.net, don’t forget to follow me on <a href="http://twitter.com/neutralthoughts" target="_blank">twitter</a>.</p><br /> <iframe src="http://webchat.freenode.net/?channels=cdnjs" width="100%" height="500px"></iframe></p> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/contact.html b/_site/contact.html index f960282..6eacb11 100644 --- a/_site/contact.html +++ b/_site/contact.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,27 +54,28 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> <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> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/contribute.html b/_site/contribute.html index ad8fff2..e1113cf 100644 --- a/_site/contribute.html +++ b/_site/contribute.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,28 +54,29 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> <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 are encouraged and will hopefully breed innovation for javascript applications.</p> <p>All contributions will be well acknowledged on the site.</p> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/cross-domain-sessions/index.html b/_site/cross-domain-sessions/index.html index ab45b04..28a1073 100644 --- a/_site/cross-domain-sessions/index.html +++ b/_site/cross-domain-sessions/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,33 +54,28 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - - - -<div id="post"> -<h1 id="cross-domain-backbonejs-with-sessions-using-cors">Cross-domain Backbone.js with sessions using CORS</h1> + <div id="post"> +<h1>Cross-domain Backbone.js with sessions using CORS</h1> <p>** This tutorial is a proof of concept and needs to be checked for security flaws **</p> @@ -90,35 +84,35 @@ <p>On a personal note, I consider this development practice highly desirable and encourage others to think of the possible benefits but the security still needs to be proved.</p> <blockquote> - <p>Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries. - <a href="http://enable-cors.org/">enable-cors.org</a></p> +<p>Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries. - <a href="http://enable-cors.org/">enable-cors.org</a></p> </blockquote> <p><strong>Some benefits include</strong></p> <ul> - <li>The client and back end exist independently regardless of where they are each hosted and built.</li> - <li>Due to the separation of concerns, testing now becomes easier and more controlled.</li> - <li>Develop only one API on the server, your front-end could be outsourced or built by a in-house team.</li> - <li>As a front-end developer you can host the client anywhere.</li> - <li>This separation enforces that the API be built robustly, documented, collaboratively and versioned.</li> +<li>The client and back end exist independently regardless of where they are each hosted and built.</li> +<li>Due to the separation of concerns, testing now becomes easier and more controlled.</li> +<li>Develop only one API on the server, your front-end could be outsourced or built by a in-house team.</li> +<li>As a front-end developer you can host the client anywhere.</li> +<li>This separation enforces that the API be built robustly, documented, collaboratively and versioned.</li> </ul> <p>** Cons of this tutorial **</p> <ul> - <li>This tutorial doesn’t explain how to perform this with cross browser support. CORS headers aren’t supported by Opera and IE 6/7. Though it is do-able using <a href="http://easyxdm.net/wp/">easyXDM</a></li> - <li>Security is somewhat addressed but maybe a more thorough security expert can chime in.</li> +<li>This tutorial doesn't explain how to perform this with cross browser support. CORS headers aren't supported by Opera and IE 6/7. Though it is do-able using <a href="http://easyxdm.net/wp/">easyXDM</a></li> +<li>Security is somewhat addressed but maybe a more thorough security expert can chime in.</li> </ul> -<h2 id="security">Security</h2> +<h2>Security</h2> <ul> - <li>Don’t allow GET request to change data, only retrieve.</li> - <li>Whitelist your allowed domains (see <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/cross-domain/server.js">server.js</a>)</li> - <li>Protect again <a href="http://blog.opensecurityresearch.com/2012/02/json-csrf-with-parameter-padding.html">JSON padding</a></li> +<li>Don't allow GET request to change data, only retrieve.</li> +<li>Whitelist your allowed domains (see <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/cross-domain/server.js">server.js</a>)</li> +<li>Protect again <a href="http://blog.opensecurityresearch.com/2012/02/json-csrf-with-parameter-padding.html">JSON padding</a></li> </ul> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>To easily understand this tutorial you should jump straight into the example code base.</p> @@ -130,7 +124,7 @@ <p>This tutorial focuses on building a flexible Session model to control session state in your application.</p> -<h2 id="checking-session-state-at-first-load">Checking session state at first load</h2> +<h2>Checking session state at first load</h2> <p>Before starting any routes, we should really know whether the user is authenticated. This will allow us to load the appropriate views. We will simply wrap our <code>Backbone.history.start</code> in a callback that executes after <code>Session.getAuth</code> has checked the server. We will jump into our Session model next.</p> @@ -164,15 +158,15 @@ <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> <span class="p">})</span> <span class="p">}</span> - <span class="p">});</span> + <span class="p">});</span> <span class="k">return</span> <span class="nx">AppView</span><span class="p">;</span> <span class="p">});</span></code></pre></div> <p><em>Note: We have used jQuery <code>ajaxPrefilter</code> to hook into all AJAX requests before they are executed. This is where we specify what server we want the application to hit.</em></p> -<h2 id="an-example-session-model">An example Session model</h2> +<h2>An example Session model</h2> -<p>This is a very light weight Session model which handles most situations. Read through the code and comments below. The model simply has a login, logout and check function. Again we have hooked into jQuery <code>ajaxPrefilter</code> to allow for csrf tokens and also telling jQuery to send cookies with the <code>withCredentials</code> property. The model relies heavily on it’s <code>auth</code> property. Throughout your application, each view can simply bind to <code>change:auth</code> on the Session model and react accordingly. Because we return this AMD module instantiated using the new keyword, then it will keep state throughout the page. (This may not be best practice but it’s highly convenient)</p> +<p>This is a very light weight Session model which handles most situations. Read through the code and comments below. The model simply has a login, logout and check function. Again we have hooked into jQuery <code>ajaxPrefilter</code> to allow for csrf tokens and also telling jQuery to send cookies with the <code>withCredentials</code> property. The model relies heavily on it's <code>auth</code> property. Throughout your application, each view can simply bind to <code>change:auth</code> on the Session model and react accordingly. Because we return this AMD module instantiated using the new keyword, then it will keep state throughout the page. (This may not be best practice but it's highly convenient)</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// views/app.js</span> <span class="nx">define</span><span class="p">([</span> @@ -232,9 +226,9 @@ <p><em>Note: This session model is missing one useful feature. If a user looses auth when navigating your application then the application should set {auth: false} on this model. To do this, in the <code>ajaxPrefilter</code> edit outgoing <code>success</code> functions to check if the server response was {auth: false} and then call the original <code>success()</code> function.</em></p> -<h2 id="hooking-up-views-to-listen-to-changes-in-auth">Hooking up views to listen to changes in <code>auth</code></h2> +<h2>Hooking up views to listen to changes in <code>auth</code></h2> -<p>Now that we have a Session model, let’s hook up our <code>login/logout</code> view to listen to changes in <code>auth</code>. When creating the view we use <code>on</code> to bind a listener to the <code>auth</code> attribute of our model. Everytime it changes we will re-render the view which will conditionally load a template depending on the value of <code>Session.get('auth')</code>.</p> +<p>Now that we have a Session model, let's hook up our <code>login/logout</code> view to listen to changes in <code>auth</code>. When creating the view we use <code>on</code> to bind a listener to the <code>auth</code> attribute of our model. Everytime it changes we will re-render the view which will conditionally load a template depending on the value of <code>Session.get('auth')</code>.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// models/session.js</span> <span class="nx">define</span><span class="p">([</span> @@ -303,46 +297,46 @@ <p>This wraps up setting up the client, there are some notable points to make sure this technique works.</p> <ul> - <li>You must use <code>withCredentials</code> supplied by jQuery - session.js</li> - <li>You must send your request with csrf tokens for security - session.js</li> - <li>You should wrap your applications entry pointer (router in this example) in a check auth function - app.js</li> - <li>You must point your application at the right server - app.js</li> +<li>You must use <code>withCredentials</code> supplied by jQuery - session.js</li> +<li>You must send your request with csrf tokens for security - session.js</li> +<li>You should wrap your applications entry pointer (router in this example) in a check auth function - app.js</li> +<li>You must point your application at the right server - app.js</li> </ul> -<h2 id="building-a-compatible-server">Building a compatible server</h2> +<h2>Building a compatible server</h2> <p>This tutorial uses node.js, express.js and a modified csrf.js library. An example server.js file exist in the <code>examples/cross-domain</code> folder. When inside the folder simply type <code>npm install -d</code> to install the dependencies and then <code>node server.js</code> to start the server. Again, make sure your <code>app.js</code> points at the correct server.</p> <p>The server has to do a few things;</p> <ul> - <li>Allow CORS request</li> - <li>Implement csrf protection</li> - <li>Allow jQuery to send credentials</li> - <li>Set a whitelist of allowed domains</li> - <li>Configure the correct response headers</li> +<li>Allow CORS request</li> +<li>Implement csrf protection</li> +<li>Allow jQuery to send credentials</li> +<li>Set a whitelist of allowed domains</li> +<li>Configure the correct response headers</li> </ul> <p>To save you sometime here are some gotchas;</p> <ul> - <li>When sending <code>withCredentials</code> you must set correct response header <code>Access-Control-Allow-Credentials: true</code>. Also as a security policy browsers do not allow <code>Access-Control-Allow-Origin</code> to be set to <code>*</code>. So the origin of the request has to be known and trusted, so in the example below we use an of white listed domains.</li> - <li>jQuery ajax will trigger the browser to send these headers to enforce security <code>origin, x-requested-with, accept</code> so our server must allow them.</li> - <li>The browser might send out a <code>pre-flight</code> request to verify that it can talk to the server. The server must return <code>200 OK</code> on these <code>pre-flight</code> request.</li> +<li>When sending <code>withCredentials</code> you must set correct response header <code>Access-Control-Allow-Credentials: true</code>. Also as a security policy browsers do not allow <code>Access-Control-Allow-Origin</code> to be set to <code>*</code>. So the origin of the request has to be known and trusted, so in the example below we use an of white listed domains.</li> +<li>jQuery ajax will trigger the browser to send these headers to enforce security <code>origin, x-requested-with, accept</code> so our server must allow them.</li> +<li>The browser might send out a <code>pre-flight</code> request to verify that it can talk to the server. The server must return <code>200 OK</code> on these <code>pre-flight</code> request.</li> </ul> <p>Be sure to read this Mozilla <a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/">documentation</a> on the above.</p> -<h2 id="example-node-server">Example node server</h2> +<h2>Example node server</h2> <p>This server below implements everything we have talked about so far. It should be relatively easy to see how would translate into other frameworks and languages. <code>app.configure</code> runs the specified libraries against every request. We have told the server that on each request it should check the csrf token and check if the origin domain is white-listed. If so we edit each request to contain the appropriate headers.</p> <p>This server has 3 endpoints, that are pseudo-restful;</p> <ul> - <li>POST /session - Login - Sets the session username and returns a csrf token for the user to use</li> - <li>DELETE /session - Logout - Destroys the session and regenerates a new csrf token if the user wants to re-login</li> - <li>GET /session - Checks Auth - Simply returns if auth is true or false, if true then also returns some session details</li> +<li>POST /session - Login - Sets the session username and returns a csrf token for the user to use</li> +<li>DELETE /session - Logout - Destroys the session and regenerates a new csrf token if the user wants to re-login</li> +<li>GET /session - Checks Auth - Simply returns if auth is true or false, if true then also returns some session details</li> </ul> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'express'</span><span class="p">);</span> @@ -413,9 +407,9 @@ <span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">8000</span><span class="p">);</span></code></pre></div> -<p><em>Note: I wrote a custom csrf module for this which can be found in the example directory. It’s based of connects and uses the <code>crypto</code> library. I didn’t spend much time on it but other traditional csrf modules won’t work because they aren’t exactly built for this implementation technique.</em></p> +<p><em>Note: I wrote a custom csrf module for this which can be found in the example directory. It's based of connects and uses the <code>crypto</code> library. I didn't spend much time on it but other traditional csrf modules won't work because they aren't exactly built for this implementation technique.</em></p> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p>This approach really hammers in the need for a well documented and designed API. A powerful API will let you do application iterations with ease.</p> @@ -429,33 +423,34 @@ <p><a href="http://backbonetutorials.com/examples/cross-domain/">Example Demo</a></p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/">cross-site xmlhttprequest with CORS</a></li> - <li><a href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing</a></li> - <li><a href="http://www.kendoui.com/blogs/teamblog/posts/11-10-04/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> +<li><a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/">cross-site xmlhttprequest with CORS</a></li> +<li><a href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing</a></li> +<li><a href="http://www.kendoui.com/blogs/teamblog/posts/11-10-04/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> </ul> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -468,9 +463,7 @@ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/css/style.css b/_site/css/style.css index 3dd5ca0..815044a 100644 --- a/_site/css/style.css +++ b/_site/css/style.css @@ -18,4 +18,8 @@ body { color: #333; font-size: 14px !important; } -*/
\ No newline at end of file +*/ + +pre { + background-color: #49483e !important; +}
\ No newline at end of file diff --git a/_site/css/syntax.css b/_site/css/syntax.css index 2774b76..0e24439 100644 --- a/_site/css/syntax.css +++ b/_site/css/syntax.css @@ -1,60 +1,59 @@ -.highlight { background: #ffffff; } -.highlight .c { color: #999988; font-style: italic } /* Comment */ -.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { font-weight: bold } /* Keyword */ -.highlight .o { font-weight: bold } /* Operator */ -.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ -.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #aa0000 } /* Generic.Error */ -.highlight .gh { color: #999999 } /* Generic.Heading */ -.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.highlight .go { color: #888888 } /* Generic.Output */ -.highlight .gp { color: #555555 } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ -.highlight .gt { color: #aa0000 } /* Generic.Traceback */ -.highlight .kc { font-weight: bold } /* Keyword.Constant */ -.highlight .kd { font-weight: bold } /* Keyword.Declaration */ -.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #d14 } /* Literal.String */ -.highlight .na { color: #008080 } /* Name.Attribute */ -.highlight .nb { color: #0086B3 } /* Name.Builtin */ -.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ -.highlight .no { color: #008080 } /* Name.Constant */ -.highlight .ni { color: #800080 } /* Name.Entity */ -.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ -.highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #000080 } /* Name.Tag */ -.highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #009999 } /* Literal.Number.Float */ -.highlight .mh { color: #009999 } /* Literal.Number.Hex */ -.highlight .mi { color: #009999 } /* Literal.Number.Integer */ -.highlight .mo { color: #009999 } /* Literal.Number.Oct */ -.highlight .sb { color: #d14 } /* Literal.String.Backtick */ -.highlight .sc { color: #d14 } /* Literal.String.Char */ -.highlight .sd { color: #d14 } /* Literal.String.Doc */ -.highlight .s2 { color: #d14 } /* Literal.String.Double */ -.highlight .se { color: #d14 } /* Literal.String.Escape */ -.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ -.highlight .si { color: #d14 } /* Literal.String.Interpol */ -.highlight .sx { color: #d14 } /* Literal.String.Other */ -.highlight .sr { color: #009926 } /* Literal.String.Regex */ -.highlight .s1 { color: #d14 } /* Literal.String.Single */ -.highlight .ss { color: #990073 } /* Literal.String.Symbol */ -.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #008080 } /* Name.Variable.Class */ -.highlight .vg { color: #008080 } /* Name.Variable.Global */ -.highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ +.highlight { background-color: #49483e } +.c { color: #75715e } /* Comment */ +.err { color: #960050; background-color: #1e0010 } /* Error */ +.k { color: #66d9ef } /* Keyword */ +.l { color: #ae81ff } /* Literal */ +.n { color: #f8f8f2 } /* Name */ +.o { color: #f92672 } /* Operator */ +.p { color: #f8f8f2 } /* Punctuation */ +.cm { color: #75715e } /* Comment.Multiline */ +.cp { color: #75715e } /* Comment.Preproc */ +.c1 { color: #75715e } /* Comment.Single */ +.cs { color: #75715e } /* Comment.Special */ +.ge { font-style: italic } /* Generic.Emph */ +.gs { font-weight: bold } /* Generic.Strong */ +.kc { color: #66d9ef } /* Keyword.Constant */ +.kd { color: #66d9ef } /* Keyword.Declaration */ +.kn { color: #f92672 } /* Keyword.Namespace */ +.kp { color: #66d9ef } /* Keyword.Pseudo */ +.kr { color: #66d9ef } /* Keyword.Reserved */ +.kt { color: #66d9ef } /* Keyword.Type */ +.ld { color: #e6db74 } /* Literal.Date */ +.m { color: #ae81ff } /* Literal.Number */ +.s { color: #e6db74 } /* Literal.String */ +.na { color: #a6e22e } /* Name.Attribute */ +.nb { color: #f8f8f2 } /* Name.Builtin */ +.nc { color: #a6e22e } /* Name.Class */ +.no { color: #66d9ef } /* Name.Constant */ +.nd { color: #a6e22e } /* Name.Decorator */ +.ni { color: #f8f8f2 } /* Name.Entity */ +.ne { color: #a6e22e } /* Name.Exception */ +.nf { color: #a6e22e } /* Name.Function */ +.nl { color: #f8f8f2 } /* Name.Label */ +.nn { color: #f8f8f2 } /* Name.Namespace */ +.nx { color: #a6e22e } /* Name.Other */ +.py { color: #f8f8f2 } /* Name.Property */ +.nt { color: #f92672 } /* Name.Tag */ +.nv { color: #f8f8f2 } /* Name.Variable */ +.ow { color: #f92672 } /* Operator.Word */ +.w { color: #f8f8f2 } /* Text.Whitespace */ +.mf { color: #ae81ff } /* Literal.Number.Float */ +.mh { color: #ae81ff } /* Literal.Number.Hex */ +.mi { color: #ae81ff } /* Literal.Number.Integer */ +.mo { color: #ae81ff } /* Literal.Number.Oct */ +.sb { color: #e6db74 } /* Literal.String.Backtick */ +.sc { color: #e6db74 } /* Literal.String.Char */ +.sd { color: #e6db74 } /* Literal.String.Doc */ +.s2 { color: #e6db74 } /* Literal.String.Double */ +.se { color: #ae81ff } /* Literal.String.Escape */ +.sh { color: #e6db74 } /* Literal.String.Heredoc */ +.si { color: #e6db74 } /* Literal.String.Interpol */ +.sx { color: #e6db74 } /* Literal.String.Other */ +.sr { color: #e6db74 } /* Literal.String.Regex */ +.s1 { color: #e6db74 } /* Literal.String.Single */ +.ss { color: #e6db74 } /* Literal.String.Symbol */ +.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ +.vc { color: #f8f8f2 } /* Name.Variable.Class */ +.vg { color: #f8f8f2 } /* Name.Variable.Global */ +.vi { color: #f8f8f2 } /* Name.Variable.Instance */ +.il { color: #ae81ff } /* Literal.Number.Integer.Long */
\ No newline at end of file diff --git a/_site/examples.html b/_site/examples.html index 0ed5c3e..48c3bf4 100644 --- a/_site/examples.html +++ b/_site/examples.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,31 +54,32 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> <h2>Examples of sites using Backbone.js</h2> <h3><a href="http://app.protosal.com">Protosal.com</a></h3> <p>Generate proposals for your clients with ease using predefined templates. Track how often your proposals get accepted or declined and who your best client are.</p> <p><em>CouchDb and Node.js Backend</em></p> <h3><a href="http://getflow.com">GetFlow.com</a></h3> <p>Flow is a task management app that makes working with your team a breeze. You can see the internals under window.Flow.</p> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/index.html b/_site/index.html index 3e74f25..16f6d92 100644 --- a/_site/index.html +++ b/_site/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,26 +54,28 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> <div class="row" > - <div class="col-lg-4"> + <div class="col-lg-6"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Beginners</h3> @@ -116,7 +117,7 @@ </div> </div> </div> - <div class="col-lg-4"> + <div class="col-lg-6"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Intermediate</h3> @@ -160,14 +161,6 @@ </div> </div> </div> - <div class="col-lg-4"> - <div class="panel panel-danger"> - <div class="panel-heading"> - <h3 class="panel-title">Advanced</h3> - </div> - <p>Coming soon...</p> - </div> - </div> </div> @@ -183,7 +176,7 @@ <div class="row" > <div class="col-lg-6"> - <div class="panel"> + <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">External Tutorials</h3> </div> @@ -196,17 +189,15 @@ </div> </div> <div class="col-lg-6"> - <div class="panel"> + <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Example Apps</h3> </div> <div class="list-group"> <a class="list-group-item" href="http://www.dronehire.org">DroneHire.org - 100% built with Backbone.js</a> <a class="list-group-item" href="http://kaleistyleguide.com/">Kalei - A living CSS styleguide</a> - <a class="list-group-item" href="http://apiengine.io">ApiEngine.io - Collaborativly build RESTful API's.</a> <a class="list-group-item" href="https://github.com/alessioalex/ClientManager" alt="Sample application built with Backbone, RequireJS, Twitter Bootstrap on the client and Node.js (Express.js, Mongoose) on the server.">ClientManager - Sample application</a> <a class="list-group-item" href="http://www.clevertim.com">Clevertim CRM - A simple CRM</a> - <a class="list-group-item" href="http://forum.dronehire.org">Drone hire forum</a> </div> </div> </div> @@ -230,7 +221,6 @@ </ul> --> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/infinite-scrolling/index.html b/_site/infinite-scrolling/index.html index 1b61fde..91655c9 100644 --- a/_site/infinite-scrolling/index.html +++ b/_site/infinite-scrolling/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,35 +54,30 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - + <div id="post"> +<h1>Lightweight Infinite Scrolling using Twitter API</h1> - -<div id="post"> -<h1 id="lightweight-infinite-scrolling-using-twitter-api">Lightweight Infinite Scrolling using Twitter API</h1> - -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>In this example we are going to build a widget that pulls in tweets and when the user scrolls to the bottom of the widget Backbone.js will re-sync with the server to bring down the next page of results.</p> @@ -93,13 +87,13 @@ <p><em>Note: This tutorial will use <a href="http://backbonetutorials.com/organizing-backbone-using-modules">AMD</a> for modularity.</em></p> -<h2 id="the-twitter-collection">The Twitter Collection</h2> +<h2>The Twitter Collection</h2> -<p>Twitter offers a jsonp API for browsing tweets. The first thing to note is that we have to append ‘&callback?’ to allow cross domain Ajax calls which is a feature of <a href="http://en.wikipedia.org/wiki/JSONP">jsonp</a>.</p> +<p>Twitter offers a jsonp API for browsing tweets. The first thing to note is that we have to append '&callback?' to allow cross domain Ajax calls which is a feature of <a href="http://en.wikipedia.org/wiki/JSONP">jsonp</a>.</p> -<p>Using the ‘q’ and ‘page’ query parameters we can find the results we are after. In the collection definition below we have set some defaults which can be overridden at any point.</p> +<p>Using the 'q' and 'page' query parameters we can find the results we are after. In the collection definition below we have set some defaults which can be overridden at any point.</p> -<p>Twitter’s search API actually returns a whole bunch of meta information alongside the results. Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection. </p> +<p>Twitter's search API actually returns a whole bunch of meta information alongside the results. Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection. </p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// collections/twitter.js</span> <span class="nx">define</span><span class="p">([</span> @@ -130,9 +124,9 @@ <span class="k">return</span> <span class="nx">resp</span><span class="p">.</span><span class="nx">results</span><span class="p">;</span> <span class="p">},</span></code></pre></div> -<h2 id="setting-up-the-view">Setting up the View</h2> +<h2>Setting up the View</h2> -<p>The first thing to do is to load our Twitter collection and template into the widget module. We should attach our collection to our view in our <code>initialize</code> function. <code>loadResults</code> will be responsible for calling fetch on our Twitter collection. On success we will append the latest results to our widget using our template. Our Backbone.js <code>events</code> will listen for <code>scroll</code> on the current <code>el</code> of the view which is ‘.twitter-widget’. If the current <code>scrollTop</code> is at the bottom then we simply increment the Twitter collections current page property and call <code>loadResults</code> again.</p> +<p>The first thing to do is to load our Twitter collection and template into the widget module. We should attach our collection to our view in our <code>initialize</code> function. <code>loadResults</code> will be responsible for calling fetch on our Twitter collection. On success we will append the latest results to our widget using our template. Our Backbone.js <code>events</code> will listen for <code>scroll</code> on the current <code>el</code> of the view which is '.twitter-widget'. If the current <code>scrollTop</code> is at the bottom then we simply increment the Twitter collections current page property and call <code>loadResults</code> again.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// views/twitter/widget.js</span> <span class="nx">define</span><span class="p">([</span> @@ -185,9 +179,9 @@ <p><em>Note: <code>triggerPoint</code> will allow you to set an offset where the user has to scroll to before loading the next page</em></p> -<h2 id="the-widget-template">The widget template</h2> +<h2>The widget template</h2> -<p>Our view above passes into our underscore template the variable tweets which we can simply iterate over with using underscore’s <code>each</code> method.</p> +<p>Our view above passes into our underscore template the variable tweets which we can simply iterate over with using underscore's <code>each</code> method.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c"><!--</span> <span class="nx">templates</span><span class="o">/</span><span class="nx">twitter</span><span class="o">/</span><span class="nx">list</span><span class="p">.</span><span class="nx">html</span> <span class="o">--></span> <span class="o"><</span><span class="nx">ul</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"tweets"</span><span class="o">></span> @@ -198,7 +192,7 @@ <span class="o"><%</span> <span class="p">});</span> <span class="o">%></span> <span class="o"><</span><span class="err">/ul></span></code></pre></div> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p>This is a very lightweight but robust infinite scroll example. There are caveats to using infinite scroll in UI/UX so make sure to only use it when applicable.</p> @@ -207,24 +201,25 @@ <p><a href="https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/infinite-scroll">Example Source</a></p> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -237,9 +232,7 @@ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/lessons.html b/_site/lessons.html index ee8c4d9..f56bda5 100644 --- a/_site/lessons.html +++ b/_site/lessons.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,27 +54,28 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> <p>If you and your team are looking to learn Backbone.js and other front end development skills, I am available to fly in and coach onsite.</p> <p>If you would like to discuss team training with me, send an email directly to thomasalwyndavis@gmail.com</p> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/nodejs-restify-mongodb-mongoose/index.html b/_site/nodejs-restify-mongodb-mongoose/index.html index 8a548da..4ffb789 100644 --- a/_site/nodejs-restify-mongodb-mongoose/index.html +++ b/_site/nodejs-restify-mongodb-mongoose/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,37 +54,32 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - + <div id="post"> +<h1>Simple example - Node.js, Restify, MongoDb and Mongoose</h1> +<p>Before I start, the Backbone.js parts of this tutorial will be using techniques described in "Organizing your application using <a href="http://backbonetutorials.com/organizing-backbone-using-modules/">Modules</a> to construct a simple guestbook.</p> -<div id="post"> -<h1 id="simple-example---nodejs-restify-mongodb-and-mongoose">Simple example - Node.js, Restify, MongoDb and Mongoose</h1> - -<p>Before I start, the Backbone.js parts of this tutorial will be using techniques described in “Organizing your application using <a href="http://backbonetutorials.com/organizing-backbone-using-modules/">Modules</a> to construct a simple guestbook.</p> - -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>To easily understand this tutorial you should jump straight into the example code base.</p> @@ -95,31 +89,31 @@ <p>This tutorial will assist you in saving data(Backbone.js Models) to MongoDb and retrieving a list(Backbone.js Collections) of them back.</p> -<h2 id="the-technologies">The technologies</h2> +<h2>The technologies</h2> <p>This stack is great for rapid prototyping and highly intuitive. Personal note: I love using JavaScript as my only language for the entire application (FrontEnd/BackEnd/API/Database). Restify is still in early development but is essentially just an extension of Express. So for anyone needing more stability you can easily just substitute Express in.</p> -<h3 id="nodejs">Node.js</h3> +<h3>Node.js</h3> -<p>“Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”</p> +<p>"Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices."</p> -<h3 id="restify">Restify</h3> +<h3>Restify</h3> -<p>“Restify is a node.js module built specifically to enable you to build correct REST web services. It borrows heavily from express (intentionally) as that is more or less the de facto API for writing web applications on top of node.js.”</p> +<p>"Restify is a node.js module built specifically to enable you to build correct REST web services. It borrows heavily from express (intentionally) as that is more or less the de facto API for writing web applications on top of node.js."</p> -<h3 id="mongodb">MongoDb</h3> +<h3>MongoDb</h3> -<p>“MongoDB (from “humongous”) is a scalable, high-performance, open source NoSQL database.”</p> +<p>"MongoDB (from "humongous") is a scalable, high-performance, open source NoSQL database."</p> -<h3 id="mongoose">Mongoose</h3> +<h3>Mongoose</h3> -<p>“Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.”</p> +<p>"Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment."</p> -<h2 id="building-the-server">Building the server</h2> +<h2>Building the server</h2> <p>In the example repository there is a server.js example which can be executed by running <code>node server.js</code>. If you use this example in your own applications make sure to update the Backbone.js <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/models/message.js">Model</a> and <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/collections/messages.js">Collection</a> definitions to match your server address.</p> -<h2 id="restify-configuration">Restify configuration</h2> +<h2>Restify configuration</h2> <p>The first thing to do is require the Restify module. Restify will be in control of handling our restful endpoints and returning the appropriate JSON.</p> @@ -129,7 +123,7 @@ <p>Note: bodyParser() takes care of turning your request data into a JavaScript object on the server automatically.</p> -<h2 id="mongodbmongoose-configuration">MongoDb/Mongoose configuration</h2> +<h2>MongoDb/Mongoose configuration</h2> <p>We simply want to require the MongoDb module and pass it a MongoDb authentication URI e.g. mongodb://username:server@mongoserver:10059/somecollection</p> @@ -140,7 +134,7 @@ <span class="nx">db</span> <span class="o">=</span> <span class="nx">mongoose</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">creds</span><span class="p">.</span><span class="nx">mongoose_auth</span><span class="p">),</span> <span class="nx">Schema</span> <span class="o">=</span> <span class="nx">mongoose</span><span class="p">.</span><span class="nx">Schema</span><span class="p">;</span></code></pre></div> -<h2 id="mongoose-schema">Mongoose Schema</h2> +<h2>Mongoose Schema</h2> <p>Mongoose introduces a concept of <a href="http://mongoosejs.com/docs/model-definition.html">model/schema</a> enforcing types which allow for easier input validation etc</p> @@ -155,7 +149,7 @@ <p><em>Note: <code>Message</code> can now be used for all things CRUD related.</em></p> -<h2 id="setting-up-the-routes">Setting up the routes</h2> +<h2>Setting up the routes</h2> <p>Just like in Backbone, Restify allows you to configure different routes and their associated callbacks. In the code below we define two routes. One for saving new messages and one for retrieving all messages. After we have created our function definitions, we attach them to either GET/POST/PUT/DELETE on a particular restful endpoint e.g. GET /messages</p> @@ -196,22 +190,22 @@ <p><em>Note: Again you must remember to change the <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/models/message.js">Model</a> and <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/collections/messages.js">Collection</a> definitions to match your server address.</em></p> -<h2 id="setting-up-the-client-backbonejs">Setting up the client (Backbone.js)</h2> +<h2>Setting up the client (Backbone.js)</h2> -<p>I’ve actually used the latest copy of <a href="http://backboneboilerplate.com">http://backboneboilerplate.com</a> to set up the example page.</p> +<p>I've actually used the latest copy of <a href="http://backboneboilerplate.com">http://backboneboilerplate.com</a> to set up the example page.</p> <p>The important files you will want to check out are;</p> <ul> - <li>views/dashboard/page.js</li> - <li>views/guestbook/form.js</li> - <li>views/guestbook/list.js</li> - <li>models/message.js</li> - <li>collections/messages.js</li> - <li>templates/guestbook/</li> +<li>views/dashboard/page.js</li> +<li>views/guestbook/form.js</li> +<li>views/guestbook/list.js</li> +<li>models/message.js</li> +<li>collections/messages.js</li> +<li>templates/guestbook/</li> </ul> -<h2 id="saving-a-message">Saving a message</h2> +<h2>Saving a message</h2> <p>First of all we want to setup a <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/templates/guestbook/form.html">template</a> for showing our form that creates new messages.</p> @@ -266,7 +260,7 @@ <p><em>Note: <code>trigger</code> is from Backbone Events, I binded a listener to this view in <code>views/dashboard/page.js</code> so when a new message is submitted, the list is re-rendered. We are setting the date of the POST on the server so there is no need to pass it up.</em></p> -<h2 id="retrieving-a-list-of-messages">Retrieving a list of messages</h2> +<h2>Retrieving a list of messages</h2> <p>We setup a route on our server to generate a list of all available messages at <code>GET /messages</code>. So we need to define a collection with the appropriate <code>url</code> to fetch this data down.</p> @@ -319,13 +313,13 @@ <p>This actually sums up everything you need to know to implement this simple example.</p> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p><a href="https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/nodejs-mongodb-mongoose-restify">Example Codebase</a></p> <p><a href="http://backbonetutorials.com/examples/nodejs-mongodb-mongoose-restify/app">Example Demo</a></p> -<p>In this example you should really be using relative URL’s in your collections/models and instead setting a baseUrl in a config file or by placing your index.html file on the restful server.</p> +<p>In this example you should really be using relative URL's in your collections/models and instead setting a baseUrl in a config file or by placing your index.html file on the restful server.</p> <p>This example is hosted on GitHub therefore we had to include the absolute URL to the server which is hosted on nodejitsu.com</p> @@ -335,29 +329,30 @@ <p>Get in touch with me on twitter, comments or GitHub!</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <p><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></p> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -370,9 +365,7 @@ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/organizing-backbone-using-modules/index.html b/_site/organizing-backbone-using-modules/index.html index 7c76b15..d5384c9 100644 --- a/_site/organizing-backbone-using-modules/index.html +++ b/_site/organizing-backbone-using-modules/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,33 +54,28 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - - - -<div id="post"> -<h1 id="organizing-your-application-using-modules-requirejs">Organizing your application using Modules (require.js)</h1> + <div id="post"> +<h1>Organizing your application using Modules (require.js)</h1> <p>Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development environments.</p> @@ -91,7 +85,7 @@ <p>This tutorial will get you started on combining Backbone.js with <a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD</a> (Asynchronous Module Definitions).</p> -<h2 id="what-is-amd">What is AMD?</h2> +<h2>What is AMD?</h2> <p><a href="https://github.com/amdjs/amdjs-api/wiki/AMD">Asynchronous Module Definitions</a> 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.</p> @@ -102,20 +96,20 @@ <p>Quick Overview</p> <ul> - <li>Modular</li> - <li>Scalable</li> - <li>Compiles well(see <a href="http://requirejs.org/docs/optimization.html">r.js</a> )</li> - <li>Market Adoption( <a href="http://dojotoolkit.org/reference-guide/releasenotes/1.6.html">Dojo 1.6 converted fully to AMD</a> )</li> +<li>Modular</li> +<li>Scalable</li> +<li>Compiles well(see <a href="http://requirejs.org/docs/optimization.html">r.js</a> )</li> +<li>Market Adoption( <a href="http://dojotoolkit.org/reference-guide/releasenotes/1.6.html">Dojo 1.6 converted fully to AMD</a> )</li> </ul> -<h2 id="why-requirejs">Why Require.js?</h2> +<h2>Why Require.js?</h2> <p>p. Require.js has a great community and it is growing rapidly. <a href="http://tagneto.blogspot.com/">James Burke</a> the author is married to Require.js and always responds to user feedback. He is a leading expert in script loading and a contributer to the AMD specification.</p> <p><a href="https://twitter.com/jrburke" class="twitter-follow-button">Follow @jrburke</a> <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></p> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>To easily understand this tutorial you should jump straight into the example code base.</p> @@ -127,9 +121,9 @@ <p>If you would like to see how a particular use case would be implemented please visit the GitHub page and create an issue.(Example Request: How to do nested views).</p> -<p>The example isn’t super fleshed out but should give you a vague idea.</p> +<p>The example isn't super fleshed out but should give you a vague idea.</p> -<h2 id="example-file-structure">Example File Structure</h2> +<h2>Example File Structure</h2> <p>There are many different ways to lay out your files and I believe it is actually dependent on the size and type of the project. In the example below views and templates are mirrored in file structure. Collections and Models are categorized into folders kind of like an ORM.</p> @@ -176,19 +170,19 @@ <p>To continue you must really understand what we are aiming towards as described in the introduction.</p> -<h2 id="bootstrapping-your-application">Bootstrapping your application</h2> +<h2>Bootstrapping your application</h2> <p>Using Require.js we define a single entry point on our index page. We should setup any useful containers that might be used by our Backbone views.</p> -<p><em>Note: The data-main attribute on our single script tag tells Require.js to load the script located at “js/main.js”. It automatically appends the “.js”</em></p> +<p><em>Note: The data-main attribute on our single script tag tells Require.js to load the script located at "js/main.js". It automatically appends the ".js"</em></p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!doctype html></span> <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> <span class="nt"><head></span> - <span class="nt"><title></span>Jackie Chan<span class="nt"></title></span> - <span class="c"><!-- Load the script "js/main.js" as our entry point --></span> - <span class="nt"><script </span><span class="na">data-main=</span><span class="s">"js/main"</span> <span class="na">src=</span><span class="s">"js/libs/require/require.js"</span><span class="nt">></script></span> + <span class="nt"><title></span>Jackie Chan<span class="nt"></title></span> + <span class="c"><!-- Load the script "js/main.js" as our entry point --></span> + <span class="nt"><script </span><span class="na">data-main=</span><span class="s">"js/main"</span> <span class="na">src=</span><span class="s">"js/libs/require/require.js"</span><span class="nt">></script></span> <span class="nt"></head></span> <span class="nt"><body></span> @@ -202,19 +196,19 @@ We should setup any useful containers that might be used by our Backbone views.< <p>You should most always end up with quite a light weight index file. You can serve this off your server and then the rest of your site off a CDN ensuring that everything that can be cached, will be. (You can also now serve the index file off the CDN using Cloudfront)</p> -<h3 id="what-does-the-bootstrap-look-like">What does the bootstrap look like?</h3> +<h3>What does the bootstrap look like?</h3> <p>Our bootstrap file will be responsible for configuring Require.js and loading initially important dependencies.</p> <p>In the example below we configure Require.js to create a shortcut alias to commonly used scripts such as jQuery, Underscore and Backbone.</p> -<p>Unfortunately Backbone.js isn’t AMD enabled so I downloaded the community managed repository and patched it on <a href="https://github.com/amdjs">amdjs</a>.</p> +<p>Unfortunately Backbone.js isn't AMD enabled so I downloaded the community managed repository and patched it on <a href="https://github.com/amdjs">amdjs</a>.</p> <p>Hopefully if the AMD specification takes off these libraries will add code to allow themselves to be loaded asynchronously. Due to this inconvenience the bootstrap is not as intuitive as it could be.</p> -<p>We also request a module called “app”, this will contain the entirety of our application logic.</p> +<p>We also request a module called "app", this will contain the entirety of our application logic.</p> -<p><em>Note: Modules are loaded relatively to the boot strap and always append with “.js”. So the module “app” will load “app.js” which is in the same directory as the bootstrap.</em></p> +<p><em>Note: Modules are loaded relatively to the boot strap and always append with ".js". So the module "app" will load "app.js" which is in the same directory as the bootstrap.</em></p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Filename: main.js</span> @@ -238,17 +232,17 @@ We should setup any useful containers that might be used by our Backbone views.< <span class="nx">App</span><span class="p">.</span><span class="nx">initialize</span><span class="p">();</span> <span class="p">});</span></code></pre></div> -<h2 id="how-should-we-lay-out-external-scripts">How should we lay out external scripts?</h2> +<h2>How should we lay out external scripts?</h2> <p>Any modules we develop for our application using AMD/Require.js will be asynchronously loaded.</p> <p>We have a heavy dependency on jQuery, Underscore and Backbone, unfortunately this libraries are loaded synchronously and also depend on each other existing in the global namespace.</p> -<h2 id="a-boiler-plate-module">A boiler plate module</h2> +<h2>A boiler plate module</h2> -<p>So before we start developing our application, let’s quickly look over boiler plate code that will be reused quite often.</p> +<p>So before we start developing our application, let's quickly look over boiler plate code that will be reused quite often.</p> -<p>For convenience sake I generally keep a “boilerplate.js” in my application root so I can copy it when I need to.</p> +<p>For convenience sake I generally keep a "boilerplate.js" in my application root so I can copy it when I need to.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">//Filename: boilerplate.js</span> @@ -266,7 +260,7 @@ We should setup any useful containers that might be used by our Backbone views.< <p>The first argument of the define function is our dependency array, in the future we can pass in any modules we like.</p> -<h2 id="appjs-building-our-applications-main-module">App.js Building our applications main module</h2> +<h2>App.js Building our applications main module</h2> <p>Our applications main module should always remain light weight. This tutorial only covers setting up a Backbone Router and initializing it in our main module.</p> @@ -333,7 +327,7 @@ We should setup any useful containers that might be used by our Backbone views.< <span class="p">};</span> <span class="p">});</span></code></pre></div> -<h2 id="modularizing-a-backbone-view">Modularizing a Backbone View</h2> +<h2>Modularizing a Backbone View</h2> <p>Backbone views usually interact with the DOM. Using our new modular system we can load in JavaScript templates using the Require.js text! plug-in.</p> @@ -362,7 +356,7 @@ We should setup any useful containers that might be used by our Backbone views.< <p>JavaScript templating allows us to separate the design from the application logic by placing all our HTML in the templates folder.</p> -<h2 id="modularizing-a-collection-model-and-view">Modularizing a Collection, Model and View</h2> +<h2>Modularizing a Collection, Model and View</h2> <p>Now we put it altogether by chaining up a Model, Collection and View which is a typical scenario when building a Backbone.js application.</p> @@ -382,10 +376,10 @@ We should setup any useful containers that might be used by our Backbone views.< <span class="k">return</span> <span class="nx">ProjectModel</span><span class="p">;</span> <span class="p">});</span></code></pre></div> -<p>Now that we have a model, our collection module can depend on it. We will set the “model” attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.</p> +<p>Now that we have a model, our collection module can depend on it. We will set the "model" attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.</p> <blockquote> - <p>Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.</p> +<p>Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.</p> </blockquote> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Filename: collections/projects</span> @@ -427,43 +421,44 @@ We should setup any useful containers that might be used by our Backbone views.< <span class="k">return</span> <span class="nx">ProjectListView</span><span class="p">;</span> <span class="p">});</span></code></pre></div> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p>Looking forward to feedback so I can turn this post and example into quality references on building modular JavaScript applications.</p> <p>Get in touch with me on twitter, comments or GitHub!</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></li> +<li><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/dzejkej">Jakub Kozisek</a> (created modular-backbone-updated containing updated libs with AMD support)</li> +<li><a href="https://github.com/dzejkej">Jakub Kozisek</a> (created modular-backbone-updated containing updated libs with AMD support)</li> </ul> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -476,9 +471,7 @@ We should setup any useful containers that might be used by our Backbone views.< (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/rss.xml b/_site/rss.xml index dd3d045..88fe4be 100644 --- a/_site/rss.xml +++ b/_site/rss.xml @@ -4,7 +4,7 @@ <title>Backbone Tutorials</title> <link href="http://backbonetutorials.com/atom.xml" rel="self"/> <link href="http://backbonetutorials.com/"/> - <updated>2014-11-14T09:02:49+10:00</updated> + <updated>2014-11-14T09:29:21+10:00</updated> <id>http://backbonetutorials.com/</id> <author> <name>Thomas Davis</name> @@ -16,17 +16,17 @@ <link href="http://backbonetutorials.com/real-time-backbone-with-pubnub?cachebust"/> <updated>2013-08-29T00:00:00+10:00</updated> <id>http://backbonetutorials.com/real-time-backbone-with-pubnub</id> - <content type="html"><h1 id="real-time-backbone-with-pubnub">Real-Time Backbone With PubNub</h1> + <content type="html"><h1>Real-Time Backbone With PubNub</h1> <p>Backbone is one of the most popular JavaScript based frameworks to date. It is a simple yet powerful way to create interactive JavaScript applications with data bindings to a back-end server. Instead of having to constantly synchronize data between your client and server though, why not have all the data there when it happens? Users should not have to wait to see updates to their model’s data so we decided to tackle this problem by integrating Backbone.js with PubNub.</p> -<p><img src="http://blogly.pubnub.com/wp-content/uploads/2013/08/PubNubBackboneJS.png" alt="PubnNub and Backbone" /></p> +<p><img src="http://blogly.pubnub.com/wp-content/uploads/2013/08/PubNubBackboneJS.png" alt="PubnNub and Backbone"></p> <p>Our integration allows developers to create a Backbone model or collection and have them synchronize with every other client instance of those models or collections in real-time. This will give any Backbone application a better user experience when working with collaborative, social, or any type of multi-user interface. It works by taking all of the create, update, and delete methods that are spawned by Backbone and propagating them across the PubNub real-time network.</p> <p>Want to see it in action? A full working tutorial and all the code you need is available at our <a href="http://pubnub.github.io/backbone/">GitHub page</a></p> -<h2 id="getting-started">Getting Started</h2> +<h2>Getting Started</h2> <p>The easiest way to get started is by using bower via <code>bower install pubnub-backbone</code>. You can also clone the repository and copy the built javascript files. Now you can include this and the base PubNub library found at <a href="https://github.com/pubnub/javascript#pubnub-cdn-javascript-sdk">https://github.com/pubnub/javascript#pubnub-cdn-javascript-sdk</a> like so:</p> @@ -40,7 +40,7 @@ <span class="nx">subscribe_key</span><span class="o">:</span> <span class="s1">&#39;demo&#39;</span> <span class="p">});</span></code></pre></div> -<h2 id="creating-a-real-time-collection">Creating a Real-Time Collection</h2> +<h2>Creating a Real-Time Collection</h2> <p>Now that we have a connection to PubNub, we can feed that connection into our custom Backbone collection:</p> @@ -49,7 +49,7 @@ <span class="nx">pubnub</span><span class="o">:</span> <span class="nx">pubnub</span> <span class="p">});</span></code></pre></div> -<p>This will look and act just like a normal Backbone collection with two extra keys. The “name” key allows PubNub to distinguish this collection, so it connects this collections to only collections of the same type. Think of this as a namespace so you can have multiple types of collections all updating in real-time. It uses this to generate a PubNub channel that is unique to the collection in the form of “backbone-collection-{name}”. The “pubnub” property is the globally referenced connection to the PubNub network. This is the object that comes back after calling PUBNUB.init.</p> +<p>This will look and act just like a normal Backbone collection with two extra keys. The “name” key allows PubNub to distinguish this collection, so it connects this collections to only collections of the same type. Think of this as a namespace so you can have multiple types of collections all updating in real-time. It uses this to generate a PubNub channel that is unique to the collection in the form of &quot;backbone-collection-{name}&quot;. The &quot;pubnub&quot; property is the globally referenced connection to the PubNub network. This is the object that comes back after calling PUBNUB.init.</p> <p>Now your Backbone collection will update in real-time. You can listen for add and remove events just like usual when something gets added or removed in real-time. The next step is to implement a way to get the current set of data when the collection first loads so every client is using the same data set. A great way of accomplishing this is by listening to the PubNub based events with a server and replicating the data store. Then the client can ask for the current set of data every time the application loads. This is made even simpler when using the backbone npm module for nodejs:</p> @@ -110,70 +110,68 @@ <link href="http://backbonetutorials.com/seo-for-single-page-apps?cachebust"/> <updated>2012-08-01T00:00:00+10:00</updated> <id>http://backbonetutorials.com/seo-for-single-page-apps</id> - <content type="html"><h1 id="seo-for-single-page-apps">SEO for single page apps</h1> + <content type="html"><h1>SEO for single page apps</h1> -<p>This tutorial will show you how to index your application on search engines. As the author I believe that servers should be completely independent of the client in the age of API’s. Which speeds up development for the ever increasing array of clients. It is on the shoulders of the search engines to conform and they should not dictate how the web is stored and accessed.</p> +<p>This tutorial will show you how to index your application on search engines. As the author I believe that servers should be completely independent of the client in the age of API&#39;s. Which speeds up development for the ever increasing array of clients. It is on the shoulders of the search engines to conform and they should not dictate how the web is stored and accessed.</p> <p>In 2009 Google released the idea of <a href="http://googlewebmastercentral.blogspot.com.au/2009/10/proposal-for-making-ajax-crawlable.html">escaped fragments</a>. </p> <p>The idea simply stating that if a search engine should come across your JavaScript application then you have the permission to redirect the search engine to another URL that serves the fully rendered version of the page (The current search engines cannot execute much JavaScript (Some people speculate that Google Chrome was born of Google Search wishing to successfully render every web page to retrieve ajaxed content)).</p> -<h2 id="how-does-redirecting-bots-work">How does redirecting bots work?</h2> +<h2>How does redirecting bots work?</h2> <p>Using modern headless browsers, we can easily return the fully rendered content per request by redirecting bots using our web servers configuration. Here is an image made by Google depicting the setup.</p> -<p><img src="http://acris.googlecode.com/svn/wiki/images/seo_google_crawlability.png" alt="headless seo" /></p> +<p><img src="http://acris.googlecode.com/svn/wiki/images/seo_google_crawlability.png" alt="headless seo"></p> -<div style="clear: both;"></div> +<div style='clear: both;'></div> -<h2 id="implementation-using-phantomjs">Implementation using Phantom.js</h2> +<h2>Implementation using Phantom.js</h2> <p><a href="http://phantomjs.org/">Phantom.js</a> is a headless webkit browser. We are going to setup a node.js server that given a URL, it will fully render the page content. Then we will redirect bots to this server to retrieve the correct content.</p> <p>You will need to install node.js and phantom.js onto a box. Then start up this server below. There are two files, one which is the web server and the other is a phantomjs script that renders the page.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// web.js</span> + +<span class="c1">// Express is our web server that can handle request</span> +<span class="kd">var</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;express&#39;</span><span class="p">);</span> +<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> + + +<span class="kd">var</span> <span class="nx">getContent</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span> + <span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span> + <span class="c1">// Here we spawn a phantom.js process, the first element of the </span> + <span class="c1">// array is our phantomjs script and the second element is our url </span> + <span class="kd">var</span> <span class="nx">phantom</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;child_process&#39;</span><span class="p">).</span><span class="nx">spawn</span><span class="p">(</span><span class="s1">&#39;phantomjs&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;phantom-server.js&#39;</span><span class="p">,</span> <span class="nx">url</span><span class="p">]);</span> + <span class="nx">phantom</span><span class="p">.</span><span class="nx">stdout</span><span class="p">.</span><span class="nx">setEncoding</span><span class="p">(</span><span class="s1">&#39;utf8&#39;</span><span class="p">);</span> + <span class="c1">// Our phantom.js script is simply logging the output and</span> + <span class="c1">// we access it here through stdout</span> + <span class="nx">phantom</span><span class="p">.</span><span class="nx">stdout</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;data&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">content</span> <span class="o">+=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span> + <span class="p">});</span> + <span class="nx">phantom</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;exit&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">code</span><span class="p">)</span> <span class="p">{</span> + <span class="k">if</span> <span class="p">(</span><span class="nx">code</span> <span class="o">!==</span> <span class="mi">0</span><span class="p">)</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="s1">&#39;We have an error&#39;</span><span class="p">);</span> + <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> + <span class="c1">// once our phantom.js script exits, let&#39;s call out call back</span> + <span class="c1">// which outputs the contents to the page</span> + <span class="nx">callback</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> +<span class="p">};</span> -<p>```javascript -// web.js</p> - -<p>// Express is our web server that can handle request -var express = require(‘express’); -var app = express();</p> - -<p>var getContent = function(url, callback) { - var content = ‘’; - // Here we spawn a phantom.js process, the first element of the - // array is our phantomjs script and the second element is our url - var phantom = require(‘child_process’).spawn(‘phantomjs’, [‘phantom-server.js’, url]); - phantom.stdout.setEncoding(‘utf8’); - // Our phantom.js script is simply logging the output and - // we access it here through stdout - phantom.stdout.on(‘data’, function(data) { - content += data.toString(); - }); - phantom.on(‘exit’, function(code) { - if (code !== 0) { - console.log(‘We have an error’); - } else { - // once our phantom.js script exits, let’s call out call back - // which outputs the contents to the page - callback(content); - } - }); -};</p> - -<p>var respond = function (req, res) { - // Because we use [P] in htaccess we have access to this header - url = ‘http://’ + req.headers[‘x-forwarded-host’] + req.params[0]; - getContent(url, function (content) { - res.send(content); - }); -}</p> - -<p>app.get(/(.*)/, respond); -app.listen(3000); -```</p> - -<p>The script below is <code>phantom-server.js</code> and will be in charge of fully rendering the content. We don’t return the content until the page is fully rendered. We hook into the resources listener to do this.</p> +<span class="kd">var</span> <span class="nx">respond</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span> + <span class="c1">// Because we use [P] in htaccess we have access to this header</span> + <span class="nx">url</span> <span class="o">=</span> <span class="s1">&#39;http://&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">headers</span><span class="p">[</span><span class="s1">&#39;x-forwarded-host&#39;</span><span class="p">]</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">params</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span> + <span class="nx">getContent</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">content</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span> + <span class="p">});</span> +<span class="p">}</span> + +<span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="sr">/(.*)/</span><span class="p">,</span> <span class="nx">respond</span><span class="p">);</span> +<span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">3000</span><span class="p">);</span> +</code></pre></div> +<p>The script below is <code>phantom-server.js</code> and will be in charge of fully rendering the content. We don&#39;t return the content until the page is fully rendered. We hook into the resources listener to do this.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">page</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;webpage&#39;</span><span class="p">).</span><span class="nx">create</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">system</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;system&#39;</span><span class="p">);</span> @@ -213,9 +211,9 @@ app.listen(3000); <span class="c1">// Let us check to see if the page is finished rendering</span> <span class="kd">var</span> <span class="nx">checkCompleteInterval</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="nx">checkComplete</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span></code></pre></div> -<p>Once we have this server up and running we just redirect bots to the server in our client’s web server configuration.</p> +<p>Once we have this server up and running we just redirect bots to the server in our client&#39;s web server configuration.</p> -<h2 id="redirecting-bots">Redirecting bots</h2> +<h2>Redirecting bots</h2> <p>If you are using apache we can edit out <code>.htaccess</code> such that Google requests are proxied to our middle man phantom.js server.</p> @@ -225,8 +223,8 @@ app.listen(3000); <p>We could also include other <code>RewriteCond</code>, such as <code>user agent</code> to redirect other search engines we wish to be indexed on.</p> -<p>Though Google won’t use <code>_escaped_fragment_</code> unless we tell it to by either including a meta tag; -<code>&lt;meta name="fragment" content="!"&gt;</code> +<p>Though Google won&#39;t use <code>_escaped_fragment_</code> unless we tell it to by either including a meta tag; +<code>&lt;meta name=&quot;fragment&quot; content=&quot;!&quot;&gt;</code> or using <code>#!</code> URLs in our links.</p> @@ -236,10 +234,10 @@ using <code>#!</code> URLs in our links.</p> <p>This has been tested with Google Webmasters fetch tool. Make sure you include <code>#!</code> on your URLs when using the fetch tool.</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://seo.apiengine.io">Open source node.js Seo Server</a></li> +<li><a href="http://seo.apiengine.io">Open source node.js Seo Server</a></li> </ul> </content> </entry> @@ -249,7 +247,7 @@ using <code>#!</code> URLs in our links.</p> <link href="http://backbonetutorials.com/organizing-backbone-using-modules?cachebust"/> <updated>2011-10-10T00:00:00+10:00</updated> <id>http://backbonetutorials.com/organizing-backbone-using-modules</id> - <content type="html"><h1 id="organizing-your-application-using-modules-requirejs">Organizing your application using Modules (require.js)</h1> + <content type="html"><h1>Organizing your application using Modules (require.js)</h1> <p>Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development environments.</p> @@ -259,7 +257,7 @@ using <code>#!</code> URLs in our links.</p> <p>This tutorial will get you started on combining Backbone.js with <a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD</a> (Asynchronous Module Definitions).</p> -<h2 id="what-is-amd">What is AMD?</h2> +<h2>What is AMD?</h2> <p><a href="https://github.com/amdjs/amdjs-api/wiki/AMD">Asynchronous Module Definitions</a> 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.</p> @@ -270,20 +268,20 @@ using <code>#!</code> URLs in our links.</p> <p>Quick Overview</p> <ul> - <li>Modular</li> - <li>Scalable</li> - <li>Compiles well(see <a href="http://requirejs.org/docs/optimization.html">r.js</a> )</li> - <li>Market Adoption( <a href="http://dojotoolkit.org/reference-guide/releasenotes/1.6.html">Dojo 1.6 converted fully to AMD</a> )</li> +<li>Modular</li> +<li>Scalable</li> +<li>Compiles well(see <a href="http://requirejs.org/docs/optimization.html">r.js</a> )</li> +<li>Market Adoption( <a href="http://dojotoolkit.org/reference-guide/releasenotes/1.6.html">Dojo 1.6 converted fully to AMD</a> )</li> </ul> -<h2 id="why-requirejs">Why Require.js?</h2> +<h2>Why Require.js?</h2> <p>p. Require.js has a great community and it is growing rapidly. <a href="http://tagneto.blogspot.com/">James Burke</a> the author is married to Require.js and always responds to user feedback. He is a leading expert in script loading and a contributer to the AMD specification.</p> <p><a href="https://twitter.com/jrburke" class="twitter-follow-button">Follow @jrburke</a> <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></p> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>To easily understand this tutorial you should jump straight into the example code base.</p> @@ -295,9 +293,9 @@ using <code>#!</code> URLs in our links.</p> <p>If you would like to see how a particular use case would be implemented please visit the GitHub page and create an issue.(Example Request: How to do nested views).</p> -<p>The example isn’t super fleshed out but should give you a vague idea.</p> +<p>The example isn&#39;t super fleshed out but should give you a vague idea.</p> -<h2 id="example-file-structure">Example File Structure</h2> +<h2>Example File Structure</h2> <p>There are many different ways to lay out your files and I believe it is actually dependent on the size and type of the project. In the example below views and templates are mirrored in file structure. Collections and Models are categorized into folders kind of like an ORM.</p> @@ -344,19 +342,19 @@ using <code>#!</code> URLs in our links.</p> <p>To continue you must really understand what we are aiming towards as described in the introduction.</p> -<h2 id="bootstrapping-your-application">Bootstrapping your application</h2> +<h2>Bootstrapping your application</h2> <p>Using Require.js we define a single entry point on our index page. We should setup any useful containers that might be used by our Backbone views.</p> -<p><em>Note: The data-main attribute on our single script tag tells Require.js to load the script located at “js/main.js”. It automatically appends the “.js”</em></p> +<p><em>Note: The data-main attribute on our single script tag tells Require.js to load the script located at &quot;js/main.js&quot;. It automatically appends the &quot;.js&quot;</em></p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!doctype html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> - <span class="nt">&lt;title&gt;</span>Jackie Chan<span class="nt">&lt;/title&gt;</span> - <span class="c">&lt;!-- Load the script &quot;js/main.js&quot; as our entry point --&gt;</span> - <span class="nt">&lt;script </span><span class="na">data-main=</span><span class="s">&quot;js/main&quot;</span> <span class="na">src=</span><span class="s">&quot;js/libs/require/require.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span> + <span class="nt">&lt;title&gt;</span>Jackie Chan<span class="nt">&lt;/title&gt;</span> + <span class="c">&lt;!-- Load the script &quot;js/main.js&quot; as our entry point --&gt;</span> + <span class="nt">&lt;script </span><span class="na">data-main=</span><span class="s">&quot;js/main&quot;</span> <span class="na">src=</span><span class="s">&quot;js/libs/require/require.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> @@ -370,19 +368,19 @@ We should setup any useful containers that might be used by our Backbone views.& <p>You should most always end up with quite a light weight index file. You can serve this off your server and then the rest of your site off a CDN ensuring that everything that can be cached, will be. (You can also now serve the index file off the CDN using Cloudfront)</p> -<h3 id="what-does-the-bootstrap-look-like">What does the bootstrap look like?</h3> +<h3>What does the bootstrap look like?</h3> <p>Our bootstrap file will be responsible for configuring Require.js and loading initially important dependencies.</p> <p>In the example below we configure Require.js to create a shortcut alias to commonly used scripts such as jQuery, Underscore and Backbone.</p> -<p>Unfortunately Backbone.js isn’t AMD enabled so I downloaded the community managed repository and patched it on <a href="https://github.com/amdjs">amdjs</a>.</p> +<p>Unfortunately Backbone.js isn&#39;t AMD enabled so I downloaded the community managed repository and patched it on <a href="https://github.com/amdjs">amdjs</a>.</p> <p>Hopefully if the AMD specification takes off these libraries will add code to allow themselves to be loaded asynchronously. Due to this inconvenience the bootstrap is not as intuitive as it could be.</p> -<p>We also request a module called “app”, this will contain the entirety of our application logic.</p> +<p>We also request a module called &quot;app&quot;, this will contain the entirety of our application logic.</p> -<p><em>Note: Modules are loaded relatively to the boot strap and always append with “.js”. So the module “app” will load “app.js” which is in the same directory as the bootstrap.</em></p> +<p><em>Note: Modules are loaded relatively to the boot strap and always append with &quot;.js&quot;. So the module &quot;app&quot; will load &quot;app.js&quot; which is in the same directory as the bootstrap.</em></p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Filename: main.js</span> @@ -406,17 +404,17 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="nx">App</span><span class="p">.</span><span class="nx">initialize</span><span class="p">();</span> <span class="p">});</span></code></pre></div> -<h2 id="how-should-we-lay-out-external-scripts">How should we lay out external scripts?</h2> +<h2>How should we lay out external scripts?</h2> <p>Any modules we develop for our application using AMD/Require.js will be asynchronously loaded.</p> <p>We have a heavy dependency on jQuery, Underscore and Backbone, unfortunately this libraries are loaded synchronously and also depend on each other existing in the global namespace.</p> -<h2 id="a-boiler-plate-module">A boiler plate module</h2> +<h2>A boiler plate module</h2> -<p>So before we start developing our application, let’s quickly look over boiler plate code that will be reused quite often.</p> +<p>So before we start developing our application, let&#39;s quickly look over boiler plate code that will be reused quite often.</p> -<p>For convenience sake I generally keep a “boilerplate.js” in my application root so I can copy it when I need to.</p> +<p>For convenience sake I generally keep a &quot;boilerplate.js&quot; in my application root so I can copy it when I need to.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">//Filename: boilerplate.js</span> @@ -434,7 +432,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>The first argument of the define function is our dependency array, in the future we can pass in any modules we like.</p> -<h2 id="appjs-building-our-applications-main-module">App.js Building our applications main module</h2> +<h2>App.js Building our applications main module</h2> <p>Our applications main module should always remain light weight. This tutorial only covers setting up a Backbone Router and initializing it in our main module.</p> @@ -501,7 +499,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="p">};</span> <span class="p">});</span></code></pre></div> -<h2 id="modularizing-a-backbone-view">Modularizing a Backbone View</h2> +<h2>Modularizing a Backbone View</h2> <p>Backbone views usually interact with the DOM. Using our new modular system we can load in JavaScript templates using the Require.js text! plug-in.</p> @@ -530,7 +528,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>JavaScript templating allows us to separate the design from the application logic by placing all our HTML in the templates folder.</p> -<h2 id="modularizing-a-collection-model-and-view">Modularizing a Collection, Model and View</h2> +<h2>Modularizing a Collection, Model and View</h2> <p>Now we put it altogether by chaining up a Model, Collection and View which is a typical scenario when building a Backbone.js application.</p> @@ -550,10 +548,10 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="k">return</span> <span class="nx">ProjectModel</span><span class="p">;</span> <span class="p">});</span></code></pre></div> -<p>Now that we have a model, our collection module can depend on it. We will set the “model” attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.</p> +<p>Now that we have a model, our collection module can depend on it. We will set the &quot;model&quot; attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.</p> <blockquote> - <p>Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.</p> +<p>Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.</p> </blockquote> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Filename: collections/projects</span> @@ -595,22 +593,22 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="k">return</span> <span class="nx">ProjectListView</span><span class="p">;</span> <span class="p">});</span></code></pre></div> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p>Looking forward to feedback so I can turn this post and example into quality references on building modular JavaScript applications.</p> <p>Get in touch with me on twitter, comments or GitHub!</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></li> +<li><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/dzejkej">Jakub Kozisek</a> (created modular-backbone-updated containing updated libs with AMD support)</li> +<li><a href="https://github.com/dzejkej">Jakub Kozisek</a> (created modular-backbone-updated containing updated libs with AMD support)</li> </ul> </content> </entry> @@ -620,7 +618,7 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/cross-domain-sessions?cachebust"/> <updated>2011-05-01T00:00:00+10:00</updated> <id>http://backbonetutorials.com/cross-domain-sessions</id> - <content type="html"><h1 id="cross-domain-backbonejs-with-sessions-using-cors">Cross-domain Backbone.js with sessions using CORS</h1> + <content type="html"><h1>Cross-domain Backbone.js with sessions using CORS</h1> <p>** This tutorial is a proof of concept and needs to be checked for security flaws **</p> @@ -629,35 +627,35 @@ We should setup any useful containers that might be used by our Backbone views.& <p>On a personal note, I consider this development practice highly desirable and encourage others to think of the possible benefits but the security still needs to be proved.</p> <blockquote> - <p>Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries. - <a href="http://enable-cors.org/">enable-cors.org</a></p> +<p>Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries. - <a href="http://enable-cors.org/">enable-cors.org</a></p> </blockquote> <p><strong>Some benefits include</strong></p> <ul> - <li>The client and back end exist independently regardless of where they are each hosted and built.</li> - <li>Due to the separation of concerns, testing now becomes easier and more controlled.</li> - <li>Develop only one API on the server, your front-end could be outsourced or built by a in-house team.</li> - <li>As a front-end developer you can host the client anywhere.</li> - <li>This separation enforces that the API be built robustly, documented, collaboratively and versioned.</li> +<li>The client and back end exist independently regardless of where they are each hosted and built.</li> +<li>Due to the separation of concerns, testing now becomes easier and more controlled.</li> +<li>Develop only one API on the server, your front-end could be outsourced or built by a in-house team.</li> +<li>As a front-end developer you can host the client anywhere.</li> +<li>This separation enforces that the API be built robustly, documented, collaboratively and versioned.</li> </ul> <p>** Cons of this tutorial **</p> <ul> - <li>This tutorial doesn’t explain how to perform this with cross browser support. CORS headers aren’t supported by Opera and IE 6/7. Though it is do-able using <a href="http://easyxdm.net/wp/">easyXDM</a></li> - <li>Security is somewhat addressed but maybe a more thorough security expert can chime in.</li> +<li>This tutorial doesn&#39;t explain how to perform this with cross browser support. CORS headers aren&#39;t supported by Opera and IE 6/7. Though it is do-able using <a href="http://easyxdm.net/wp/">easyXDM</a></li> +<li>Security is somewhat addressed but maybe a more thorough security expert can chime in.</li> </ul> -<h2 id="security">Security</h2> +<h2>Security</h2> <ul> - <li>Don’t allow GET request to change data, only retrieve.</li> - <li>Whitelist your allowed domains (see <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/cross-domain/server.js">server.js</a>)</li> - <li>Protect again <a href="http://blog.opensecurityresearch.com/2012/02/json-csrf-with-parameter-padding.html">JSON padding</a></li> +<li>Don&#39;t allow GET request to change data, only retrieve.</li> +<li>Whitelist your allowed domains (see <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/cross-domain/server.js">server.js</a>)</li> +<li>Protect again <a href="http://blog.opensecurityresearch.com/2012/02/json-csrf-with-parameter-padding.html">JSON padding</a></li> </ul> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>To easily understand this tutorial you should jump straight into the example code base.</p> @@ -669,7 +667,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>This tutorial focuses on building a flexible Session model to control session state in your application.</p> -<h2 id="checking-session-state-at-first-load">Checking session state at first load</h2> +<h2>Checking session state at first load</h2> <p>Before starting any routes, we should really know whether the user is authenticated. This will allow us to load the appropriate views. We will simply wrap our <code>Backbone.history.start</code> in a callback that executes after <code>Session.getAuth</code> has checked the server. We will jump into our Session model next.</p> @@ -703,15 +701,15 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> <span class="p">})</span> <span class="p">}</span> - <span class="p">});</span> + <span class="p">});</span> <span class="k">return</span> <span class="nx">AppView</span><span class="p">;</span> <span class="p">});</span></code></pre></div> <p><em>Note: We have used jQuery <code>ajaxPrefilter</code> to hook into all AJAX requests before they are executed. This is where we specify what server we want the application to hit.</em></p> -<h2 id="an-example-session-model">An example Session model</h2> +<h2>An example Session model</h2> -<p>This is a very light weight Session model which handles most situations. Read through the code and comments below. The model simply has a login, logout and check function. Again we have hooked into jQuery <code>ajaxPrefilter</code> to allow for csrf tokens and also telling jQuery to send cookies with the <code>withCredentials</code> property. The model relies heavily on it’s <code>auth</code> property. Throughout your application, each view can simply bind to <code>change:auth</code> on the Session model and react accordingly. Because we return this AMD module instantiated using the new keyword, then it will keep state throughout the page. (This may not be best practice but it’s highly convenient)</p> +<p>This is a very light weight Session model which handles most situations. Read through the code and comments below. The model simply has a login, logout and check function. Again we have hooked into jQuery <code>ajaxPrefilter</code> to allow for csrf tokens and also telling jQuery to send cookies with the <code>withCredentials</code> property. The model relies heavily on it&#39;s <code>auth</code> property. Throughout your application, each view can simply bind to <code>change:auth</code> on the Session model and react accordingly. Because we return this AMD module instantiated using the new keyword, then it will keep state throughout the page. (This may not be best practice but it&#39;s highly convenient)</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// views/app.js</span> <span class="nx">define</span><span class="p">([</span> @@ -771,9 +769,9 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: This session model is missing one useful feature. If a user looses auth when navigating your application then the application should set {auth: false} on this model. To do this, in the <code>ajaxPrefilter</code> edit outgoing <code>success</code> functions to check if the server response was {auth: false} and then call the original <code>success()</code> function.</em></p> -<h2 id="hooking-up-views-to-listen-to-changes-in-auth">Hooking up views to listen to changes in <code>auth</code></h2> +<h2>Hooking up views to listen to changes in <code>auth</code></h2> -<p>Now that we have a Session model, let’s hook up our <code>login/logout</code> view to listen to changes in <code>auth</code>. When creating the view we use <code>on</code> to bind a listener to the <code>auth</code> attribute of our model. Everytime it changes we will re-render the view which will conditionally load a template depending on the value of <code>Session.get('auth')</code>.</p> +<p>Now that we have a Session model, let&#39;s hook up our <code>login/logout</code> view to listen to changes in <code>auth</code>. When creating the view we use <code>on</code> to bind a listener to the <code>auth</code> attribute of our model. Everytime it changes we will re-render the view which will conditionally load a template depending on the value of <code>Session.get(&#39;auth&#39;)</code>.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// models/session.js</span> <span class="nx">define</span><span class="p">([</span> @@ -842,46 +840,46 @@ We should setup any useful containers that might be used by our Backbone views.& <p>This wraps up setting up the client, there are some notable points to make sure this technique works.</p> <ul> - <li>You must use <code>withCredentials</code> supplied by jQuery - session.js</li> - <li>You must send your request with csrf tokens for security - session.js</li> - <li>You should wrap your applications entry pointer (router in this example) in a check auth function - app.js</li> - <li>You must point your application at the right server - app.js</li> +<li>You must use <code>withCredentials</code> supplied by jQuery - session.js</li> +<li>You must send your request with csrf tokens for security - session.js</li> +<li>You should wrap your applications entry pointer (router in this example) in a check auth function - app.js</li> +<li>You must point your application at the right server - app.js</li> </ul> -<h2 id="building-a-compatible-server">Building a compatible server</h2> +<h2>Building a compatible server</h2> <p>This tutorial uses node.js, express.js and a modified csrf.js library. An example server.js file exist in the <code>examples/cross-domain</code> folder. When inside the folder simply type <code>npm install -d</code> to install the dependencies and then <code>node server.js</code> to start the server. Again, make sure your <code>app.js</code> points at the correct server.</p> <p>The server has to do a few things;</p> <ul> - <li>Allow CORS request</li> - <li>Implement csrf protection</li> - <li>Allow jQuery to send credentials</li> - <li>Set a whitelist of allowed domains</li> - <li>Configure the correct response headers</li> +<li>Allow CORS request</li> +<li>Implement csrf protection</li> +<li>Allow jQuery to send credentials</li> +<li>Set a whitelist of allowed domains</li> +<li>Configure the correct response headers</li> </ul> <p>To save you sometime here are some gotchas;</p> <ul> - <li>When sending <code>withCredentials</code> you must set correct response header <code>Access-Control-Allow-Credentials: true</code>. Also as a security policy browsers do not allow <code>Access-Control-Allow-Origin</code> to be set to <code>*</code>. So the origin of the request has to be known and trusted, so in the example below we use an of white listed domains.</li> - <li>jQuery ajax will trigger the browser to send these headers to enforce security <code>origin, x-requested-with, accept</code> so our server must allow them.</li> - <li>The browser might send out a <code>pre-flight</code> request to verify that it can talk to the server. The server must return <code>200 OK</code> on these <code>pre-flight</code> request.</li> +<li>When sending <code>withCredentials</code> you must set correct response header <code>Access-Control-Allow-Credentials: true</code>. Also as a security policy browsers do not allow <code>Access-Control-Allow-Origin</code> to be set to <code>*</code>. So the origin of the request has to be known and trusted, so in the example below we use an of white listed domains.</li> +<li>jQuery ajax will trigger the browser to send these headers to enforce security <code>origin, x-requested-with, accept</code> so our server must allow them.</li> +<li>The browser might send out a <code>pre-flight</code> request to verify that it can talk to the server. The server must return <code>200 OK</code> on these <code>pre-flight</code> request.</li> </ul> <p>Be sure to read this Mozilla <a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/">documentation</a> on the above.</p> -<h2 id="example-node-server">Example node server</h2> +<h2>Example node server</h2> <p>This server below implements everything we have talked about so far. It should be relatively easy to see how would translate into other frameworks and languages. <code>app.configure</code> runs the specified libraries against every request. We have told the server that on each request it should check the csrf token and check if the origin domain is white-listed. If so we edit each request to contain the appropriate headers.</p> <p>This server has 3 endpoints, that are pseudo-restful;</p> <ul> - <li>POST /session - Login - Sets the session username and returns a csrf token for the user to use</li> - <li>DELETE /session - Logout - Destroys the session and regenerates a new csrf token if the user wants to re-login</li> - <li>GET /session - Checks Auth - Simply returns if auth is true or false, if true then also returns some session details</li> +<li>POST /session - Login - Sets the session username and returns a csrf token for the user to use</li> +<li>DELETE /session - Logout - Destroys the session and regenerates a new csrf token if the user wants to re-login</li> +<li>GET /session - Checks Auth - Simply returns if auth is true or false, if true then also returns some session details</li> </ul> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;express&#39;</span><span class="p">);</span> @@ -952,9 +950,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">8000</span><span class="p">);</span></code></pre></div> -<p><em>Note: I wrote a custom csrf module for this which can be found in the example directory. It’s based of connects and uses the <code>crypto</code> library. I didn’t spend much time on it but other traditional csrf modules won’t work because they aren’t exactly built for this implementation technique.</em></p> +<p><em>Note: I wrote a custom csrf module for this which can be found in the example directory. It&#39;s based of connects and uses the <code>crypto</code> library. I didn&#39;t spend much time on it but other traditional csrf modules won&#39;t work because they aren&#39;t exactly built for this implementation technique.</em></p> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p>This approach really hammers in the need for a well documented and designed API. A powerful API will let you do application iterations with ease.</p> @@ -968,12 +966,12 @@ We should setup any useful containers that might be used by our Backbone views.& <p><a href="http://backbonetutorials.com/examples/cross-domain/">Example Demo</a></p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/">cross-site xmlhttprequest with CORS</a></li> - <li><a href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing</a></li> - <li><a href="http://www.kendoui.com/blogs/teamblog/posts/11-10-04/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> +<li><a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/">cross-site xmlhttprequest with CORS</a></li> +<li><a href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing</a></li> +<li><a href="http://www.kendoui.com/blogs/teamblog/posts/11-10-04/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> </ul> </content> </entry> @@ -983,9 +981,9 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/infinite-scrolling?cachebust"/> <updated>2011-04-28T00:00:00+10:00</updated> <id>http://backbonetutorials.com/infinite-scrolling</id> - <content type="html"><h1 id="lightweight-infinite-scrolling-using-twitter-api">Lightweight Infinite Scrolling using Twitter API</h1> + <content type="html"><h1>Lightweight Infinite Scrolling using Twitter API</h1> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>In this example we are going to build a widget that pulls in tweets and when the user scrolls to the bottom of the widget Backbone.js will re-sync with the server to bring down the next page of results.</p> @@ -995,13 +993,13 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: This tutorial will use <a href="http://backbonetutorials.com/organizing-backbone-using-modules">AMD</a> for modularity.</em></p> -<h2 id="the-twitter-collection">The Twitter Collection</h2> +<h2>The Twitter Collection</h2> -<p>Twitter offers a jsonp API for browsing tweets. The first thing to note is that we have to append ‘&amp;callback?’ to allow cross domain Ajax calls which is a feature of <a href="http://en.wikipedia.org/wiki/JSONP">jsonp</a>.</p> +<p>Twitter offers a jsonp API for browsing tweets. The first thing to note is that we have to append &#39;&amp;callback?&#39; to allow cross domain Ajax calls which is a feature of <a href="http://en.wikipedia.org/wiki/JSONP">jsonp</a>.</p> -<p>Using the ‘q’ and ‘page’ query parameters we can find the results we are after. In the collection definition below we have set some defaults which can be overridden at any point.</p> +<p>Using the &#39;q&#39; and &#39;page&#39; query parameters we can find the results we are after. In the collection definition below we have set some defaults which can be overridden at any point.</p> -<p>Twitter’s search API actually returns a whole bunch of meta information alongside the results. Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection. </p> +<p>Twitter&#39;s search API actually returns a whole bunch of meta information alongside the results. Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection. </p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// collections/twitter.js</span> <span class="nx">define</span><span class="p">([</span> @@ -1032,9 +1030,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="k">return</span> <span class="nx">resp</span><span class="p">.</span><span class="nx">results</span><span class="p">;</span> <span class="p">},</span></code></pre></div> -<h2 id="setting-up-the-view">Setting up the View</h2> +<h2>Setting up the View</h2> -<p>The first thing to do is to load our Twitter collection and template into the widget module. We should attach our collection to our view in our <code>initialize</code> function. <code>loadResults</code> will be responsible for calling fetch on our Twitter collection. On success we will append the latest results to our widget using our template. Our Backbone.js <code>events</code> will listen for <code>scroll</code> on the current <code>el</code> of the view which is ‘.twitter-widget’. If the current <code>scrollTop</code> is at the bottom then we simply increment the Twitter collections current page property and call <code>loadResults</code> again.</p> +<p>The first thing to do is to load our Twitter collection and template into the widget module. We should attach our collection to our view in our <code>initialize</code> function. <code>loadResults</code> will be responsible for calling fetch on our Twitter collection. On success we will append the latest results to our widget using our template. Our Backbone.js <code>events</code> will listen for <code>scroll</code> on the current <code>el</code> of the view which is &#39;.twitter-widget&#39;. If the current <code>scrollTop</code> is at the bottom then we simply increment the Twitter collections current page property and call <code>loadResults</code> again.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// views/twitter/widget.js</span> <span class="nx">define</span><span class="p">([</span> @@ -1087,9 +1085,9 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: <code>triggerPoint</code> will allow you to set an offset where the user has to scroll to before loading the next page</em></p> -<h2 id="the-widget-template">The widget template</h2> +<h2>The widget template</h2> -<p>Our view above passes into our underscore template the variable tweets which we can simply iterate over with using underscore’s <code>each</code> method.</p> +<p>Our view above passes into our underscore template the variable tweets which we can simply iterate over with using underscore&#39;s <code>each</code> method.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c">&lt;!--</span> <span class="nx">templates</span><span class="o">/</span><span class="nx">twitter</span><span class="o">/</span><span class="nx">list</span><span class="p">.</span><span class="nx">html</span> <span class="o">--&gt;</span> <span class="o">&lt;</span><span class="nx">ul</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&quot;tweets&quot;</span><span class="o">&gt;</span> @@ -1100,7 +1098,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="o">&lt;%</span> <span class="p">});</span> <span class="o">%&gt;</span> <span class="o">&lt;</span><span class="err">/ul&gt;</span></code></pre></div> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p>This is a very lightweight but robust infinite scroll example. There are caveats to using infinite scroll in UI/UX so make sure to only use it when applicable.</p> @@ -1115,11 +1113,11 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/nodejs-restify-mongodb-mongoose?cachebust"/> <updated>2011-04-22T00:00:00+10:00</updated> <id>http://backbonetutorials.com/nodejs-restify-mongodb-mongoose</id> - <content type="html"><h1 id="simple-example---nodejs-restify-mongodb-and-mongoose">Simple example - Node.js, Restify, MongoDb and Mongoose</h1> + <content type="html"><h1>Simple example - Node.js, Restify, MongoDb and Mongoose</h1> -<p>Before I start, the Backbone.js parts of this tutorial will be using techniques described in “Organizing your application using <a href="http://backbonetutorials.com/organizing-backbone-using-modules/">Modules</a> to construct a simple guestbook.</p> +<p>Before I start, the Backbone.js parts of this tutorial will be using techniques described in &quot;Organizing your application using <a href="http://backbonetutorials.com/organizing-backbone-using-modules/">Modules</a> to construct a simple guestbook.</p> -<h2 id="getting-started">Getting started</h2> +<h2>Getting started</h2> <p>To easily understand this tutorial you should jump straight into the example code base.</p> @@ -1129,31 +1127,31 @@ We should setup any useful containers that might be used by our Backbone views.& <p>This tutorial will assist you in saving data(Backbone.js Models) to MongoDb and retrieving a list(Backbone.js Collections) of them back.</p> -<h2 id="the-technologies">The technologies</h2> +<h2>The technologies</h2> <p>This stack is great for rapid prototyping and highly intuitive. Personal note: I love using JavaScript as my only language for the entire application (FrontEnd/BackEnd/API/Database). Restify is still in early development but is essentially just an extension of Express. So for anyone needing more stability you can easily just substitute Express in.</p> -<h3 id="nodejs">Node.js</h3> +<h3>Node.js</h3> -<p>“Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”</p> +<p>&quot;Node.js is a platform built on Chrome&#39;s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.&quot;</p> -<h3 id="restify">Restify</h3> +<h3>Restify</h3> -<p>“Restify is a node.js module built specifically to enable you to build correct REST web services. It borrows heavily from express (intentionally) as that is more or less the de facto API for writing web applications on top of node.js.”</p> +<p>&quot;Restify is a node.js module built specifically to enable you to build correct REST web services. It borrows heavily from express (intentionally) as that is more or less the de facto API for writing web applications on top of node.js.&quot;</p> -<h3 id="mongodb">MongoDb</h3> +<h3>MongoDb</h3> -<p>“MongoDB (from “humongous”) is a scalable, high-performance, open source NoSQL database.”</p> +<p>&quot;MongoDB (from &quot;humongous&quot;) is a scalable, high-performance, open source NoSQL database.&quot;</p> -<h3 id="mongoose">Mongoose</h3> +<h3>Mongoose</h3> -<p>“Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.”</p> +<p>&quot;Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.&quot;</p> -<h2 id="building-the-server">Building the server</h2> +<h2>Building the server</h2> <p>In the example repository there is a server.js example which can be executed by running <code>node server.js</code>. If you use this example in your own applications make sure to update the Backbone.js <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/models/message.js">Model</a> and <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/collections/messages.js">Collection</a> definitions to match your server address.</p> -<h2 id="restify-configuration">Restify configuration</h2> +<h2>Restify configuration</h2> <p>The first thing to do is require the Restify module. Restify will be in control of handling our restful endpoints and returning the appropriate JSON.</p> @@ -1163,7 +1161,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>Note: bodyParser() takes care of turning your request data into a JavaScript object on the server automatically.</p> -<h2 id="mongodbmongoose-configuration">MongoDb/Mongoose configuration</h2> +<h2>MongoDb/Mongoose configuration</h2> <p>We simply want to require the MongoDb module and pass it a MongoDb authentication URI e.g. mongodb://username:server@mongoserver:10059/somecollection</p> @@ -1174,7 +1172,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="nx">db</span> <span class="o">=</span> <span class="nx">mongoose</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">creds</span><span class="p">.</span><span class="nx">mongoose_auth</span><span class="p">),</span> <span class="nx">Schema</span> <span class="o">=</span> <span class="nx">mongoose</span><span class="p">.</span><span class="nx">Schema</span><span class="p">;</span></code></pre></div> -<h2 id="mongoose-schema">Mongoose Schema</h2> +<h2>Mongoose Schema</h2> <p>Mongoose introduces a concept of <a href="http://mongoosejs.com/docs/model-definition.html">model/schema</a> enforcing types which allow for easier input validation etc</p> @@ -1189,7 +1187,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: <code>Message</code> can now be used for all things CRUD related.</em></p> -<h2 id="setting-up-the-routes">Setting up the routes</h2> +<h2>Setting up the routes</h2> <p>Just like in Backbone, Restify allows you to configure different routes and their associated callbacks. In the code below we define two routes. One for saving new messages and one for retrieving all messages. After we have created our function definitions, we attach them to either GET/POST/PUT/DELETE on a particular restful endpoint e.g. GET /messages</p> @@ -1230,22 +1228,22 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: Again you must remember to change the <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/models/message.js">Model</a> and <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/collections/messages.js">Collection</a> definitions to match your server address.</em></p> -<h2 id="setting-up-the-client-backbonejs">Setting up the client (Backbone.js)</h2> +<h2>Setting up the client (Backbone.js)</h2> -<p>I’ve actually used the latest copy of <a href="http://backboneboilerplate.com">http://backboneboilerplate.com</a> to set up the example page.</p> +<p>I&#39;ve actually used the latest copy of <a href="http://backboneboilerplate.com">http://backboneboilerplate.com</a> to set up the example page.</p> <p>The important files you will want to check out are;</p> <ul> - <li>views/dashboard/page.js</li> - <li>views/guestbook/form.js</li> - <li>views/guestbook/list.js</li> - <li>models/message.js</li> - <li>collections/messages.js</li> - <li>templates/guestbook/</li> +<li>views/dashboard/page.js</li> +<li>views/guestbook/form.js</li> +<li>views/guestbook/list.js</li> +<li>models/message.js</li> +<li>collections/messages.js</li> +<li>templates/guestbook/</li> </ul> -<h2 id="saving-a-message">Saving a message</h2> +<h2>Saving a message</h2> <p>First of all we want to setup a <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/templates/guestbook/form.html">template</a> for showing our form that creates new messages.</p> @@ -1300,7 +1298,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p><em>Note: <code>trigger</code> is from Backbone Events, I binded a listener to this view in <code>views/dashboard/page.js</code> so when a new message is submitted, the list is re-rendered. We are setting the date of the POST on the server so there is no need to pass it up.</em></p> -<h2 id="retrieving-a-list-of-messages">Retrieving a list of messages</h2> +<h2>Retrieving a list of messages</h2> <p>We setup a route on our server to generate a list of all available messages at <code>GET /messages</code>. So we need to define a collection with the appropriate <code>url</code> to fetch this data down.</p> @@ -1353,13 +1351,13 @@ We should setup any useful containers that might be used by our Backbone views.& <p>This actually sums up everything you need to know to implement this simple example.</p> -<h2 id="conclusion">Conclusion</h2> +<h2>Conclusion</h2> <p><a href="https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/nodejs-mongodb-mongoose-restify">Example Codebase</a></p> <p><a href="http://backbonetutorials.com/examples/nodejs-mongodb-mongoose-restify/app">Example Demo</a></p> -<p>In this example you should really be using relative URL’s in your collections/models and instead setting a baseUrl in a config file or by placing your index.html file on the restful server.</p> +<p>In this example you should really be using relative URL&#39;s in your collections/models and instead setting a baseUrl in a config file or by placing your index.html file on the restful server.</p> <p>This example is hosted on GitHub therefore we had to include the absolute URL to the server which is hosted on nodejitsu.com</p> @@ -1369,7 +1367,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>Get in touch with me on twitter, comments or GitHub!</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <p><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></p> </content> @@ -1380,33 +1378,33 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/why-would-you-use-backbone?cachebust"/> <updated>2011-02-01T00:00:00+10:00</updated> <id>http://backbonetutorials.com/why-would-you-use-backbone</id> - <content type="html"><h1 id="why-do-you-need-backbonejs">Why do you need Backbone.js?</h1> + <content type="html"><h1>Why do you need Backbone.js?</h1> <p>Building single-page web apps or complicated user interfaces will get extremely difficult by simply using <a href="http://jquery.com">jQuery</a> or <a href="http://mootools.net">MooTools</a>. 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.</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 structuring your application but you miss out on the benefits of the open source community.</p> +<p>I shouldn&#39;t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of structuring your application but you miss out on the benefits of the open source community.</p> -<h2 id="why-single-page-applications-are-the-future">Why single page applications are the future</h2> +<h2>Why single page applications are the future</h2> <p>Backbone.js enforces that communication to the server should be done entirely through a RESTful API. The web is currently trending such that all data/content will be exposed through an API. This is because the browser is no longer the only client, we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc.</p> -<h2 id="so-how-does-backbonejs-help">So how does Backbone.js help?</h2> +<h2>So how does Backbone.js help?</h2> <p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. It is essentially MVC for the client and allows you to make your code modular. 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> -<h2 id="other-frameworks">Other frameworks</h2> +<h2>Other frameworks</h2> <p>If you are looking for comparisons to build your single page application, try some of these resourceful links.</p> <ul> - <li><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/">A feature comparison of different frontend frameworks</a></li> - <li><a href="http://addyosmani.github.com/todomvc/">Todo MVC - Todo list implemented in the many different types of frontend frameworks</a></li> +<li><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/">A feature comparison of different frontend frameworks</a></li> +<li><a href="http://addyosmani.github.com/todomvc/">Todo MVC - Todo list implemented in the many different types of frontend frameworks</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/FND">FND</a></li> +<li><a href="https://github.com/FND">FND</a></li> </ul> <p><strong>If you questions regarding why you should choose Backbone.js as your framework, please leave a comment below</strong></p> @@ -1418,15 +1416,15 @@ We should setup any useful containers that might be used by our Backbone views.& <link href="http://backbonetutorials.com/what-is-a-model?cachebust"/> <updated>2011-01-29T00:00:00+10:00</updated> <id>http://backbonetutorials.com/what-is-a-model</id> - <content type="html"><h1 id="what-is-a-model">What is a model?</h1> + <content type="html"><h1>What is a model?</h1> -<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a> is so diluted that it’s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> +<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a> is so diluted that it&#39;s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> <blockquote> - <p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> +<p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> </blockquote> -<p>So for the purpose of the tutorial let’s create a model.</p> +<p>So for the purpose of the tutorial let&#39;s create a model.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Person</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> @@ -1436,9 +1434,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span></code></pre></div> -<p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.</p> +<p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don&#39;t have to include it in your model declaration but you will find yourself using it more often than not.</p> -<h2 id="setting-attributes">Setting attributes</h2> +<h2>Setting attributes</h2> <p>Now we want to pass some parameters when we create an instance of our model.</p> @@ -1455,7 +1453,7 @@ We should setup any useful containers that might be used by our Backbone views.& <p>So passing a JavaScript object to our constructor is the same as calling <em>model.set()</em>. Now that these models have attributes set we need to be able to retrieve them. </p> -<h2 id="getting-attributes">Getting attributes</h2> +<h2>Getting attributes</h2> <p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> @@ -1471,9 +1469,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> <span class="kd">var</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;child&quot;</span><span class="p">);</span> <span class="c1">// &#39;Ryan&#39;</span></code></pre></div> -<h2 id="setting-model-defaults">Setting model defaults</h2> +<h2>Setting model defaults</h2> -<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.</p> +<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#39;defaults&#39; in your model declaration.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Person</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> @@ -1492,7 +1490,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> <span class="kd">var</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;child&quot;</span><span class="p">);</span> <span class="c1">// &#39;Ryan&#39;</span></code></pre></div> -<h2 id="manipulating-model-attributes">Manipulating model attributes</h2> +<h2>Manipulating model attributes</h2> <p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> @@ -1516,9 +1514,9 @@ We should setup any useful containers that might be used by our Backbone views.& <p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time. </p> -<h2 id="listening-for-changes-to-the-model">Listening for changes to the model</h2> +<h2>Listening for changes to the model</h2> -<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our “person” changes we will alert their new name.</p> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our &quot;person&quot; changes we will alert their new name.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Person</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> @@ -1537,9 +1535,9 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Stewie Griffin&#39;</span><span class="p">});</span> <span class="c1">// This triggers a change and will alert()</span></code></pre></div> -<p>So we can bind the change listener to individual attributes or if we like simply ‘<em>this.on(“change”, function(model){});</em>’ to listen for changes to all attributes of the model.</p> +<p>So we can bind the change listener to individual attributes or if we like simply &#39;<em>this.on(&quot;change&quot;, function(model){});</em>&#39; to listen for changes to all attributes of the model.</p> -<h2 id="interacting-with-the-server">Interacting with the server</h2> +<h2>Interacting with the server</h2> <p>Models are used to represent data from your server and actions you perform on them will be translated to RESTful operations.</p> @@ -1560,7 +1558,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="p">});</span></code></pre></div> -<h3 id="creating-a-new-model">Creating a new model</h3> +<h3>Creating a new model</h3> <p>If we wish to create a new user on the server then we will instantiate a new UserModel and call <code>save</code>. If the <code>id</code> attribute of the model is <code>null</code>, Backbone.js will send a POST request to the urlRoot of the server. </p> @@ -1588,13 +1586,13 @@ We should setup any useful containers that might be used by our Backbone views.& <p>Our table should now have the values</p> -<p>1, ‘Thomas’, ‘thomasalwyndavis@gmail.com’</p> +<p>1, &#39;Thomas&#39;, &#39;thomasalwyndavis@gmail.com&#39;</p> -<h3 id="getting-a-model">Getting a model</h3> +<h3>Getting a model</h3> <p>Now that we have saved a new user model, we can retrieve it from the server. We know that the <code>id</code> is 1 from the above example.</p> -<p>If we instantiate a model with an <code>id</code>, Backbone.js will automatically perform a get request to the urlRoot + ‘/id’ (conforming to RESTful conventions)</p> +<p>If we instantiate a model with an <code>id</code>, Backbone.js will automatically perform a get request to the urlRoot + &#39;/id&#39; (conforming to RESTful conventions)</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Here we have set the `id` of the model</span> <span class="kd">var</span> <span class="nx">user</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Usermodel</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="mi">1</span><span class="p">});</span> @@ -1607,7 +1605,7 @@ We should setup any useful containers that might be used by our Backbone views.& <span class="p">}</span> <span class="p">})</span></code></pre></div> -<h3 id="updating-a-model">Updating a model</h3> +<h3>Updating a model</h3> <p>Now that we have a model that exist on the server we can perform an update using a PUT request. We will use the <code>save</code> api call which is intelligent and will send a PUT request instead of a POST request if an <code>id</code> is present(conforming to RESTful conventions)</p> @@ -1628,7 +1626,7 @@ We will use the <code>save</code> api call which is intelligent and <span class="p">}</span> <span class="p">});</span></code></pre></div> -<h3 id="deleting-a-model">Deleting a model</h3> +<h3>Deleting a model</h3> <p>When a model has an <code>id</code> we know that it exist on the server, so if we wish to remove it from the server we can call <code>destroy</code>. <code>destroy</code> will fire off a DELETE /user/id (conforming to RESTful conventions).</p> @@ -1647,7 +1645,7 @@ We will use the <code>save</code> api call which is intelligent and <span class="p">}</span> <span class="p">});</span></code></pre></div> -<h3 id="tips-and-tricks">Tips and Tricks</h3> +<h3>Tips and Tricks</h3> <p><em>Get all the current attributes</em></p> @@ -1685,10 +1683,10 @@ We will use the <code>save</code> api call which is intelligent and <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Dr Manhatten&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> <span class="c1">// God have mercy on our souls</span></code></pre></div> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> +<li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> </ul> </content> </entry> @@ -1698,11 +1696,11 @@ We will use the <code>save</code> api call which is intelligent and <link href="http://backbonetutorials.com/what-is-a-view?cachebust"/> <updated>2011-01-28T00:00:00+10:00</updated> <id>http://backbonetutorials.com/what-is-a-view</id> - <content type="html"><h1 id="what-is-a-view">What is a view?</h1> + <content type="html"><h1>What is a view?</h1> -<p>Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically <a href="http://documentcloud.github.com/underscore/#template">Underscore.js’s _.template</a>.</p> +<p>Backbone views are used to reflect what your applications&#39; data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically <a href="http://documentcloud.github.com/underscore/#template">Underscore.js&#39;s _.template</a>.</p> -<p>We will be using <a href="http://jquery.com/">jQuery 1.8.2</a> as our DOM manipulator. It’s possible to use other libraries such as <a href="http://mootools.net/">MooTools</a> or <a href="http://sizzlejs.com/">Sizzle</a>, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.</p> +<p>We will be using <a href="http://jquery.com/">jQuery 1.8.2</a> as our DOM manipulator. It&#39;s possible to use other libraries such as <a href="http://mootools.net/">MooTools</a> or <a href="http://sizzlejs.com/">Sizzle</a>, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.</p> <p>For the purposes of this demonstration, we will be implementing a search box. <a href="http://jsfiddle.net/tBS4X/1/">A live example</a> can be found on jsFiddle.</p> @@ -1716,31 +1714,31 @@ We will use the <code>save</code> api call which is intelligent and <span class="c1">// Consider it the constructor of the class.</span> <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">();</span></code></pre></div> -<h2 id="the-el-property">The “el” property</h2> +<h2>The &quot;el&quot; property</h2> -<p>The “el” property references the DOM object created in the browser. Every Backbone.js view has an “el” property, and if it not defined, Backbone.js will construct its own, which is an empty div element.</p> +<p>The &quot;el&quot; property references the DOM object created in the browser. Every Backbone.js view has an &quot;el&quot; property, and if it not defined, Backbone.js will construct its own, which is an empty div element.</p> -<p>Let us set our view’s “el” property to div#search_container, effectively making Backbone.View the owner of the DOM element.</p> +<p>Let us set our view&#39;s &quot;el&quot; property to div#search_container, effectively making Backbone.View the owner of the DOM element.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> - <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Alerts suck.&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> + <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Alerts suck.&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span></code></pre></div> <p><em>Note: Keep in mind that this binds the container element. Any events we trigger must be in this element.</em></p> -<h2 id="loading-a-template">Loading a template</h2> +<h2>Loading a template</h2> -<p>Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to <a href="http://documentcloud.github.com/underscore/">Underscore.js’s documentation</a> for more information.</p> +<p>Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to <a href="http://documentcloud.github.com/underscore/">Underscore.js&#39;s documentation</a> for more information.</p> -<p>Let us implement a “render()” function and call it when the view is initialized. The “render()” function will load our template into the view’s “el” property using jQuery.</p> +<p>Let us implement a &quot;render()&quot; function and call it when the view is initialized. The &quot;render()&quot; function will load our template into the view&#39;s &quot;el&quot; property using jQuery.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;</span><span class="nx">Search</span><span class="o">&lt;</span><span class="err">/label&gt;</span> @@ -1751,26 +1749,26 @@ We will use the <code>save</code> api call which is intelligent and <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> - <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> - <span class="p">},</span> - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="c1">// Compile the template using underscore</span> - <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> - <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> - <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> + <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span></code></pre></div> <p><em>Tip: Place all your templates in a file and serve them from a CDN. This ensures your users will always have your application cached.</em></p> -<h2 id="listening-for-events">Listening for events</h2> +<h2>Listening for events</h2> -<p>To attach a listener to our view, we use the “events” attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the “el” property. Let us attach a “click” listener to our button.</p> +<p>To attach a listener to our view, we use the &quot;events&quot; attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the &quot;el&quot; property. Let us attach a &quot;click&quot; listener to our button.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;</span><span class="nx">Search</span><span class="o">&lt;</span><span class="err">/label&gt;</span> @@ -1801,7 +1799,7 @@ We will use the <code>save</code> api call which is intelligent and <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span></code></pre></div> -<h2 id="tips-and-tricks">Tips and Tricks</h2> +<h2>Tips and Tricks</h2> <p><em>Using template variables</em></p> @@ -1815,43 +1813,43 @@ We will use the <code>save</code> api call which is intelligent and <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> - <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> - <span class="p">},</span> - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="c1">//Pass variables in using Underscore.js Template</span> - <span class="kd">var</span> <span class="nx">variables</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">search_label</span><span class="o">:</span> <span class="s2">&quot;My Search&quot;</span> <span class="p">};</span> - <span class="c1">// Compile the template using underscore</span> - <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="nx">variables</span> <span class="p">);</span> - <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> - <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> - <span class="p">},</span> - <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> - <span class="s2">&quot;click input[type=button]&quot;</span><span class="o">:</span> <span class="s2">&quot;doSearch&quot;</span> - <span class="p">},</span> - <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> - <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> - <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Search for &quot;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_input&quot;</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> + <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">//Pass variables in using Underscore.js Template</span> + <span class="kd">var</span> <span class="nx">variables</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">search_label</span><span class="o">:</span> <span class="s2">&quot;My Search&quot;</span> <span class="p">};</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="nx">variables</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;click input[type=button]&quot;</span><span class="o">:</span> <span class="s2">&quot;doSearch&quot;</span> + <span class="p">},</span> + <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> + <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Search for &quot;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_input&quot;</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span></code></pre></div> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google API</a></li> - <li><a href="http://jsfiddle.net/thomas/C9wew/4/">This examples exact code on jsfiddle.net</a></li> - <li><a href="http://jsfiddle.net/thomas/dKK9Y/6/">Another semi-complete example on jsFiddle</a></li> +<li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google API</a></li> +<li><a href="http://jsfiddle.net/thomas/C9wew/4/">This examples exact code on jsfiddle.net</a></li> +<li><a href="http://jsfiddle.net/thomas/dKK9Y/6/">Another semi-complete example on jsFiddle</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/zaeleus">Michael Macias</a></li> - <li><a href="https://github.com/lawnday">Alex Lande</a></li> +<li><a href="https://github.com/zaeleus">Michael Macias</a></li> +<li><a href="https://github.com/lawnday">Alex Lande</a></li> </ul> </content> </entry> @@ -1861,13 +1859,13 @@ We will use the <code>save</code> api call which is intelligent and <link href="http://backbonetutorials.com/what-is-a-router?cachebust"/> <updated>2011-01-27T00:00:00+10:00</updated> <id>http://backbonetutorials.com/what-is-a-router</id> - <content type="html"><h1 id="what-is-a-router">What is a router?</h1> + <content type="html"><h1>What is a router?</h1> -<p>Backbone routers are used for routing your applications URL’s when using hash tags(#). In the traditional MVC sense they don’t necessarily fit the semantics and if you have read “<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>” it will elaborate on this point. Though a Backbone “router” is still very useful for any application/feature that needs URL routing/history capabilities. </p> +<p>Backbone routers are used for routing your applications URL&#39;s when using hash tags(#). In the traditional MVC sense they don&#39;t necessarily fit the semantics and if you have read &quot;<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>&quot; it will elaborate on this point. Though a Backbone &quot;router&quot; is still very useful for any application/feature that needs URL routing/history capabilities. </p> <p>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.</p> -<p>Also note that routes interpret 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)</p> +<p>Also note that routes interpret anything after &quot;#&quot; tag in the URL. All links in your application should target &quot;#/action&quot; or &quot;#action&quot;. (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help)</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script&gt;</span> <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> @@ -1893,9 +1891,9 @@ We will use the <code>save</code> api call which is intelligent and <p><em>Notice the change in the url</em></p> -<h2 id="dynamic-routing">Dynamic Routing</h2> +<h2>Dynamic Routing</h2> -<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.</p> +<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 &quot;http://example.com/#/posts/12&quot;. Once this route was activated you would want to access the id given in the URL string. This example is implemented below.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script&gt;</span> <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> @@ -1924,13 +1922,13 @@ We will use the <code>save</code> api call which is intelligent and <p><em>Notice the change in the url</em></p> -<h2 id="dynamic-routing-cont-params-and-splats">Dynamic Routing Cont. “:params” and “*splats”</h2> +<h2>Dynamic Routing Cont. &quot;:params&quot; and &quot;*splats&quot;</h2> -<p>Backbone uses two styles of variables when implementing routes. First there are “:params” which match any URL components between slashes. Then there are “<em>splats” which match any number of URL components. Note that due to the nature of a “</em>splat” it will always be the last variable in your URL as it will match any and all components.</p> +<p>Backbone uses two styles of variables when implementing routes. First there are &quot;:params&quot; which match any URL components between slashes. Then there are &quot;<em>splats&quot; which match any number of URL components. Note that due to the nature of a &quot;</em>splat&quot; it will always be the last variable in your URL as it will match any and all components.</p> -<p>Any “*splats” or “:params” in route definitions are passed as arguments (in respective order) to the associated function. A route defined as “/:route/:action” will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)</p> +<p>Any &quot;*splats&quot; or &quot;:params&quot; in route definitions are passed as arguments (in respective order) to the associated function. A route defined as &quot;/:route/:action&quot; will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)</p> -<p>Here are some examples of using “:params” and “*splats”</p> +<p>Here are some examples of using &quot;:params&quot; and &quot;*splats&quot;</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> @@ -1955,21 +1953,22 @@ We will use the <code>save</code> api call which is intelligent and <span class="nx">alert</span><span class="p">(</span><span class="nx">route</span> <span class="o">+</span> <span class="s2">&quot;_&quot;</span> <span class="o">+</span> <span class="nx">action</span><span class="p">);</span> <span class="c1">// dashboard_graph </span> <span class="p">});</span></code></pre></div> -<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”. Also check out <a href="http://seo.apiengine.io">Seo Server</a></p> +<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 &quot;google seo hashbangs&quot;. Also check out <a href="http://seo.apiengine.io">Seo Server</a></p> <p>Remember to do a pull request for any errors you come across.</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> + <ul> - <li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li> - <li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li> +<li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li> +<li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="http://schistad.info">Herman Schistad</a> - (Backbone 0.5 rename from Controller to Router)</li> - <li><a href="http://paulirish.com">Paul Irish</a></li> +<li><a href="http://schistad.info">Herman Schistad</a> - (Backbone 0.5 rename from Controller to Router)</li> +<li><a href="http://paulirish.com">Paul Irish</a></li> </ul> </content> </entry> diff --git a/_site/seo-for-single-page-apps/index.html b/_site/seo-for-single-page-apps/index.html index fee2935..af2cfb4 100644 --- a/_site/seo-for-single-page-apps/index.html +++ b/_site/seo-for-single-page-apps/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,96 +54,89 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - - - -<div id="post"> -<h1 id="seo-for-single-page-apps">SEO for single page apps</h1> + <div id="post"> +<h1>SEO for single page apps</h1> -<p>This tutorial will show you how to index your application on search engines. As the author I believe that servers should be completely independent of the client in the age of API’s. Which speeds up development for the ever increasing array of clients. It is on the shoulders of the search engines to conform and they should not dictate how the web is stored and accessed.</p> +<p>This tutorial will show you how to index your application on search engines. As the author I believe that servers should be completely independent of the client in the age of API's. Which speeds up development for the ever increasing array of clients. It is on the shoulders of the search engines to conform and they should not dictate how the web is stored and accessed.</p> <p>In 2009 Google released the idea of <a href="http://googlewebmastercentral.blogspot.com.au/2009/10/proposal-for-making-ajax-crawlable.html">escaped fragments</a>. </p> <p>The idea simply stating that if a search engine should come across your JavaScript application then you have the permission to redirect the search engine to another URL that serves the fully rendered version of the page (The current search engines cannot execute much JavaScript (Some people speculate that Google Chrome was born of Google Search wishing to successfully render every web page to retrieve ajaxed content)).</p> -<h2 id="how-does-redirecting-bots-work">How does redirecting bots work?</h2> +<h2>How does redirecting bots work?</h2> <p>Using modern headless browsers, we can easily return the fully rendered content per request by redirecting bots using our web servers configuration. Here is an image made by Google depicting the setup.</p> -<p><img src="http://acris.googlecode.com/svn/wiki/images/seo_google_crawlability.png" alt="headless seo" /></p> +<p><img src="http://acris.googlecode.com/svn/wiki/images/seo_google_crawlability.png" alt="headless seo"></p> -<div style="clear: both;"></div> +<div style='clear: both;'></div> -<h2 id="implementation-using-phantomjs">Implementation using Phantom.js</h2> +<h2>Implementation using Phantom.js</h2> <p><a href="http://phantomjs.org/">Phantom.js</a> is a headless webkit browser. We are going to setup a node.js server that given a URL, it will fully render the page content. Then we will redirect bots to this server to retrieve the correct content.</p> <p>You will need to install node.js and phantom.js onto a box. Then start up this server below. There are two files, one which is the web server and the other is a phantomjs script that renders the page.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// web.js</span> + +<span class="c1">// Express is our web server that can handle request</span> +<span class="kd">var</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'express'</span><span class="p">);</span> +<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> + + +<span class="kd">var</span> <span class="nx">getContent</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span> + <span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span> + <span class="c1">// Here we spawn a phantom.js process, the first element of the </span> + <span class="c1">// array is our phantomjs script and the second element is our url </span> + <span class="kd">var</span> <span class="nx">phantom</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'child_process'</span><span class="p">).</span><span class="nx">spawn</span><span class="p">(</span><span class="s1">'phantomjs'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'phantom-server.js'</span><span class="p">,</span> <span class="nx">url</span><span class="p">]);</span> + <span class="nx">phantom</span><span class="p">.</span><span class="nx">stdout</span><span class="p">.</span><span class="nx">setEncoding</span><span class="p">(</span><span class="s1">'utf8'</span><span class="p">);</span> + <span class="c1">// Our phantom.js script is simply logging the output and</span> + <span class="c1">// we access it here through stdout</span> + <span class="nx">phantom</span><span class="p">.</span><span class="nx">stdout</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'data'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">content</span> <span class="o">+=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span> + <span class="p">});</span> + <span class="nx">phantom</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'exit'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">code</span><span class="p">)</span> <span class="p">{</span> + <span class="k">if</span> <span class="p">(</span><span class="nx">code</span> <span class="o">!==</span> <span class="mi">0</span><span class="p">)</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="s1">'We have an error'</span><span class="p">);</span> + <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> + <span class="c1">// once our phantom.js script exits, let's call out call back</span> + <span class="c1">// which outputs the contents to the page</span> + <span class="nx">callback</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> +<span class="p">};</span> -<p>```javascript -// web.js</p> - -<p>// Express is our web server that can handle request -var express = require(‘express’); -var app = express();</p> - -<p>var getContent = function(url, callback) { - var content = ‘’; - // Here we spawn a phantom.js process, the first element of the - // array is our phantomjs script and the second element is our url - var phantom = require(‘child_process’).spawn(‘phantomjs’, [‘phantom-server.js’, url]); - phantom.stdout.setEncoding(‘utf8’); - // Our phantom.js script is simply logging the output and - // we access it here through stdout - phantom.stdout.on(‘data’, function(data) { - content += data.toString(); - }); - phantom.on(‘exit’, function(code) { - if (code !== 0) { - console.log(‘We have an error’); - } else { - // once our phantom.js script exits, let’s call out call back - // which outputs the contents to the page - callback(content); - } - }); -};</p> - -<p>var respond = function (req, res) { - // Because we use [P] in htaccess we have access to this header - url = ‘http://’ + req.headers[‘x-forwarded-host’] + req.params[0]; - getContent(url, function (content) { - res.send(content); - }); -}</p> - -<p>app.get(/(.*)/, respond); -app.listen(3000); -```</p> - -<p>The script below is <code>phantom-server.js</code> and will be in charge of fully rendering the content. We don’t return the content until the page is fully rendered. We hook into the resources listener to do this.</p> +<span class="kd">var</span> <span class="nx">respond</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span> + <span class="c1">// Because we use [P] in htaccess we have access to this header</span> + <span class="nx">url</span> <span class="o">=</span> <span class="s1">'http://'</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">headers</span><span class="p">[</span><span class="s1">'x-forwarded-host'</span><span class="p">]</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">params</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span> + <span class="nx">getContent</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">content</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span> + <span class="p">});</span> +<span class="p">}</span> + +<span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="sr">/(.*)/</span><span class="p">,</span> <span class="nx">respond</span><span class="p">);</span> +<span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">3000</span><span class="p">);</span> +</code></pre></div> +<p>The script below is <code>phantom-server.js</code> and will be in charge of fully rendering the content. We don't return the content until the page is fully rendered. We hook into the resources listener to do this.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">page</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'webpage'</span><span class="p">).</span><span class="nx">create</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">system</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'system'</span><span class="p">);</span> @@ -184,9 +176,9 @@ app.listen(3000); <span class="c1">// Let us check to see if the page is finished rendering</span> <span class="kd">var</span> <span class="nx">checkCompleteInterval</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="nx">checkComplete</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span></code></pre></div> -<p>Once we have this server up and running we just redirect bots to the server in our client’s web server configuration.</p> +<p>Once we have this server up and running we just redirect bots to the server in our client's web server configuration.</p> -<h2 id="redirecting-bots">Redirecting bots</h2> +<h2>Redirecting bots</h2> <p>If you are using apache we can edit out <code>.htaccess</code> such that Google requests are proxied to our middle man phantom.js server.</p> @@ -196,8 +188,8 @@ app.listen(3000); <p>We could also include other <code>RewriteCond</code>, such as <code>user agent</code> to redirect other search engines we wish to be indexed on.</p> -<p>Though Google won’t use <code>_escaped_fragment_</code> unless we tell it to by either including a meta tag; -<code><meta name="fragment" content="!"></code> +<p>Though Google won't use <code>_escaped_fragment_</code> unless we tell it to by either including a meta tag; +<code><meta name="fragment" content="!"></code> or using <code>#!</code> URLs in our links.</p> @@ -207,31 +199,32 @@ using <code>#!</code> URLs in our links.</p> <p>This has been tested with Google Webmasters fetch tool. Make sure you include <code>#!</code> on your URLs when using the fetch tool.</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://seo.apiengine.io">Open source node.js Seo Server</a></li> +<li><a href="http://seo.apiengine.io">Open source node.js Seo Server</a></li> </ul> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -244,9 +237,7 @@ using <code>#!</code> URLs in our links.</p> (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/videos.html b/_site/videos.html index 8dc51fa..9146cc6 100644 --- a/_site/videos.html +++ b/_site/videos.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,26 +54,27 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> <p><iframe src="https://gumroad.com/l/yYwC" style="overflow: hidden; border: 0; width: 100%; height: 600px;"></iframe></p> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/what-is-a-collection/index.html b/_site/what-is-a-collection/index.html index b94a147..99c5de4 100644 --- a/_site/what-is-a-collection/index.html +++ b/_site/what-is-a-collection/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,48 +54,43 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - - - -<div id="post"> -<h1 id="what-is-a-collection">What is a collection?</h1> + <div id="post"> +<h1>What is a collection?</h1> <p>Backbone collections are simply an ordered set of <a href="/what-is-a-model">models</a>. Such that it can be used in situations such as;</p> <ul> - <li>Model: Student, Collection: ClassStudents</li> - <li>Model: Todo Item, Collection: Todo List</li> - <li>Model: Animal, Collection: Zoo</li> +<li>Model: Student, Collection: ClassStudents</li> +<li>Model: Todo Item, Collection: Todo List</li> +<li>Model: Animal, 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> +<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> @@ -108,54 +102,54 @@ <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="nx">model</span><span class="o">:</span> <span class="nx">Song</span> <span class="p">});</span></code></pre></div> -<h2 id="building-a-collection">Building a collection</h2> +<h2>Building a collection</h2> <p>Now we are going to populate a collection with some useful data.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="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">"Not specified"</span><span class="p">,</span> - <span class="nx">artist</span><span class="o">:</span> <span class="s2">"Not specified"</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">"Not specified"</span><span class="p">,</span> + <span class="nx">artist</span><span class="o">:</span> <span class="s2">"Not specified"</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">"Music is the answer"</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">"How Bizarre"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"OMC"</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">"Sexual Healing"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"Marvin Gaye"</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">"Talk It Over In Bed"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"OMC"</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">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> + <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">"How Bizarre"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"OMC"</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">"Sexual Healing"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"Marvin Gaye"</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">"Talk It Over In Bed"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"OMC"</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> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -168,9 +162,7 @@ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/what-is-a-model/index.html b/_site/what-is-a-model/index.html index 420b29e..c1f9152 100644 --- a/_site/what-is-a-model/index.html +++ b/_site/what-is-a-model/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,41 +54,36 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - + <div id="post"> +<h1>What is a model?</h1> - -<div id="post"> -<h1 id="what-is-a-model">What is a model?</h1> - -<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a> is so diluted that it’s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> +<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a> is so diluted that it's hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> <blockquote> - <p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> +<p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> </blockquote> -<p>So for the purpose of the tutorial let’s create a model.</p> +<p>So for the purpose of the tutorial let's create a model.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Person</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> @@ -99,9 +93,9 @@ <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span></code></pre></div> -<p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.</p> +<p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don't have to include it in your model declaration but you will find yourself using it more often than not.</p> -<h2 id="setting-attributes">Setting attributes</h2> +<h2>Setting attributes</h2> <p>Now we want to pass some parameters when we create an instance of our model.</p> @@ -118,7 +112,7 @@ <p>So passing a JavaScript object to our constructor is the same as calling <em>model.set()</em>. Now that these models have attributes set we need to be able to retrieve them. </p> -<h2 id="getting-attributes">Getting attributes</h2> +<h2>Getting attributes</h2> <p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> @@ -134,9 +128,9 @@ <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"name"</span><span class="p">);</span> <span class="c1">// "Thomas"</span> <span class="kd">var</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"child"</span><span class="p">);</span> <span class="c1">// 'Ryan'</span></code></pre></div> -<h2 id="setting-model-defaults">Setting model defaults</h2> +<h2>Setting model defaults</h2> -<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.</p> +<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name 'defaults' in your model declaration.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Person</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> @@ -155,7 +149,7 @@ <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"name"</span><span class="p">);</span> <span class="c1">// "Thomas"</span> <span class="kd">var</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"child"</span><span class="p">);</span> <span class="c1">// 'Ryan'</span></code></pre></div> -<h2 id="manipulating-model-attributes">Manipulating model attributes</h2> +<h2>Manipulating model attributes</h2> <p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> @@ -179,9 +173,9 @@ <p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time. </p> -<h2 id="listening-for-changes-to-the-model">Listening for changes to the model</h2> +<h2>Listening for changes to the model</h2> -<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our “person” changes we will alert their new name.</p> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our "person" changes we will alert their new name.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Person</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> @@ -200,9 +194,9 @@ <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span> <span class="s1">'Stewie Griffin'</span><span class="p">});</span> <span class="c1">// This triggers a change and will alert()</span></code></pre></div> -<p>So we can bind the change listener to individual attributes or if we like simply ‘<em>this.on(“change”, function(model){});</em>’ to listen for changes to all attributes of the model.</p> +<p>So we can bind the change listener to individual attributes or if we like simply '<em>this.on("change", function(model){});</em>' to listen for changes to all attributes of the model.</p> -<h2 id="interacting-with-the-server">Interacting with the server</h2> +<h2>Interacting with the server</h2> <p>Models are used to represent data from your server and actions you perform on them will be translated to RESTful operations.</p> @@ -223,7 +217,7 @@ <span class="p">});</span></code></pre></div> -<h3 id="creating-a-new-model">Creating a new model</h3> +<h3>Creating a new model</h3> <p>If we wish to create a new user on the server then we will instantiate a new UserModel and call <code>save</code>. If the <code>id</code> attribute of the model is <code>null</code>, Backbone.js will send a POST request to the urlRoot of the server. </p> @@ -251,13 +245,13 @@ <p>Our table should now have the values</p> -<p>1, ‘Thomas’, ‘thomasalwyndavis@gmail.com’</p> +<p>1, 'Thomas', 'thomasalwyndavis@gmail.com'</p> -<h3 id="getting-a-model">Getting a model</h3> +<h3>Getting a model</h3> <p>Now that we have saved a new user model, we can retrieve it from the server. We know that the <code>id</code> is 1 from the above example.</p> -<p>If we instantiate a model with an <code>id</code>, Backbone.js will automatically perform a get request to the urlRoot + ‘/id’ (conforming to RESTful conventions)</p> +<p>If we instantiate a model with an <code>id</code>, Backbone.js will automatically perform a get request to the urlRoot + '/id' (conforming to RESTful conventions)</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Here we have set the `id` of the model</span> <span class="kd">var</span> <span class="nx">user</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Usermodel</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="mi">1</span><span class="p">});</span> @@ -270,7 +264,7 @@ <span class="p">}</span> <span class="p">})</span></code></pre></div> -<h3 id="updating-a-model">Updating a model</h3> +<h3>Updating a model</h3> <p>Now that we have a model that exist on the server we can perform an update using a PUT request. We will use the <code>save</code> api call which is intelligent and will send a PUT request instead of a POST request if an <code>id</code> is present(conforming to RESTful conventions)</p> @@ -291,7 +285,7 @@ We will use the <code>save</code> api call which is intelligent and will send a <span class="p">}</span> <span class="p">});</span></code></pre></div> -<h3 id="deleting-a-model">Deleting a model</h3> +<h3>Deleting a model</h3> <p>When a model has an <code>id</code> we know that it exist on the server, so if we wish to remove it from the server we can call <code>destroy</code>. <code>destroy</code> will fire off a DELETE /user/id (conforming to RESTful conventions).</p> @@ -310,7 +304,7 @@ We will use the <code>save</code> api call which is intelligent and will send a <span class="p">}</span> <span class="p">});</span></code></pre></div> -<h3 id="tips-and-tricks">Tips and Tricks</h3> +<h3>Tips and Tricks</h3> <p><em>Get all the current attributes</em></p> @@ -348,31 +342,32 @@ We will use the <code>save</code> api call which is intelligent and will send a <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Dr Manhatten"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> <span class="c1">// God have mercy on our souls</span></code></pre></div> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> +<li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> </ul> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -385,9 +380,7 @@ We will use the <code>save</code> api call which is intelligent and will send a (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/what-is-a-router/index.html b/_site/what-is-a-router/index.html index 521191a..0356bd0 100644 --- a/_site/what-is-a-router/index.html +++ b/_site/what-is-a-router/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,39 +54,34 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - + <div id="post"> +<h1>What is a router?</h1> - -<div id="post"> -<h1 id="what-is-a-router">What is a router?</h1> - -<p>Backbone routers are used for routing your applications URL’s when using hash tags(#). In the traditional MVC sense they don’t necessarily fit the semantics and if you have read “<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>” it will elaborate on this point. Though a Backbone “router” is still very useful for any application/feature that needs URL routing/history capabilities. </p> +<p>Backbone routers are used for routing your applications URL's when using hash tags(#). In the traditional MVC sense they don't necessarily fit the semantics and if you have read "<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>" it will elaborate on this point. Though a Backbone "router" is still very useful for any application/feature that needs URL routing/history capabilities. </p> <p>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.</p> -<p>Also note that routes interpret 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)</p> +<p>Also note that routes interpret 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)</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script></span> <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> @@ -113,9 +107,9 @@ <p><em>Notice the change in the url</em></p> -<h2 id="dynamic-routing">Dynamic Routing</h2> +<h2>Dynamic Routing</h2> -<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.</p> +<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.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script></span> <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> @@ -144,13 +138,13 @@ <p><em>Notice the change in the url</em></p> -<h2 id="dynamic-routing-cont-params-and-splats">Dynamic Routing Cont. “:params” and “*splats”</h2> +<h2>Dynamic Routing Cont. ":params" and "*splats"</h2> -<p>Backbone uses two styles of variables when implementing routes. First there are “:params” which match any URL components between slashes. Then there are “<em>splats” which match any number of URL components. Note that due to the nature of a “</em>splat” it will always be the last variable in your URL as it will match any and all components.</p> +<p>Backbone uses two styles of variables when implementing routes. First there are ":params" which match any URL components between slashes. Then there are "<em>splats" which match any number of URL components. Note that due to the nature of a "</em>splat" it will always be the last variable in your URL as it will match any and all components.</p> -<p>Any “*splats” or “:params” in route definitions are passed as arguments (in respective order) to the associated function. A route defined as “/:route/:action” will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)</p> +<p>Any "*splats" or ":params" in route definitions are passed as arguments (in respective order) to the associated function. A route defined as "/:route/:action" will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)</p> -<p>Here are some examples of using “:params” and “*splats”</p> +<p>Here are some examples of using ":params" and "*splats"</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> @@ -175,42 +169,44 @@ <span class="nx">alert</span><span class="p">(</span><span class="nx">route</span> <span class="o">+</span> <span class="s2">"_"</span> <span class="o">+</span> <span class="nx">action</span><span class="p">);</span> <span class="c1">// dashboard_graph </span> <span class="p">});</span></code></pre></div> -<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”. Also check out <a href="http://seo.apiengine.io">Seo Server</a></p> +<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". Also check out <a href="http://seo.apiengine.io">Seo Server</a></p> <p>Remember to do a pull request for any errors you come across.</p> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> + <ul> - <li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li> - <li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li> +<li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li> +<li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="http://schistad.info">Herman Schistad</a> - (Backbone 0.5 rename from Controller to Router)</li> - <li><a href="http://paulirish.com">Paul Irish</a></li> +<li><a href="http://schistad.info">Herman Schistad</a> - (Backbone 0.5 rename from Controller to Router)</li> +<li><a href="http://paulirish.com">Paul Irish</a></li> </ul> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -223,9 +219,7 @@ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/what-is-a-view/index.html b/_site/what-is-a-view/index.html index 9d5bb5f..40cfd11 100644 --- a/_site/what-is-a-view/index.html +++ b/_site/what-is-a-view/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,37 +54,32 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - - - -<div id="post"> -<h1 id="what-is-a-view">What is a view?</h1> + <div id="post"> +<h1>What is a view?</h1> -<p>Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically <a href="http://documentcloud.github.com/underscore/#template">Underscore.js’s _.template</a>.</p> +<p>Backbone views are used to reflect what your applications' data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically <a href="http://documentcloud.github.com/underscore/#template">Underscore.js's _.template</a>.</p> -<p>We will be using <a href="http://jquery.com/">jQuery 1.8.2</a> as our DOM manipulator. It’s possible to use other libraries such as <a href="http://mootools.net/">MooTools</a> or <a href="http://sizzlejs.com/">Sizzle</a>, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.</p> +<p>We will be using <a href="http://jquery.com/">jQuery 1.8.2</a> as our DOM manipulator. It's possible to use other libraries such as <a href="http://mootools.net/">MooTools</a> or <a href="http://sizzlejs.com/">Sizzle</a>, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.</p> <p>For the purposes of this demonstration, we will be implementing a search box. <a href="http://jsfiddle.net/tBS4X/1/">A live example</a> can be found on jsFiddle.</p> @@ -99,31 +93,31 @@ <span class="c1">// Consider it the constructor of the class.</span> <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">();</span></code></pre></div> -<h2 id="the-el-property">The “el” property</h2> +<h2>The "el" property</h2> -<p>The “el” property references the DOM object created in the browser. Every Backbone.js view has an “el” property, and if it not defined, Backbone.js will construct its own, which is an empty div element.</p> +<p>The "el" property references the DOM object created in the browser. Every Backbone.js view has an "el" property, and if it not defined, Backbone.js will construct its own, which is an empty div element.</p> -<p>Let us set our view’s “el” property to div#search_container, effectively making Backbone.View the owner of the DOM element.</p> +<p>Let us set our view's "el" property to div#search_container, effectively making Backbone.View the owner of the DOM element.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"search_container"</span><span class="nt">></div></span> <span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span> - <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Alerts suck."</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">"#search_container"</span><span class="p">)</span> <span class="p">});</span> + <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">"Alerts suck."</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">"#search_container"</span><span class="p">)</span> <span class="p">});</span> <span class="nt"></script></span></code></pre></div> <p><em>Note: Keep in mind that this binds the container element. Any events we trigger must be in this element.</em></p> -<h2 id="loading-a-template">Loading a template</h2> +<h2>Loading a template</h2> -<p>Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to <a href="http://documentcloud.github.com/underscore/">Underscore.js’s documentation</a> for more information.</p> +<p>Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to <a href="http://documentcloud.github.com/underscore/">Underscore.js's documentation</a> for more information.</p> -<p>Let us implement a “render()” function and call it when the view is initialized. The “render()” function will load our template into the view’s “el” property using jQuery.</p> +<p>Let us implement a "render()" function and call it when the view is initialized. The "render()" function will load our template into the view's "el" property using jQuery.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"search_template"</span><span class="nt">></span> <span class="o"><</span><span class="nx">label</span><span class="o">></span><span class="nx">Search</span><span class="o"><</span><span class="err">/label></span> @@ -134,26 +128,26 @@ <span class="nt"><div</span> <span class="na">id=</span><span class="s">"search_container"</span><span class="nt">></div></span> <span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span> - <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> - <span class="p">},</span> - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="c1">// Compile the template using underscore</span> - <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_template"</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> - <span class="c1">// Load the compiled HTML into the Backbone "el"</span> - <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">"#search_container"</span><span class="p">)</span> <span class="p">});</span> + <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_template"</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone "el"</span> + <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">"#search_container"</span><span class="p">)</span> <span class="p">});</span> <span class="nt"></script></span></code></pre></div> <p><em>Tip: Place all your templates in a file and serve them from a CDN. This ensures your users will always have your application cached.</em></p> -<h2 id="listening-for-events">Listening for events</h2> +<h2>Listening for events</h2> -<p>To attach a listener to our view, we use the “events” attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the “el” property. Let us attach a “click” listener to our button.</p> +<p>To attach a listener to our view, we use the "events" attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the "el" property. Let us attach a "click" listener to our button.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"search_template"</span><span class="nt">></span> <span class="o"><</span><span class="nx">label</span><span class="o">></span><span class="nx">Search</span><span class="o"><</span><span class="err">/label></span> @@ -184,7 +178,7 @@ <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">"#search_container"</span><span class="p">)</span> <span class="p">});</span> <span class="nt"></script></span></code></pre></div> -<h2 id="tips-and-tricks">Tips and Tricks</h2> +<h2>Tips and Tricks</h2> <p><em>Using template variables</em></p> @@ -198,64 +192,65 @@ <span class="nt"><div</span> <span class="na">id=</span><span class="s">"search_container"</span><span class="nt">></div></span> <span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span> - <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> - <span class="p">},</span> - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="c1">//Pass variables in using Underscore.js Template</span> - <span class="kd">var</span> <span class="nx">variables</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">search_label</span><span class="o">:</span> <span class="s2">"My Search"</span> <span class="p">};</span> - <span class="c1">// Compile the template using underscore</span> - <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_template"</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="nx">variables</span> <span class="p">);</span> - <span class="c1">// Load the compiled HTML into the Backbone "el"</span> - <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> - <span class="p">},</span> - <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> - <span class="s2">"click input[type=button]"</span><span class="o">:</span> <span class="s2">"doSearch"</span> - <span class="p">},</span> - <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> - <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> - <span class="nx">alert</span><span class="p">(</span> <span class="s2">"Search for "</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_input"</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">"#search_container"</span><span class="p">)</span> <span class="p">});</span> + <span class="nx">SearchView</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">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">//Pass variables in using Underscore.js Template</span> + <span class="kd">var</span> <span class="nx">variables</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">search_label</span><span class="o">:</span> <span class="s2">"My Search"</span> <span class="p">};</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_template"</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="nx">variables</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone "el"</span> + <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">"click input[type=button]"</span><span class="o">:</span> <span class="s2">"doSearch"</span> + <span class="p">},</span> + <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> + <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">"Search for "</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_input"</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</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">"#search_container"</span><span class="p">)</span> <span class="p">});</span> <span class="nt"></script></span></code></pre></div> -<h3 id="relevant-links">Relevant Links</h3> +<h3>Relevant Links</h3> <ul> - <li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google API</a></li> - <li><a href="http://jsfiddle.net/thomas/C9wew/4/">This examples exact code on jsfiddle.net</a></li> - <li><a href="http://jsfiddle.net/thomas/dKK9Y/6/">Another semi-complete example on jsFiddle</a></li> +<li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google API</a></li> +<li><a href="http://jsfiddle.net/thomas/C9wew/4/">This examples exact code on jsfiddle.net</a></li> +<li><a href="http://jsfiddle.net/thomas/dKK9Y/6/">Another semi-complete example on jsFiddle</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/zaeleus">Michael Macias</a></li> - <li><a href="https://github.com/lawnday">Alex Lande</a></li> +<li><a href="https://github.com/zaeleus">Michael Macias</a></li> +<li><a href="https://github.com/lawnday">Alex Lande</a></li> </ul> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -268,9 +263,7 @@ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/_site/why-would-you-use-backbone/index.html b/_site/why-would-you-use-backbone/index.html index 214c8c4..8e0f463 100644 --- a/_site/why-would-you-use-backbone/index.html +++ b/_site/why-would-you-use-backbone/index.html @@ -39,12 +39,11 @@ </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> - <li class=""><a href="/">Home</a></li> + <li class=""><a href="/">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li> - <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li> <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li> </ul> </div> @@ -55,82 +54,78 @@ <div class="container"> <div class="row"> - <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">About</h3> </div> + <div class="panel-body"> + <div class="col-lg-4"> <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> - </div> <div class="col-lg-8"> <h3 >Backbone.js Beginner Video Tutorial</h3> <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a> </div> + + </div> + </div> </div> - <div class="container"> - <div class="panel"> - <div class="panel-heading"> - <h3 class="panel-title">Tutorial</h3> - </div> - - - -<div id="post"> -<h1 id="why-do-you-need-backbonejs">Why do you need Backbone.js?</h1> + <div id="post"> +<h1>Why do you need Backbone.js?</h1> <p>Building single-page web apps or complicated user interfaces will get extremely difficult by simply using <a href="http://jquery.com">jQuery</a> or <a href="http://mootools.net">MooTools</a>. 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.</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 structuring your application but you miss out on the benefits of the open source community.</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 structuring your application but you miss out on the benefits of the open source community.</p> -<h2 id="why-single-page-applications-are-the-future">Why single page applications are the future</h2> +<h2>Why single page applications are the future</h2> <p>Backbone.js enforces that communication to the server should be done entirely through a RESTful API. The web is currently trending such that all data/content will be exposed through an API. This is because the browser is no longer the only client, we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc.</p> -<h2 id="so-how-does-backbonejs-help">So how does Backbone.js help?</h2> +<h2>So how does Backbone.js help?</h2> <p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. It is essentially MVC for the client and allows you to make your code modular. 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> -<h2 id="other-frameworks">Other frameworks</h2> +<h2>Other frameworks</h2> <p>If you are looking for comparisons to build your single page application, try some of these resourceful links.</p> <ul> - <li><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/">A feature comparison of different frontend frameworks</a></li> - <li><a href="http://addyosmani.github.com/todomvc/">Todo MVC - Todo list implemented in the many different types of frontend frameworks</a></li> +<li><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/">A feature comparison of different frontend frameworks</a></li> +<li><a href="http://addyosmani.github.com/todomvc/">Todo MVC - Todo list implemented in the many different types of frontend frameworks</a></li> </ul> -<h3 id="contributors">Contributors</h3> +<h3>Contributors</h3> <ul> - <li><a href="https://github.com/FND">FND</a></li> +<li><a href="https://github.com/FND">FND</a></li> </ul> <p><strong>If you questions regarding why you should choose Backbone.js as your framework, please leave a comment below</strong></p> </div> - </div> - - +<hr /> +<div class="row"> +<div class="col-lg-4 col-lg-offset-4"> + <div style="text-align: center;"> + <img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;"> + <h2>Thomas Davis</h2> + <p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p> + <p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p> +<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div> +<br /> + <a href="https://github.com/thomasdavis">github.com/thomasdavis</a> + </div> + </div> + </div> +<hr /> + + +<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script> -<div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Authored by Thomas Davis</h3> - </div> - <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a> - <a href="https://twitter.com/neutralthoughts">Twitter</a> - <a href="https://github.com/thomasdavis">Github</a> -<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a> -<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</div> -<div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Comments</h3> - </div> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ @@ -143,9 +138,7 @@ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> -</div> - </div> </div> <script src="//static.getclicky.com/js" type="text/javascript"></script> diff --git a/css/style.css b/css/style.css index 3dd5ca0..815044a 100644 --- a/css/style.css +++ b/css/style.css @@ -18,4 +18,8 @@ body { color: #333; font-size: 14px !important; } -*/
\ No newline at end of file +*/ + +pre { + background-color: #49483e !important; +}
\ No newline at end of file diff --git a/css/syntax.css b/css/syntax.css index 2774b76..0e24439 100644 --- a/css/syntax.css +++ b/css/syntax.css @@ -1,60 +1,59 @@ -.highlight { background: #ffffff; } -.highlight .c { color: #999988; font-style: italic } /* Comment */ -.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { font-weight: bold } /* Keyword */ -.highlight .o { font-weight: bold } /* Operator */ -.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ -.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #aa0000 } /* Generic.Error */ -.highlight .gh { color: #999999 } /* Generic.Heading */ -.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.highlight .go { color: #888888 } /* Generic.Output */ -.highlight .gp { color: #555555 } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ -.highlight .gt { color: #aa0000 } /* Generic.Traceback */ -.highlight .kc { font-weight: bold } /* Keyword.Constant */ -.highlight .kd { font-weight: bold } /* Keyword.Declaration */ -.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #d14 } /* Literal.String */ -.highlight .na { color: #008080 } /* Name.Attribute */ -.highlight .nb { color: #0086B3 } /* Name.Builtin */ -.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ -.highlight .no { color: #008080 } /* Name.Constant */ -.highlight .ni { color: #800080 } /* Name.Entity */ -.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ -.highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #000080 } /* Name.Tag */ -.highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #009999 } /* Literal.Number.Float */ -.highlight .mh { color: #009999 } /* Literal.Number.Hex */ -.highlight .mi { color: #009999 } /* Literal.Number.Integer */ -.highlight .mo { color: #009999 } /* Literal.Number.Oct */ -.highlight .sb { color: #d14 } /* Literal.String.Backtick */ -.highlight .sc { color: #d14 } /* Literal.String.Char */ -.highlight .sd { color: #d14 } /* Literal.String.Doc */ -.highlight .s2 { color: #d14 } /* Literal.String.Double */ -.highlight .se { color: #d14 } /* Literal.String.Escape */ -.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ -.highlight .si { color: #d14 } /* Literal.String.Interpol */ -.highlight .sx { color: #d14 } /* Literal.String.Other */ -.highlight .sr { color: #009926 } /* Literal.String.Regex */ -.highlight .s1 { color: #d14 } /* Literal.String.Single */ -.highlight .ss { color: #990073 } /* Literal.String.Symbol */ -.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #008080 } /* Name.Variable.Class */ -.highlight .vg { color: #008080 } /* Name.Variable.Global */ -.highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ +.highlight { background-color: #49483e } +.c { color: #75715e } /* Comment */ +.err { color: #960050; background-color: #1e0010 } /* Error */ +.k { color: #66d9ef } /* Keyword */ +.l { color: #ae81ff } /* Literal */ +.n { color: #f8f8f2 } /* Name */ +.o { color: #f92672 } /* Operator */ +.p { color: #f8f8f2 } /* Punctuation */ +.cm { color: #75715e } /* Comment.Multiline */ +.cp { color: #75715e } /* Comment.Preproc */ +.c1 { color: #75715e } /* Comment.Single */ +.cs { color: #75715e } /* Comment.Special */ +.ge { font-style: italic } /* Generic.Emph */ +.gs { font-weight: bold } /* Generic.Strong */ +.kc { color: #66d9ef } /* Keyword.Constant */ +.kd { color: #66d9ef } /* Keyword.Declaration */ +.kn { color: #f92672 } /* Keyword.Namespace */ +.kp { color: #66d9ef } /* Keyword.Pseudo */ +.kr { color: #66d9ef } /* Keyword.Reserved */ +.kt { color: #66d9ef } /* Keyword.Type */ +.ld { color: #e6db74 } /* Literal.Date */ +.m { color: #ae81ff } /* Literal.Number */ +.s { color: #e6db74 } /* Literal.String */ +.na { color: #a6e22e } /* Name.Attribute */ +.nb { color: #f8f8f2 } /* Name.Builtin */ +.nc { color: #a6e22e } /* Name.Class */ +.no { color: #66d9ef } /* Name.Constant */ +.nd { color: #a6e22e } /* Name.Decorator */ +.ni { color: #f8f8f2 } /* Name.Entity */ +.ne { color: #a6e22e } /* Name.Exception */ +.nf { color: #a6e22e } /* Name.Function */ +.nl { color: #f8f8f2 } /* Name.Label */ +.nn { color: #f8f8f2 } /* Name.Namespace */ +.nx { color: #a6e22e } /* Name.Other */ +.py { color: #f8f8f2 } /* Name.Property */ +.nt { color: #f92672 } /* Name.Tag */ +.nv { color: #f8f8f2 } /* Name.Variable */ +.ow { color: #f92672 } /* Operator.Word */ +.w { color: #f8f8f2 } /* Text.Whitespace */ +.mf { color: #ae81ff } /* Literal.Number.Float */ +.mh { color: #ae81ff } /* Literal.Number.Hex */ +.mi { color: #ae81ff } /* Literal.Number.Integer */ +.mo { color: #ae81ff } /* Literal.Number.Oct */ +.sb { color: #e6db74 } /* Literal.String.Backtick */ +.sc { color: #e6db74 } /* Literal.String.Char */ +.sd { color: #e6db74 } /* Literal.String.Doc */ +.s2 { color: #e6db74 } /* Literal.String.Double */ +.se { color: #ae81ff } /* Literal.String.Escape */ +.sh { color: #e6db74 } /* Literal.String.Heredoc */ +.si { color: #e6db74 } /* Literal.String.Interpol */ +.sx { color: #e6db74 } /* Literal.String.Other */ +.sr { color: #e6db74 } /* Literal.String.Regex */ +.s1 { color: #e6db74 } /* Literal.String.Single */ +.ss { color: #e6db74 } /* Literal.String.Symbol */ +.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ +.vc { color: #f8f8f2 } /* Name.Variable.Class */ +.vg { color: #f8f8f2 } /* Name.Variable.Global */ +.vi { color: #f8f8f2 } /* Name.Variable.Instance */ +.il { color: #ae81ff } /* Literal.Number.Integer.Long */
\ No newline at end of file @@ -7,7 +7,7 @@ title: <div class="row" > - <div class="col-lg-4"> + <div class="col-lg-6"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Beginners</h3> @@ -21,7 +21,7 @@ title: </div> </div> </div> - <div class="col-lg-4"> + <div class="col-lg-6"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Intermediate</h3> @@ -35,14 +35,6 @@ title: </div> </div> </div> - <div class="col-lg-4"> - <div class="panel panel-danger"> - <div class="panel-heading"> - <h3 class="panel-title">Advanced</h3> - </div> - <p>Coming soon...</p> - </div> - </div> </div> @@ -58,7 +50,7 @@ title: <div class="row" > <div class="col-lg-6"> - <div class="panel"> + <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">External Tutorials</h3> </div> @@ -71,17 +63,15 @@ title: </div> </div> <div class="col-lg-6"> - <div class="panel"> + <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Example Apps</h3> </div> <div class="list-group"> <a class="list-group-item" href="http://www.dronehire.org">DroneHire.org - 100% built with Backbone.js</a> <a class="list-group-item" href="http://kaleistyleguide.com/">Kalei - A living CSS styleguide</a> - <a class="list-group-item" href="http://apiengine.io">ApiEngine.io - Collaborativly build RESTful API's.</a> <a class="list-group-item" href="https://github.com/alessioalex/ClientManager" alt="Sample application built with Backbone, RequireJS, Twitter Bootstrap on the client and Node.js (Express.js, Mongoose) on the server.">ClientManager - Sample application</a> <a class="list-group-item" href="http://www.clevertim.com">Clevertim CRM - A simple CRM</a> - <a class="list-group-item" href="http://forum.dronehire.org">Drone hire forum</a> </div> </div> </div> |