A

thomasdavis · Jan 25, 2012 · a721fc1 · a721fc1
1 parent ca47795
commit a721fc1
Show file tree

Hide file tree

Showing 16 changed files with 398 additions and 136 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,14 +10,15 @@
 <body>
 
 <div class="container">
-  <div class="wrapper span-22 push-1">
-    <div class="header span-20 push-1">
+	    <div class="header span-20 push-1">
       <div class="span-14">
         <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
     <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
 <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
       </div>
     </div>
+  <div class="wrapper span-22 push-1">
+
     <div class="page span-20 push-1">
 {{ content }}
   </div>

diff --git a/_site/2011/02/01/backbone-introduction.html b/_site/2011/02/01/backbone-introduction.html
@@ -1,27 +1,27 @@
-
-
-
-
 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
 <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
    <title>Thomas Davis</title>   <meta name="author" content="Thomas Davis" />
+  <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
 
    <link rel="stylesheet" href="/css/styles.css" type="text/css" />
 </head>
 <body>
 
 <div class="container">
-  <div class="wrapper span-22 push-1">
-    <div class="header span-20 push-1">
+	    <div class="header span-20 push-1">
       <div class="span-14">
         <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
     <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
 <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
       </div>
     </div>
+  <div class="wrapper span-22 push-1">
+
     <div class="page span-20 push-1">
-<a href="/">Back to home</a
+<a href="/">Back to home</a>
+<br />
 <p><img src="/images/backbone.png" alt="" /></p>
 <h2>Backbone.js Tutorial &#8211; by noob for noobs</h2>
 <p>The official <a href="http://documentcloud.github.com/backbone/">website</a> describes Backbone.js as a library to supply structure to Javascript heavy web applications.    After using Backbone.js for a week I could never see myself building any sort of Javascript functionality regardless of size without using Backbone.js or alternatives.</p>
@@ -36,26 +36,95 @@ <h3>Understanding the Model View Controller Paradigm</h3>
 <h3>Getting started</h3>
 <p>I am going to run you through a basic tutorial that should get you on the right path if you are a bit lost like I was when I started.</p>
 <p>First of all we are going to just setup a basic page and include Backbone.js and Underscore.js(a dependency of Backbone.js)</p>
-<p>Liquid error: undefined method `join&#8217; for #<String:0x1016544e0></p>
+<div class="highlight"><pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
+<span class="nt">&lt;html&gt;</span>
+<span class="nt">&lt;head&gt;</span>
+    <span class="nt">&lt;title&gt;</span>I have a back bone<span class="nt">&lt;/title&gt;</span>
+<span class="nt">&lt;/head&gt;</span>
+<span class="nt">&lt;body&gt;</span>
+    <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">&quot;add-friend&quot;</span><span class="nt">&gt;</span>Add Friend<span class="nt">&lt;/button&gt;</span>
+    <span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;friends-list&quot;</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;/ul&gt;</span>
+    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;/body&gt;</span>
+<span class="nt">&lt;/html&gt;</span>
+</code></pre>
+</div>
 <p>For those of you who are lazy the full example can be viewed <a href="http://thomasdavis.github.com/examples/backbone-101/">here</a> and downloaded <br />
 <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101">here</a></p>
 <h3>Setting up the main view</h3>
 <p>Each view has a <span class="caps">HTML</span> <span class="caps">DOM</span> element associated with it. You can read more about why <a href="http://documentcloud.github.com/backbone/#View-el">here</a> .<br />
 Because this is our master view we are just going to associate the view with our page body in this example.</p>
 <p>If the el(element) specified does not exist, Backbone.js will attempt to create it.</p>
-<p>Liquid error: undefined method `join&#8217; for #<String:0x101654030></p>
+<div class="highlight"><pre><code class="javascript"><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
+<span class="nb">window</span><span class="p">.</span><span class="nx">AppView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+  <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;body&quot;</span><span class="p">),</span>
+  <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
+    <span class="s2">&quot;click #add-friend&quot;</span><span class="o">:</span>  <span class="s2">&quot;showPrompt&quot;</span><span class="p">,</span>
+  <span class="p">},</span>
+  <span class="nx">showPrompt</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">friend_name</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">&quot;Who is your friend?&quot;</span><span class="p">);</span>
+  <span class="p">}</span>
+<span class="p">});</span>
+<span class="kd">var</span> <span class="nx">appview</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppView</span><span class="p">;</span>
+<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
+</code></pre>
+</div>
 <p>So we just wrapped our Backbone code with jQuery to make sure the page has loaded correctly. Then we create our main application view by extending Backbone and passing a <span class="caps">JSON</span> object with our options. We specified &#8220;body&#8221; to be the associated element for this view.</p>
 <p>The events property is very powerful and lets us attach listeners to our views.   In the example above we have attached a click listener to our button with id &#8220;add-friend&#8221;. Read more about events <a href="http://documentcloud.github.com/backbone/#View-delegateEvents">here</a></p>
 <p>After we have setup our AppView, we can just call to initiate it at anytime.</p>
 <h3>Collecting the Models</h3>
 <p>A Model in Backbone.js can represent any entity you like and in this case we want it to represent a friend. We can easily create friend Models but without any structure they become fairly useless to us because we can&#8217;t iterate through them unless they are grouped together.   So Backbone.js implements the Collection class which  allows us to order our models. Read more <a href="http://documentcloud.github.com/backbone/#Collection">here</a> .</p>
 <p>Now we get to the fun part. You can bind listeners/events to Models and Collections.   So whenever there are changes to the data we can call events to react accordingly.</p>
 <p>We are going to add this code to our example which lets us add a friend Model to our friend Collection. We will then bind a listener to create a new list element when the data has changed.</p>
-<p>Liquid error: undefined method `join&#8217; for #<String:0x101653ba8></p>
+<div class="highlight"><pre><code class="javascript"><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
+
+<span class="nx">Friend</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+<span class="c1">//Create a model to hold friend atribute</span>
+<span class="nx">name</span><span class="o">:</span> <span class="kc">null</span>
+<span class="p">});</span>
+
+<span class="nx">Friends</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+<span class="c1">//This is our Friends collection and holds our Friend models</span>
+<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">models</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
+<span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;add&quot;</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">addFriendLi</span><span class="p">);</span>
+<span class="c1">//Listen for new additions to the collection and call a view function if so</span>
+<span class="p">}</span>
+<span class="p">});</span>
+
+<span class="nx">AppView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+<span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;body&quot;</span><span class="p">),</span>
+<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+<span class="k">this</span><span class="p">.</span><span class="nx">friends</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Friends</span><span class="p">(</span> <span class="kc">null</span><span class="p">,</span> <span class="p">{</span> <span class="nx">view</span><span class="o">:</span> <span class="k">this</span> <span class="p">});</span>
+<span class="c1">//Create a friends collection when the view is initialized.</span>
+<span class="c1">//Pass it a reference to this view to create a connection between the two</span>
+<span class="p">},</span>
+<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
+<span class="s2">&quot;click #add-friend&quot;</span><span class="o">:</span>  <span class="s2">&quot;showPrompt&quot;</span><span class="p">,</span>
+<span class="p">},</span>
+<span class="nx">showPrompt</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+<span class="kd">var</span> <span class="nx">friend_name</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">&quot;Who is your friend?&quot;</span><span class="p">);</span>
+<span class="kd">var</span> <span class="nx">friend_model</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Friend</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="nx">friend_name</span> <span class="p">});</span>
+<span class="c1">//Add a new friend model to our friend collection</span>
+<span class="k">this</span><span class="p">.</span><span class="nx">friends</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span> <span class="nx">friend_model</span> <span class="p">);</span>
+<span class="p">},</span>
+<span class="nx">addFriendLi</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
+<span class="c1">//The parameter passed is a reference to the model that was added</span>
+<span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#friends-list&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;&lt;li&gt;&quot;</span> <span class="o">+</span> <span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;name&#39;</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;&lt;/li&gt;&quot;</span><span class="p">);</span>
+<span class="c1">//Use .get to receive attributes of the model</span>
+<span class="p">}</span>
+<span class="p">});</span>
+
+<span class="kd">var</span> <span class="nx">appview</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppView</span><span class="p">;</span>
+
+<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
+</code></pre>
+</div>
 <h2><a href="http://thomasdavis.github.com/examples/backbone-101">Demo</a><br />
-    <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101">Source</a><br />
-    <br />
-h3. Conclusion</h2>
+    <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101">Source</a></h2>
+<h3>Conclusion</h3>
 <p>I hope this helps anyone trying to pick it up.   I don&#8217;t mind answering any questions that I have the ability to answer.</p>
 <p>Would also love to hear to some optimization tips!</p>
 <p>p.s.  Would love some insight into <span class="caps">MVVM</span>, <span class="caps">MVC</span> etc</p>
@@ -95,6 +164,13 @@ <h2><a href="http://thomasdavis.github.com/examples/backbone-101">Demo</a><br />
     <script type="text/javascript">try{ clicky.init(66379121); }catch(err){}</script>
     <noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66379121ns.gif" /></p></noscript>
 
-
+<script type='text/javascript'>
+var _glc =_glc || [];
+_glc.push('ag9jb250YWN0dXN3aWRnZXRyDwsSB3dpZGdldHMYq7ZNDA');
+var glcpath = (('https:' == document.location.protocol) ? 'https://contactuswidget.appspot.com/livily/browser/' : 'http://gae.clickdesk.com/livily/browser/');
+var glcp = (('https:' == document.location.protocol) ? 'https://' : 'http://');
+var glcspt = document.createElement('script'); glcspt.type = 'text/javascript'; glcspt.async = true;glcspt.src = glcpath + 'livechat.js';
+var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(glcspt, s);
+</script>    
 </body>
 </html>
diff --git a/_site/2011/02/05/backbone-views-and-templates.html b/_site/2011/02/05/backbone-views-and-templates.html
@@ -1,27 +1,27 @@
-
-
-
-
 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
 <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
    <title>Thomas Davis</title>   <meta name="author" content="Thomas Davis" />
+  <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
 
    <link rel="stylesheet" href="/css/styles.css" type="text/css" />
 </head>
 <body>
 
 <div class="container">
-  <div class="wrapper span-22 push-1">
-    <div class="header span-20 push-1">
+	    <div class="header span-20 push-1">
       <div class="span-14">
         <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
     <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
 <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
       </div>
     </div>
+  <div class="wrapper span-22 push-1">
+
     <div class="page span-20 push-1">
-<a href="/">Back to home</a
+<a href="/">Back to home</a>
+<br />
 <h2>backbone.js beginners and underscore.js micro templating</h2>
 <p>Surprisingly I have received many request via the <a href="http://poplytics.com">poplytics.com</a> popup at the bottom of the window.   A lot of the request have asked for more backbone tutorials.  So I decided to share more of what I have learnt so far.</p>
 <p>I decided to comment the code this time instead of a normal tutorial layout and hopefully my comments will be sufficient to help you.</p>
@@ -30,9 +30,8 @@ <h2><a href="http://thomasdavis.github.com/examples/backbone-underscore/">Demo</
 <p>Please leave comments for anything I am doing wrong =D</p>
 <h3>underscore micro templating</h3>
 <p>In the latest startup I have been working on, we decided to just use underscore.js templating as we reviewed &#8220;benchmarks&#8221;:&quot;http://www.viget.com/extend/benchmarking-javascript-templating-libraries/ of the different templating engines and none of them could really be crowned king.   Since then I have just learnt to use underscore.js micro templating engine as it works fine for us.</p>
-<p>We place all our javascript templates which is basically 99% of our web app into an external file and host it on Amazon  <span class="caps">CDN</span>.   So our entire app is cached and distrubuted through <a href="http://en.wikipedia.org/wiki/Content_delivery_network">edge locations</a> which increases the speed the site is served and also saves us money on bandwidth.<br />
-		 <br />
-h3. passing parent objects to deferred objects</p>
+<p>We place all our javascript templates which is basically 99% of our web app into an external file and host it on Amazon  <span class="caps">CDN</span>.   So our entire app is cached and distrubuted through <a href="http://en.wikipedia.org/wiki/Content_delivery_network">edge locations</a> which increases the speed the site is served and also saves us money on bandwidth.</p>
+<h3>passing parent objects to deferred objects</h3>
 <p>in the example I needed to access the parent object which contains a $.then and $.when. To get the parent object (this) into<br />
 		the anonymous $.when function I simply used jQuery.proxy(func, this).  Has anyone else been experimenting with this and is there<br />
 		an easier way to do it?</p>
@@ -70,6 +69,13 @@ <h3>underscore micro templating</h3>
     <script type="text/javascript">try{ clicky.init(66379121); }catch(err){}</script>
     <noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66379121ns.gif" /></p></noscript>
 
-
+<script type='text/javascript'>
+var _glc =_glc || [];
+_glc.push('ag9jb250YWN0dXN3aWRnZXRyDwsSB3dpZGdldHMYq7ZNDA');
+var glcpath = (('https:' == document.location.protocol) ? 'https://contactuswidget.appspot.com/livily/browser/' : 'http://gae.clickdesk.com/livily/browser/');
+var glcp = (('https:' == document.location.protocol) ? 'https://' : 'http://');
+var glcspt = document.createElement('script'); glcspt.type = 'text/javascript'; glcspt.async = true;glcspt.src = glcpath + 'livechat.js';
+var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(glcspt, s);
+</script>    
 </body>
 </html>