diff options
| author | Thomas Davis <thomasalwyndavis@gmail.com> | 2011-05-04 00:43:15 +1000 |
|---|---|---|
| committer | Thomas Davis <thomasalwyndavis@gmail.com> | 2011-05-04 00:43:15 +1000 |
| commit | aba5e605d6039cec8c181c055873ca975debe89c (patch) | |
| tree | dddfa47a21fadbb05a9dd9af44f66cd4f9036363 | |
| parent | a060c0ea806d789e924f7b3c73066eefcc7af7b7 (diff) | |
| download | backbonetutorials-aba5e605d6039cec8c181c055873ca975debe89c.zip backbonetutorials-aba5e605d6039cec8c181c055873ca975debe89c.tar.gz backbonetutorials-aba5e605d6039cec8c181c055873ca975debe89c.tar.bz2 | |
Removed the generated site files
29 files changed, 0 insertions, 3941 deletions
diff --git a/_site/CNAME b/_site/CNAME deleted file mode 100644 index 0c9de91..0000000 --- a/_site/CNAME +++ /dev/null @@ -1 +0,0 @@ -backbonetutorials.com diff --git a/_site/README.md b/_site/README.md deleted file mode 100644 index d0e47f3..0000000 --- a/_site/README.md +++ /dev/null @@ -1,15 +0,0 @@ - -# Backbone Tutorials - -This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome. -About Backbone Tutorials - -As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial - -I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others. - -Thomas Davis - [@neutralthoughts](http://twitter.com/neutralthoughts) - Twitter - -## Contributions - -* Thanks to Cactus([https://github.com/cactus](https://github.com/cactus)) for creating the blog feed diff --git a/_site/about.html b/_site/about.html deleted file mode 100644 index 18d5668..0000000 --- a/_site/about.html +++ /dev/null @@ -1,106 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> -<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>About Backbone Tutorials - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - .FlattrButton { - position: absolute; - top: 15px; - right: 15px; - } - </style> - <script type="text/javascript"> -/* <![CDATA[ */ - (function() { - var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; - s.type = 'text/javascript'; - s.async = true; - s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; - t.parentNode.insertBefore(s, t); - })(); -/* ]]> */ -</script> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> - - <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> -<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> -<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> - -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/examples.html">examples</a> - <a href="/contribute.html">contribute</a> - <a href="/about.html">about</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <h2>About Backbone Tutorials</h2> -<p>As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial.</p> -<p>I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others.</p> -<p>You can contact the original owner of this site through <a href="https://github.com/thomasdavis">github</a> or via twitter(<a href="http://twitter.com/neutralthoughts">@neutralthoughts</a>).</p> - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/atom.xml b/_site/atom.xml deleted file mode 100644 index ebb879c..0000000 --- a/_site/atom.xml +++ /dev/null @@ -1,356 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Thanks to cactus! - https://github.com/cactus --> -<feed xmlns="http://www.w3.org/2005/Atom"> - <title>Backbone Tutorials</title> - <link href="http://backbonetutorials.com/atom.xml" rel="self"/> - <link href="http://backbonetutorials.com/"/> - <updated>2011-04-29T02:06:33+10:00</updated> - <id>http://backbonetutorials.com/</id> - <author> - <name>Thomas Davis</name> - <email>thomasalwyndavis@gmail.com</email> - </author> - - - <entry> - <title>Why would you use backbone.js?</title> - <link href="http://backbonetutorials.com/why-would-you-use-backbone"/> - <updated>2011-02-01T00:00:00+10:00</updated> - <id>http://backbonetutorials.com/why-would-you-use-backbone</id> - <content type="html"><h2>Why do you need backbone.js?</h2> -<p>Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete <span class="caps">DOM</span> elements.</p> -<p>I shouldn&#8217;t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.</p> -<h3>So how does backbone.js help?</h3> -<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to backbone.js light nature you can incrementally include it in any current or future projects.</p> -<h3>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> - <li><a href="http://news.ycombinator.com/item?id=2119704">great hackernews discussion /w post from author</a></li> -</ul></content> - </entry> - - <entry> - <title>What is a model?</title> - <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"><h2>What is a model?</h2> -<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span class="caps">MVC</span></a> is so diluted that it&#8217;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> -</blockquote> -<p>So for the purpose of the tutorial let&#8217;s create a model.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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&#8217;t have to include it in your model declaration but you will find yourself using it more often than not.</p> -<h4>Setting attributes</h4> -<p>Now we want to pass some parameters when we create an instance of our model.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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="k">delete</span> <span class="nx">person</span><span class="p">;</span> - <span class="c1">// or we can set afterwards, these operations are equivelent</span> - <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">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;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> - -</code></pre> -</div><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> -<h4>Getting attributes</h4> -<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> - -</code></pre> -</div><h4>Setting model defaults</h4> -<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#8216;defaults&#8217; in your model declaration.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> - -</code></pre> -</div><h4>Manipulating model attributes</h4> -<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;John Resig&#39;</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</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;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;John Resig&#39;]</span> - -</code></pre> -</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> -<h4>Listening for changes to the model</h4> -<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 every time we adopt a new kid we are going to throw a party.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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;Welcome to this world&quot;</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;change:children&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;More children, single parenting is great!&quot;</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;Stewie Griffin&#39;]</span> - <span class="p">});</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</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 a change listener to individual attributes or if we like simply &#8216;<em>this.bind(&#8220;change&#8221;, function(){});</em>&#8217; to listen for changes to all attributes of the model.</p> -<h4>Fetching, Saving and Destroying</h4> -<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> -<h4>Tips and Tricks</h4> -<p><strong>Get all the current attributes</strong></p> -<div class="highlight"><pre><code class="javascript"> - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="c1">// { name: &quot;Thomas&quot;, age: 67, children: [&#39;Ryan&#39;]}</span> - <span class="cm">/* This simply returns a copy of the current attributes. */</span> - <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> - <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> -</code></pre> -</div><p><strong>Validate data before you set or save it</strong></p> -<div class="highlight"><pre><code class="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="c1">// If you return a string from the validate function,</span> - <span class="c1">// Backbone will throw an error</span> - <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> - <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">attributes</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="k">return</span> <span class="s2">&quot;You can&#39;t be negative years old&quot;</span><span class="p">;</span> - <span class="p">}</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;Welcome to this world&quot;</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;error&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> - <span class="c1">// We have received an error, log it, alert it or forget it :)</span> - <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</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">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</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="s2">&quot;Mary Poppins&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">// Will trigger an alert outputting the error</span> - <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> - - <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">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>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> -</ul> -<h3>Author</h3> -<ul> - <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> -</ul> -<h3>Contributors</h3> -<ul> - <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> -</ul></content> - </entry> - - <entry> - <title>What is a view?</title> - <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"><h2>What is a view?</h2> -<p>Backbone views are used to reflect what your applications&#8217; 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&#8217;s _.template</a>.</p> -<p>We will be using <a href="http://jquery.com/">jQuery 1.5</a> as our <span class="caps">DOM</span> manipulator. It&#8217;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/thomas/C9wew/6">A live example</a> can be found on jsFiddle.</p> -<div class="highlight"><pre><code class="javascript"> <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="c1">// The initialize function is always called when instantiating a Backbone View.</span> - <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><h4>The &#8220;el&#8221; property</h4> -<p>The &#8220;el&#8221; property references the <span class="caps">DOM</span> object created in the browser. Every Backbone.js view has an &#8220;el&#8221; 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&#8217;s &#8220;el&#8221; property to div#search_container, effectively making Backbone.View the owner of the <span class="caps">DOM</span> element.</p> -<div class="highlight"><pre><code class="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="nt">&lt;/script&gt;</span> -</code></pre> -</div><p><strong>Note</strong>: Keep in mind that this binds the container element. Any events we trigger must be in this element.</p> -<h4>Loading a template</h4> -<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&#8217;s documentation</a> for more information.</p> -<p>Let us implement a &#8220;render()&#8221; function and call it when the view is initialized. The &#8220;render()&#8221; function will load our template into the view&#8217;s &#8220;el&#8221; property using jQuery.</p> -<div class="highlight"><pre><code class="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="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> - -<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> - <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_input&quot;</span> <span class="o">/&gt;</span> - <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_button&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Search&quot;</span> <span class="o">/&gt;</span> -<span class="nt">&lt;/script&gt;</span> -</code></pre> -</div><p><strong>Tip</strong>: Place all your templates in a file and serve them from a <span class="caps">CDN</span>. This ensures your users will always have your application cached.</p> -<h4>Listening for events</h4> -<p>To attach a listener to our view, we use the &#8220;events&#8221; attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the &#8220;el&#8221; property. Let us attach a &#8220;click&#8221; listener to our button.</p> -<div class="highlight"><pre><code class="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="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="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="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> - -<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> - <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_input&quot;</span> <span class="o">/&gt;</span> - <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_button&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Search&quot;</span> <span class="o">/&gt;</span> -<span class="nt">&lt;/script&gt;</span> -</code></pre> -</div><h4>Tips and Tricks</h4> -<p><strong>Using template variables</strong></p> -<div class="highlight"><pre><code class="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="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> - -<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="c">&lt;!--</span> <span class="nx">Access</span> <span class="nx">template</span> <span class="nx">variables</span> <span class="kd">with</span> <span class="o">&lt;%=</span> <span class="o">%&gt;</span> <span class="o">--&gt;</span> - <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;&lt;%=</span> <span class="nx">search_label</span> <span class="o">%&gt;&lt;</span><span class="err">/label&gt;</span> - <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_input&quot;</span> <span class="o">/&gt;</span> - <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_button&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Search&quot;</span> <span class="o">/&gt;</span> -<span class="nt">&lt;/script&gt;</span> -</code></pre> -</div><p>If you have any questions, leave a comment below.</p> -<h3>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li> - <li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google <span class="caps">API</span></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>Author</h3> -<ul> - <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> -</ul> -<h3>Contributors</h3> -<ul> - <li><a href="https://github.com/zaeleus">Michael Macias</a></li> -</ul></content> - </entry> - -</feed> diff --git a/_site/contact.html b/_site/contact.html deleted file mode 100644 index 7a71ba1..0000000 --- a/_site/contact.html +++ /dev/null @@ -1,104 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> -<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>Contact - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - .FlattrButton { - position: absolute; - top: 15px; - right: 15px; - } - </style> - <script type="text/javascript"> -/* <![CDATA[ */ - (function() { - var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; - s.type = 'text/javascript'; - s.async = true; - s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; - t.parentNode.insertBefore(s, t); - })(); -/* ]]> */ -</script> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> - - <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> -<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> -<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> - -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/examples.html">examples</a> - <a href="/contribute.html">contribute</a> - <a href="/about.html">about</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <h2>Contact</h2> -<p>You can contact the original owner of this site through <a href="https://github.com/thomasdavis">github</a> or via twitter(<a href="http://twitter.com/neutralthoughts">@neutralthoughts</a>).</p> - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/contribute.html b/_site/contribute.html deleted file mode 100644 index 4dba2aa..0000000 --- a/_site/contribute.html +++ /dev/null @@ -1,105 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> -<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>Contribute - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - .FlattrButton { - position: absolute; - top: 15px; - right: 15px; - } - </style> - <script type="text/javascript"> -/* <![CDATA[ */ - (function() { - var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; - s.type = 'text/javascript'; - s.async = true; - s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; - t.parentNode.insertBefore(s, t); - })(); -/* ]]> */ -</script> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> - - <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> -<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> -<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> - -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/examples.html">examples</a> - <a href="/contribute.html">contribute</a> - <a href="/about.html">about</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <h2>Contribute</h2> -<p>The main goal behind BackboneTutorials.com is to build a comprehensive guide for developers of all levels of experience. Discussion and debate are encouraged and will hopefully breed innovation for javascript applications.</p> -<p>All contributions will be well acknowledge on the site.</p> - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/css/reset.css b/_site/css/reset.css deleted file mode 100644 index 5b41bb7..0000000 --- a/_site/css/reset.css +++ /dev/null @@ -1,260 +0,0 @@ -/** - * HTML5 ✰ Boilerplate - * - * style.css contains a reset, font normalization and some base styles. - * - * Credit is left where credit is due. - * Much inspiration was taken from these projects: - * - yui.yahooapis.com/2.8.1/build/base/base.css - * - camendesign.com/design/ - * - praegnanz.de/weblog/htmlcssjs-kickstart - */ - - -/** - * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) - * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark - * html5doctor.com/html-5-reset-stylesheet/ - */ - -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figcaption, figure, -footer, header, hgroup, menu, nav, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -blockquote, q { quotes: none; } - -blockquote:before, blockquote:after, -q:before, q:after { content: ""; content: none; } - -ins { background-color: #ff9; color: #000; text-decoration: none; } - -mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } - -del { text-decoration: line-through; } - -abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } - -table { border-collapse: collapse; border-spacing: 0; } - -hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } - -input, select { vertical-align: middle; } - - -/** - * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ - */ - -body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ -select, input, textarea, button { font:99% sans-serif; } - -/* Normalize monospace sizing: - en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ -pre, code, kbd, samp { font-family: monospace, sans-serif; } - - -/** - * Minimal base styles. - */ - -/* Always force a scrollbar in non-IE */ -html { overflow-y: scroll; } - -/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ -a:hover, a:active { outline: none; } - -ul, ol { margin-left: 2em; } -ol { list-style-type: decimal; } - -/* Remove margins for navigation lists */ -nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } - -small { font-size: 85%; } -strong, th { font-weight: bold; } - -td { vertical-align: top; } - -/* Set sub, sup without affecting line-height: gist.github.com/413930 */ -sub, sup { font-size: 75%; line-height: 0; position: relative; } -sup { top: -0.5em; } -sub { bottom: -0.25em; } - -pre { - /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ - white-space: pre; white-space: pre-wrap; word-wrap: break-word; - padding: 15px; -} - -textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ - -.ie6 legend, .ie7 legend { margin-left: -7px; } - -/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ -input[type="radio"] { vertical-align: text-bottom; } -input[type="checkbox"] { vertical-align: bottom; } -.ie7 input[type="checkbox"] { vertical-align: baseline; } -.ie6 input { vertical-align: text-bottom; } - -/* Hand cursor on clickable input elements */ -label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } - -/* Webkit browsers add a 2px margin outside the chrome of form elements */ -button, input, select, textarea { margin: 0; } - -/* Colors for form validity */ -input:valid, textarea:valid { } -input:invalid, textarea:invalid { - border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; -} -.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } - - -/* These selection declarations have to be separate - No text-shadow: twitter.com/miketaylr/status/12228805301 - Also: hot pink! */ -::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } -::selection { background:#FF5E99; color:#fff; text-shadow: none; } - -/* j.mp/webkit-tap-highlight-color */ -a:link { -webkit-tap-highlight-color: #FF5E99; } - -/* Make buttons play nice in IE: - www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ -button { width: auto; overflow: visible; } - -/* Bicubic resizing for non-native sized IMG: - code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ -.ie7 img { -ms-interpolation-mode: bicubic; } - -/** - * You might tweak these.. - */ - -body, select, input, textarea { - /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ - color: #444; - /* Set your base font here, to apply evenly */ - /* font-family: Georgia, serif; */ -} - -/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ -h1, h2, h3, h4, h5, h6 { font-weight: bold; } - -a, a:active, a:visited { color: #607890; } -a:hover { color: #036; } - - -/** - * Primary styles - * - * Author: - */ - - - - - - - - - - - - - - - - -/** - * Non-semantic helper classes: please define your styles before this section. - */ - -/* For image replacement */ -.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } - -/* Hide for both screenreaders and browsers: - css-discuss.incutio.com/wiki/Screenreader_Visibility */ -.hidden { display: none; visibility: hidden; } - -/* Hide only visually, but have it available for screenreaders: by Jon Neal. - www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ -.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } -/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } - -/* Hide visually and from screenreaders, but maintain layout */ -.invisible { visibility: hidden; } - -/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. - j.mp/bestclearfix */ -.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } -.clearfix:after { clear: both; } -/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ -.clearfix { zoom: 1; } - - - -/** - * Media queries for responsive design. - * - * These follow after primary styles so they will successfully override. - */ - -@media all and (orientation:portrait) { - /* Style adjustments for portrait mode goes here */ - -} - -@media all and (orientation:landscape) { - /* Style adjustments for landscape mode goes here */ - -} - -/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) - consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ -@media screen and (max-device-width: 480px) { - - - /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ - /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ -} - - -/** - * Print styles. - * - * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ - */ -@media print { - * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; - -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ - a, a:visited { color: #444 !important; text-decoration: underline; } - a[href]:after { content: " (" attr(href) ")"; } - abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ - tr, img { page-break-inside: avoid; } - @page { margin: 0.5cm; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3{ page-break-after: avoid; } -} diff --git a/_site/css/ribbon.css b/_site/css/ribbon.css deleted file mode 100644 index 580b9d3..0000000 --- a/_site/css/ribbon.css +++ /dev/null @@ -1,115 +0,0 @@ -@font-face { - font-family: Collegiate; - src: url("Collegiate.ttf"); -} - -.ribbon-holder { - position: absolute; - top: 0; - overflow: hidden; - height: 10em; -} - -.right.ribbon-holder { - right: 0; -} - -.left.ribbon-holder { - left: 0; -} - -.ribbon, -.ribbon:hover { - text-decoration: none; -} - -.ribbon { - font-family: Collegiate, sans-serif; - letter-spacing: -.1px; - opacity: 0.95; - - padding: 0.25em 0; - position: relative; - top: 2.5em; - - /* Defaults friendly for white pages. */ - -moz-box-shadow: 0 0 13px #888; - -webkit-box-shadow: 0 0 13px #888; - color: #FFF; - display: block; - line-height: 1.35em; -} - -.ribbon .text { - padding: 0.1em 3em; -} - -.right .ribbon { - -moz-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - right: -2.6em; -} - -.left .ribbon { - -moz-transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); - left: -2.6em; -} - -.white.ribbon { - color: #111; - background-color: #F5F5F5; - background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff)); - -moz-box-shadow: 0 0 13px #999; - -webkit-box-shadow: 0 0 13px #999; - text-shadow: 0 0 .05em; -} - -.white.ribbon .text { - border: 1px solid #cecece; -} - -.red.ribbon { - background-color: #9a0000; - background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); -} - -.red.ribbon .text { - border: 1px solid #bf6060; -} - -.green.ribbon { - background-color: #006e00; - background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); -} - -.green.ribbon .text { - border: 1px solid #6bac6b; -} - -.darkblue.ribbon { - background-color: #121621; - color: #ecedee; -} - -.darkblue.ribbon .text { - border: 1px solid #53565e; -} - -.orange.ribbon { - background-color: #E57504; - background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); -} - -.orange.ribbon .text { - border: 1px solid #ebaa65; -} - -.gray.ribbon { - background-color: #6d6d6d; - background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); -} - -.gray.ribbon .text { - border: 1px solid #a4a4a4; -} diff --git a/_site/css/stacklayout.css b/_site/css/stacklayout.css deleted file mode 100644 index 149a432..0000000 --- a/_site/css/stacklayout.css +++ /dev/null @@ -1,96 +0,0 @@ -/* -* StackLayout by Campbell McGuiness -* -* http://stacklayout.com/ -* http://twitter.com/stacklayout -* http://www.decalcms.com/ -* http://workingsoftware.com.au/ -* -* This work is licensed under Creative Commons * Attribution-ShareAlike 3.0 Australia License * http://creativecommons.org/licenses/by-sa/3.0/au/ -* -* Please retain this credit and let us know if you use StackLayout for inclusion on http://stacklayout.com/who.html -* -* cam@workingsoftware.com.au -*/ -.stack, -.stack1of2, -.stack1of3, -.stack2of3, -.stack1of4, -.stack3of4, -.stack1of5, -.stack2of5, -.stack3of5, -.stack4of5, -.stackAuto -{ - display:inline-block; - font-family:'Courier New',monospace; - letter-spacing:-0.65em; - word-spacing:-0.65em; - text-align:center; - vertical-align:top; -} -.stackContent -{ - display:block; - letter-spacing:normal; - word-spacing:normal; - text-align:left; -} -.stackContent:after -{ - content:"."; - display:block; - height:0; - clear:both; - visibility:hidden; -} -.stackAuto .stackContent -{ - text-align:center; -} -.stackAuto -{ - width:auto; -} -.stack -{ - width:100%; -} -.stack1of2 -{ - width:50%; -} -.stack1of3 -{ - width:33.334%; -} -.stack2of3 -{ - width:66.667%; -} -.stack1of4 -{ - width:25%; -} -.stack3of4 -{ - width:75%; -} -.stack1of5 -{ - width:20%; -} -.stack2of5 -{ - width:40%; -} -.stack3of5 -{ - width:60%; -} -.stack4of5 -{ - width:80%; -} diff --git a/_site/css/style.css b/_site/css/style.css deleted file mode 100644 index d9a8e4e..0000000 --- a/_site/css/style.css +++ /dev/null @@ -1,81 +0,0 @@ - -body { font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; -font-size-adjust:none; -font-style:normal; -font-variant:normal; -font-weight:normal; -} - -p { padding:0 0 0.8125em 0; color:#111; font-weight:300;} - -p + p { text-indent:1.625em;} - -p.first:first-letter{ float:left;font-family: baskerville,"palatino linotype",serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; } -p img { float: left; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; } -p img.right { float: right; margin: 0.5em 0 0.8125em 0.8125em } - - -h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; } -h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; } - - -h1 { font-size: 2.125em; margin-bottom: 0.765em; } -h2 { font-size: 1.9em; margin-bottom: 0.855em; } -h3 { font-size: 1.7em; margin-bottom: 0.956em; } -h4 { font-size: 1.4em; margin-bottom: 1.161em; } -h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; } - - - -ul{list-style-position:outside;} -li ul, -li ol { margin:0 1.625em; } -ul, ol { margin: 0 0 1.625em 0; } - - -dl { margin: 0 0 1.625em 0; } -dl dt { font-weight: bold; } -dl dd { margin-left: 1.625em; } - -a { color:#005AF2; text-decoration:none; } -a:hover { text-decoration: underline; } - - -table { margin-bottom:1.625em; border-collapse: collapse; } -th { font-weight:bold; } -tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; } -tfoot { font-style: italic; } -caption { text-align:center; font-family:Georgia, serif; } - - -abbr, acronym { border-bottom:1px dotted #000; } -address { margin-top:1.625em; font-style: italic; } -del {color:#000;} - - -blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; margin-bottom: 20px;} -blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */ -blockquote:after { content:"\201D";font-size:3em;margin-right:0px; font-family:georgia,serif;color:#aaa;line-height:0;margin-top: 25px;float: right;}/* From Tripoli */ -blockquote > p {padding:0; margin:0; } - -strong { font-weight: bold; } -em, dfn { font-style: italic; } -dfn { font-weight: bold; } -pre, code { margin: 1.625em 0; white-space: pre; } -pre, code, tt { font: 1em monospace; line-height: 1.5; } -tt { display: block; margin: 1.625em 0; } -hr { margin-bottom:1.625em; } - - - -.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; } -.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } -.mono { font-family:"Courier New", Courier, monospace; } - -.tutorials { - list-style: none; - margin-left: 20px; -} -ul { - margin-left: 20px; -} diff --git a/_site/css/syntax.css b/_site/css/syntax.css deleted file mode 100644 index 2774b76..0000000 --- a/_site/css/syntax.css +++ /dev/null @@ -1,60 +0,0 @@ -.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 */ diff --git a/_site/examples.html b/_site/examples.html deleted file mode 100644 index b5e4a48..0000000 --- a/_site/examples.html +++ /dev/null @@ -1,108 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> -<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>Contact - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - .FlattrButton { - position: absolute; - top: 15px; - right: 15px; - } - </style> - <script type="text/javascript"> -/* <![CDATA[ */ - (function() { - var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; - s.type = 'text/javascript'; - s.async = true; - s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; - t.parentNode.insertBefore(s, t); - })(); -/* ]]> */ -</script> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> - - <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> -<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> -<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> - -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/examples.html">examples</a> - <a href="/contribute.html">contribute</a> - <a href="/about.html">about</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <h2>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> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/index.html b/_site/index.html deleted file mode 100644 index f7febe6..0000000 --- a/_site/index.html +++ /dev/null @@ -1,135 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> -<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title> - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - .FlattrButton { - position: absolute; - top: 15px; - right: 15px; - } - </style> - <script type="text/javascript"> -/* <![CDATA[ */ - (function() { - var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; - s.type = 'text/javascript'; - s.async = true; - s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; - t.parentNode.insertBefore(s, t); - })(); -/* ]]> */ -</script> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> - - <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> -<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> -<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> - -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/examples.html">examples</a> - <a href="/contribute.html">contribute</a> - <a href="/about.html">about</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <h2>Beginner</h2> -<ul class="tutorials"> - - - <li><a href="/why-would-you-use-backbone">Why would you use backbone.js?</a> » <a href="http://thomasdavis.github.com">Thomas Davis</a></li> - - - - <li><a href="/what-is-a-model">What is a model?</a> » <a href="http://thomasdavis.github.com">Thomas Davis</a></li> - - - - <li><a href="/what-is-a-view">What is a view?</a> » <a href="http://thomasdavis.github.com">Thomas Davis</a></li> - - -</ul> - -<h2>Intermediate</h2> -<ul class="tutorials"> - <li>Coming Soon</li> -</ul> - -<h2>Advanced</h2> -<ul class="tutorials"> - <li>Coming Soon</li> -</ul> -<br /><br /><br /> -<h2>External Tutorials</h2> -<ul class="tutorials"> - <li><a target="_blank" href="http://thomasdavis.github.com/2011/02/01/backbone-introduction.html">Backbone.js Tutorial – by noob for noobs</a></li> - <li><a target="_blank" href="http://jvcustomdesigns.com/139/backbone-tutorial-1/">Backbone Tutorial #1 | JV Custom Designs</a></li> -</ul> - - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/pygments/CNAME b/_site/pygments/CNAME deleted file mode 100644 index 0c9de91..0000000 --- a/_site/pygments/CNAME +++ /dev/null @@ -1 +0,0 @@ -backbonetutorials.com diff --git a/_site/pygments/about.html b/_site/pygments/about.html deleted file mode 100644 index d3da6bf..0000000 --- a/_site/pygments/about.html +++ /dev/null @@ -1,83 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>About Backbone Tutorials - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - </style> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <h2>About Backbone Tutorials</h2> -<p>As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial.</p> -<p>I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others.</p> - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/pygments/atom.xml b/_site/pygments/atom.xml deleted file mode 100644 index 2fbf3c7..0000000 --- a/_site/pygments/atom.xml +++ /dev/null @@ -1,381 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Thanks to cactus! - https://github.com/cactus --> -<feed xmlns="http://www.w3.org/2005/Atom"> - <title>Backbone Tutorials</title> - <link href="http://backbonetutorials.com/atom.xml" rel="self"/> - <link href="http://backbonetutorials.com/"/> - <updated>2011-04-18T18:03:50+10:00</updated> - <id>http://backbonetutorials.com/</id> - <author> - <name>Thomas Davis</name> - <email>thomasalwyndavis@gmail.com</email> - </author> - - - <entry> - <title>Why would you use backbone.js?</title> - <link href="http://backbonetutorials.com/why-would-you-use-backbone"/> - <updated>2011-02-01T00:00:00+10:00</updated> - <id>http://backbonetutorials.com/why-would-you-use-backbone</id> - <content type="html"><h2>Why do you need backbone.js?</h2> -<p>Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete <span class="caps">DOM</span> elements.</p> -<p>I shouldn&#8217;t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.</p> -<h3>So how does backbone.js help?</h3> -<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to backbone.js light nature you can incrementally include it in any current or future projects.</p> -<h3>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> - <li><a href="http://news.ycombinator.com/item?id=2119704">great hackernews discussion /w post from author</a></li> -</ul></content> - </entry> - - <entry> - <title>What is a model?</title> - <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"><h2>What is a model?</h2> -<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span class="caps">MVC</span></a> is so diluted that it&#8217;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> -</blockquote> -<p>So for the purpose of the tutorial let&#8217;s create a model.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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&#8217;t have to include it in your model declaration but you will find yourself using it more often than not.</p> -<h4>Setting attributes</h4> -<p>Now we want to pass some parameters when we create an instance of our model.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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="k">delete</span> <span class="nx">person</span><span class="p">;</span> - <span class="c1">// or we can set afterwards, these operations are equivelent</span> - <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">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;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> - -</code></pre> -</div><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> -<h4>Getting attributes</h4> -<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> - -</code></pre> -</div><h4>Setting model defaults</h4> -<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#8216;defaults&#8217; in your model declaration.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> - -</code></pre> -</div><h4>Manipulating model attributes</h4> -<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;John Resig&#39;</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</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;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;John Resig&#39;]</span> - -</code></pre> -</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> -<h4>Listening for changes to the model</h4> -<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 every time we adopt a new kid we are going to throw a party.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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;Welcome to this world&quot;</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;change:children&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;More children, single parenting is great!&quot;</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;Stewie Griffin&#39;]</span> - <span class="p">});</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</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 a change listener to individual attributes or if we like simply &#8216;<em>this.bind(&#8220;change&#8221;, function(){});</em>&#8217; to listen for changes to all attributes of the model.</p> -<h4>Fetching, Saving and Destroying</h4> -<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> -<h4>Tips and Tricks</h4> -<p><strong>Get all the current attributes</strong></p> -<div class="highlight"><pre><code class="javascript"> - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="c1">// { name: &quot;Thomas&quot;, age: 67, children: [&#39;Ryan&#39;]}</span> - <span class="cm">/* This simply returns a copy of the current attributes. */</span> - <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> - <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> -</code></pre> -</div><p><strong>Validate data before you set or save it</strong></p> -<div class="highlight"><pre><code class="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="c1">// If you return a string from the validate function,</span> - <span class="c1">// Backbone will throw an error</span> - <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> - <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">attributes</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="k">return</span> <span class="s2">&quot;You can&#39;t be negative years old&quot;</span><span class="p">;</span> - <span class="p">}</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;Welcome to this world&quot;</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;error&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> - <span class="c1">// We have received an error, log it, alert it or forget it :)</span> - <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</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">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</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="s2">&quot;Mary Poppins&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">// Will trigger an alert outputting the error</span> - <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> - - <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">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>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> -</ul> -<h3>Author</h3> -<ul> - <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> -</ul> -<h3>Contributors</h3> -<ul> - <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> -</ul></content> - </entry> - - <entry> - <title>What is a view?</title> - <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"><h2>What is a view?</h2> -<p>Backbone views are used reflect what your applications data model looks like. They are also used to listen to events and react accordingly. This tutorial will not be addressing binding models/collections with views. This tutorial will focus on view functionality and how to use it with a javascript templating library.</p> -<p>We will be using jQuery 1.5.1 as our <span class="caps">DOM</span> manipulator.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> <span class="o">/</span><span class="nx">ch</span> - <span class="p">});</span> - - <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&#8217;t have to include it in your model declaration but you will find yourself using it more often than not.</p> -<h4>Setting attributes</h4> -<p>Now we want to pass some parameters when we create an instance of our model.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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="k">delete</span> <span class="nx">person</span><span class="p">;</span> - <span class="c1">// or we can set afterwards, these operations are equivelent</span> - <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">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;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> - -</code></pre> -</div><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> -<h4>Getting attributes</h4> -<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> - -</code></pre> -</div><h4>Setting model defaults</h4> -<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#8216;defaults&#8217; in your model declaration.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> - -</code></pre> -</div><h4>Manipulating model attributes</h4> -<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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;Welcome to this world&quot;</span><span class="p">);</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;John Resig&#39;</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</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;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;John Resig&#39;]</span> - -</code></pre> -</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> -<h4>Listening for changes to the model</h4> -<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 every time we adopt a new kid we are going to throw a party.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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;Welcome to this world&quot;</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;change:children&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;More children, single parenting is great!&quot;</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;Stewie Griffin&#39;]</span> - <span class="p">});</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</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 a change listener to individual attributes or if we like simply &#8216;<em>this.bind(&#8220;change&#8221;, function(){});</em>&#8217; to listen for changes to all attributes of the model.</p> -<h4>Fetching, Saving and Destroying</h4> -<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> -<h4>Tips and Tricks</h4> -<p><strong>Get all the current attributes</strong></p> -<div class="highlight"><pre><code class="javascript"> - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">;</span> <span class="c1">// { name: &quot;Thomas&quot;, age: 67, children: [&#39;Ryan&#39;]}</span> - <span class="cm">/* This simply returns a copy of the current attributes. */</span> - <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> - <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> -</code></pre> -</div><p><strong>Validate data before you set or save it</strong></p> -<div class="highlight"><pre><code class="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="c1">// If you return a string from the validate function,</span> - <span class="c1">// Backbone will throw an error</span> - <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> - <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">attributes</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="k">return</span> <span class="s2">&quot;You can&#39;t be negative years old&quot;</span><span class="p">;</span> - <span class="p">}</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;Welcome to this world&quot;</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;error&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> - <span class="c1">// We have received an error, log it, alert it or forget it :)</span> - <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</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">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</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="s2">&quot;Mary Poppins&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">// Will trigger an alert outputting the error</span> - <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> - - <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">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>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> -</ul> -<h3>Author</h3> -<ul> - <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> -</ul> -<h3>Contributors</h3> -<ul> - <li>None</li> -</ul></content> - </entry> - -</feed> diff --git a/_site/pygments/contact.html b/_site/pygments/contact.html deleted file mode 100644 index e1ad82a..0000000 --- a/_site/pygments/contact.html +++ /dev/null @@ -1,82 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>Contact - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - </style> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <h2>Contact</h2> -<p>You can contact the original owner of this site through <a href="https://github.com/thomasdavis">github</a> or via twitter(<a href="http://twitter.com/neutralthoughts">@neutralthoughts</a>).</p> - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/pygments/contribute.html b/_site/pygments/contribute.html deleted file mode 100644 index 6047046..0000000 --- a/_site/pygments/contribute.html +++ /dev/null @@ -1,83 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>Contribute - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - </style> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <h2>Contribute</h2> -<p>The main goal behind BackboneTutorials.com is to build a comprehensive guide for developers of all levels of experience. Discussion and debate are encouraged and will hopefully breed innovation for javascript applications.</p> -<p>All contributions will be well acknowledge on the site.</p> - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/pygments/css/reset.css b/_site/pygments/css/reset.css deleted file mode 100644 index 5b41bb7..0000000 --- a/_site/pygments/css/reset.css +++ /dev/null @@ -1,260 +0,0 @@ -/** - * HTML5 ✰ Boilerplate - * - * style.css contains a reset, font normalization and some base styles. - * - * Credit is left where credit is due. - * Much inspiration was taken from these projects: - * - yui.yahooapis.com/2.8.1/build/base/base.css - * - camendesign.com/design/ - * - praegnanz.de/weblog/htmlcssjs-kickstart - */ - - -/** - * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) - * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark - * html5doctor.com/html-5-reset-stylesheet/ - */ - -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figcaption, figure, -footer, header, hgroup, menu, nav, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -blockquote, q { quotes: none; } - -blockquote:before, blockquote:after, -q:before, q:after { content: ""; content: none; } - -ins { background-color: #ff9; color: #000; text-decoration: none; } - -mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } - -del { text-decoration: line-through; } - -abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } - -table { border-collapse: collapse; border-spacing: 0; } - -hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } - -input, select { vertical-align: middle; } - - -/** - * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ - */ - -body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ -select, input, textarea, button { font:99% sans-serif; } - -/* Normalize monospace sizing: - en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ -pre, code, kbd, samp { font-family: monospace, sans-serif; } - - -/** - * Minimal base styles. - */ - -/* Always force a scrollbar in non-IE */ -html { overflow-y: scroll; } - -/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ -a:hover, a:active { outline: none; } - -ul, ol { margin-left: 2em; } -ol { list-style-type: decimal; } - -/* Remove margins for navigation lists */ -nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } - -small { font-size: 85%; } -strong, th { font-weight: bold; } - -td { vertical-align: top; } - -/* Set sub, sup without affecting line-height: gist.github.com/413930 */ -sub, sup { font-size: 75%; line-height: 0; position: relative; } -sup { top: -0.5em; } -sub { bottom: -0.25em; } - -pre { - /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ - white-space: pre; white-space: pre-wrap; word-wrap: break-word; - padding: 15px; -} - -textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ - -.ie6 legend, .ie7 legend { margin-left: -7px; } - -/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ -input[type="radio"] { vertical-align: text-bottom; } -input[type="checkbox"] { vertical-align: bottom; } -.ie7 input[type="checkbox"] { vertical-align: baseline; } -.ie6 input { vertical-align: text-bottom; } - -/* Hand cursor on clickable input elements */ -label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } - -/* Webkit browsers add a 2px margin outside the chrome of form elements */ -button, input, select, textarea { margin: 0; } - -/* Colors for form validity */ -input:valid, textarea:valid { } -input:invalid, textarea:invalid { - border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; -} -.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } - - -/* These selection declarations have to be separate - No text-shadow: twitter.com/miketaylr/status/12228805301 - Also: hot pink! */ -::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } -::selection { background:#FF5E99; color:#fff; text-shadow: none; } - -/* j.mp/webkit-tap-highlight-color */ -a:link { -webkit-tap-highlight-color: #FF5E99; } - -/* Make buttons play nice in IE: - www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ -button { width: auto; overflow: visible; } - -/* Bicubic resizing for non-native sized IMG: - code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ -.ie7 img { -ms-interpolation-mode: bicubic; } - -/** - * You might tweak these.. - */ - -body, select, input, textarea { - /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ - color: #444; - /* Set your base font here, to apply evenly */ - /* font-family: Georgia, serif; */ -} - -/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ -h1, h2, h3, h4, h5, h6 { font-weight: bold; } - -a, a:active, a:visited { color: #607890; } -a:hover { color: #036; } - - -/** - * Primary styles - * - * Author: - */ - - - - - - - - - - - - - - - - -/** - * Non-semantic helper classes: please define your styles before this section. - */ - -/* For image replacement */ -.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } - -/* Hide for both screenreaders and browsers: - css-discuss.incutio.com/wiki/Screenreader_Visibility */ -.hidden { display: none; visibility: hidden; } - -/* Hide only visually, but have it available for screenreaders: by Jon Neal. - www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ -.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } -/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } - -/* Hide visually and from screenreaders, but maintain layout */ -.invisible { visibility: hidden; } - -/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. - j.mp/bestclearfix */ -.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } -.clearfix:after { clear: both; } -/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ -.clearfix { zoom: 1; } - - - -/** - * Media queries for responsive design. - * - * These follow after primary styles so they will successfully override. - */ - -@media all and (orientation:portrait) { - /* Style adjustments for portrait mode goes here */ - -} - -@media all and (orientation:landscape) { - /* Style adjustments for landscape mode goes here */ - -} - -/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) - consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ -@media screen and (max-device-width: 480px) { - - - /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ - /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ -} - - -/** - * Print styles. - * - * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ - */ -@media print { - * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; - -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ - a, a:visited { color: #444 !important; text-decoration: underline; } - a[href]:after { content: " (" attr(href) ")"; } - abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ - tr, img { page-break-inside: avoid; } - @page { margin: 0.5cm; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3{ page-break-after: avoid; } -} diff --git a/_site/pygments/css/ribbon.css b/_site/pygments/css/ribbon.css deleted file mode 100644 index 580b9d3..0000000 --- a/_site/pygments/css/ribbon.css +++ /dev/null @@ -1,115 +0,0 @@ -@font-face { - font-family: Collegiate; - src: url("Collegiate.ttf"); -} - -.ribbon-holder { - position: absolute; - top: 0; - overflow: hidden; - height: 10em; -} - -.right.ribbon-holder { - right: 0; -} - -.left.ribbon-holder { - left: 0; -} - -.ribbon, -.ribbon:hover { - text-decoration: none; -} - -.ribbon { - font-family: Collegiate, sans-serif; - letter-spacing: -.1px; - opacity: 0.95; - - padding: 0.25em 0; - position: relative; - top: 2.5em; - - /* Defaults friendly for white pages. */ - -moz-box-shadow: 0 0 13px #888; - -webkit-box-shadow: 0 0 13px #888; - color: #FFF; - display: block; - line-height: 1.35em; -} - -.ribbon .text { - padding: 0.1em 3em; -} - -.right .ribbon { - -moz-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - right: -2.6em; -} - -.left .ribbon { - -moz-transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); - left: -2.6em; -} - -.white.ribbon { - color: #111; - background-color: #F5F5F5; - background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff)); - -moz-box-shadow: 0 0 13px #999; - -webkit-box-shadow: 0 0 13px #999; - text-shadow: 0 0 .05em; -} - -.white.ribbon .text { - border: 1px solid #cecece; -} - -.red.ribbon { - background-color: #9a0000; - background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); -} - -.red.ribbon .text { - border: 1px solid #bf6060; -} - -.green.ribbon { - background-color: #006e00; - background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); -} - -.green.ribbon .text { - border: 1px solid #6bac6b; -} - -.darkblue.ribbon { - background-color: #121621; - color: #ecedee; -} - -.darkblue.ribbon .text { - border: 1px solid #53565e; -} - -.orange.ribbon { - background-color: #E57504; - background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); -} - -.orange.ribbon .text { - border: 1px solid #ebaa65; -} - -.gray.ribbon { - background-color: #6d6d6d; - background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); -} - -.gray.ribbon .text { - border: 1px solid #a4a4a4; -} diff --git a/_site/pygments/css/stacklayout.css b/_site/pygments/css/stacklayout.css deleted file mode 100644 index 149a432..0000000 --- a/_site/pygments/css/stacklayout.css +++ /dev/null @@ -1,96 +0,0 @@ -/* -* StackLayout by Campbell McGuiness -* -* http://stacklayout.com/ -* http://twitter.com/stacklayout -* http://www.decalcms.com/ -* http://workingsoftware.com.au/ -* -* This work is licensed under Creative Commons * Attribution-ShareAlike 3.0 Australia License * http://creativecommons.org/licenses/by-sa/3.0/au/ -* -* Please retain this credit and let us know if you use StackLayout for inclusion on http://stacklayout.com/who.html -* -* cam@workingsoftware.com.au -*/ -.stack, -.stack1of2, -.stack1of3, -.stack2of3, -.stack1of4, -.stack3of4, -.stack1of5, -.stack2of5, -.stack3of5, -.stack4of5, -.stackAuto -{ - display:inline-block; - font-family:'Courier New',monospace; - letter-spacing:-0.65em; - word-spacing:-0.65em; - text-align:center; - vertical-align:top; -} -.stackContent -{ - display:block; - letter-spacing:normal; - word-spacing:normal; - text-align:left; -} -.stackContent:after -{ - content:"."; - display:block; - height:0; - clear:both; - visibility:hidden; -} -.stackAuto .stackContent -{ - text-align:center; -} -.stackAuto -{ - width:auto; -} -.stack -{ - width:100%; -} -.stack1of2 -{ - width:50%; -} -.stack1of3 -{ - width:33.334%; -} -.stack2of3 -{ - width:66.667%; -} -.stack1of4 -{ - width:25%; -} -.stack3of4 -{ - width:75%; -} -.stack1of5 -{ - width:20%; -} -.stack2of5 -{ - width:40%; -} -.stack3of5 -{ - width:60%; -} -.stack4of5 -{ - width:80%; -} diff --git a/_site/pygments/css/style.css b/_site/pygments/css/style.css deleted file mode 100644 index d9a8e4e..0000000 --- a/_site/pygments/css/style.css +++ /dev/null @@ -1,81 +0,0 @@ - -body { font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; -font-size-adjust:none; -font-style:normal; -font-variant:normal; -font-weight:normal; -} - -p { padding:0 0 0.8125em 0; color:#111; font-weight:300;} - -p + p { text-indent:1.625em;} - -p.first:first-letter{ float:left;font-family: baskerville,"palatino linotype",serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; } -p img { float: left; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; } -p img.right { float: right; margin: 0.5em 0 0.8125em 0.8125em } - - -h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; } -h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; } - - -h1 { font-size: 2.125em; margin-bottom: 0.765em; } -h2 { font-size: 1.9em; margin-bottom: 0.855em; } -h3 { font-size: 1.7em; margin-bottom: 0.956em; } -h4 { font-size: 1.4em; margin-bottom: 1.161em; } -h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; } - - - -ul{list-style-position:outside;} -li ul, -li ol { margin:0 1.625em; } -ul, ol { margin: 0 0 1.625em 0; } - - -dl { margin: 0 0 1.625em 0; } -dl dt { font-weight: bold; } -dl dd { margin-left: 1.625em; } - -a { color:#005AF2; text-decoration:none; } -a:hover { text-decoration: underline; } - - -table { margin-bottom:1.625em; border-collapse: collapse; } -th { font-weight:bold; } -tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; } -tfoot { font-style: italic; } -caption { text-align:center; font-family:Georgia, serif; } - - -abbr, acronym { border-bottom:1px dotted #000; } -address { margin-top:1.625em; font-style: italic; } -del {color:#000;} - - -blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; margin-bottom: 20px;} -blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */ -blockquote:after { content:"\201D";font-size:3em;margin-right:0px; font-family:georgia,serif;color:#aaa;line-height:0;margin-top: 25px;float: right;}/* From Tripoli */ -blockquote > p {padding:0; margin:0; } - -strong { font-weight: bold; } -em, dfn { font-style: italic; } -dfn { font-weight: bold; } -pre, code { margin: 1.625em 0; white-space: pre; } -pre, code, tt { font: 1em monospace; line-height: 1.5; } -tt { display: block; margin: 1.625em 0; } -hr { margin-bottom:1.625em; } - - - -.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; } -.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } -.mono { font-family:"Courier New", Courier, monospace; } - -.tutorials { - list-style: none; - margin-left: 20px; -} -ul { - margin-left: 20px; -} diff --git a/_site/pygments/css/syntax.css b/_site/pygments/css/syntax.css deleted file mode 100644 index 2774b76..0000000 --- a/_site/pygments/css/syntax.css +++ /dev/null @@ -1,60 +0,0 @@ -.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 */ diff --git a/_site/pygments/index.html b/_site/pygments/index.html deleted file mode 100644 index b442da1..0000000 --- a/_site/pygments/index.html +++ /dev/null @@ -1,113 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title> - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - </style> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <h2>Beginner</h2> -<ul class="tutorials"> - - - <li><a href="/why-would-you-use-backbone">Why would you use backbone.js?</a> » Thomas Davis</li> - - - - <li><a href="/what-is-a-model">What is a model?</a> » Thomas Davis</li> - - - - <li><a href="/what-is-a-view">What is a view?</a> » Thomas Davis</li> - - -</ul> - -<h2>Intermediate</h2> -<ul class="tutorials"> - <li>Coming Soon</li> -</ul> - -<h2>Advanced</h2> -<ul class="tutorials"> - <li>Coming Soon</li> -</ul> -<br /><br /><br /> -<h2>External Tutorials</h2> -<ul class="tutorials"> - <li><a target="_blank" href="http://thomasdavis.github.com/2011/02/01/backbone-introduction.html">Backbone.js Tutorial – by noob for noobs</a></li> - <li><a target="_blank" href="http://jvcustomdesigns.com/139/backbone-tutorial-1/">Backbone Tutorial #1 | JV Custom Designs</a></li> -</ul> - - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/pygments/what-is-a-model/index.html b/_site/pygments/what-is-a-model/index.html deleted file mode 100644 index 4d59503..0000000 --- a/_site/pygments/what-is-a-model/index.html +++ /dev/null @@ -1,260 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>What is a model? - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - </style> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <div id="post"> -<h2>What is a model?</h2> -<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span class="caps">MVC</span></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> -</blockquote> -<p>So for the purpose of the tutorial let’s create a model.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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> -<h4>Setting attributes</h4> -<p>Now we want to pass some parameters when we create an instance of our model.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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="k">delete</span> <span class="nx">person</span><span class="p">;</span> - <span class="c1">// or we can set afterwards, these operations are equivelent</span> - <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">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">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> - -</code></pre> -</div><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> -<h4>Getting attributes</h4> -<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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">"age"</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan']</span> - -</code></pre> -</div><h4>Setting model defaults</h4> -<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="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">'Fetus'</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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">"age"</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan']</span> - -</code></pre> -</div><h4>Manipulating model attributes</h4> -<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">'Fetus'</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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">"Welcome to this world"</span><span class="p">);</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">'John Resig'</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</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">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan', 'John Resig']</span> - -</code></pre> -</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> -<h4>Listening for changes to the model</h4> -<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 every time we adopt a new kid we are going to throw a party.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">'Fetus'</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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">"Welcome to this world"</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">"change:children"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"More children, single parenting is great!"</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan', 'Stewie Griffin']</span> - <span class="p">});</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</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 a change listener to individual attributes or if we like simply ‘<em>this.bind(“change”, function(){});</em>’ to listen for changes to all attributes of the model.</p> -<h4>Fetching, Saving and Destroying</h4> -<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> -<h4>Tips and Tricks</h4> -<p><strong>Get all the current attributes</strong></p> -<div class="highlight"><pre><code class="javascript"> - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="c1">// { name: "Thomas", age: 67, children: ['Ryan']}</span> - <span class="cm">/* This simply returns a copy of the current attributes. */</span> - <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> - <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> -</code></pre> -</div><p><strong>Validate data before you set or save it</strong></p> -<div class="highlight"><pre><code class="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="c1">// If you return a string from the validate function,</span> - <span class="c1">// Backbone will throw an error</span> - <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> - <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o"><</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">attributes</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="k">return</span> <span class="s2">"You can't be negative years old"</span><span class="p">;</span> - <span class="p">}</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">"Welcome to this world"</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">"error"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> - <span class="c1">// We have received an error, log it, alert it or forget it :)</span> - <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</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">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</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="s2">"Mary Poppins"</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">// Will trigger an alert outputting the error</span> - <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> - - <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">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>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> -</ul> -<h3>Author</h3> -<ul> - <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> -</ul> -<h3>Contributors</h3> -<ul> - <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> -</ul> -</div> -<script> -var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; -var idcomments_post_id; -var idcomments_post_url = 'http://backbonetutorials.com/what-is-a-model'; -</script> -<span id="IDCommentsPostTitle" style="display:none"></span> -<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script> -</div> - - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/pygments/why-would-you-use-backbone/index.html b/_site/pygments/why-would-you-use-backbone/index.html deleted file mode 100644 index 73a5b4a..0000000 --- a/_site/pygments/why-would-you-use-backbone/index.html +++ /dev/null @@ -1,101 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>Why would you use backbone.js? - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - </style> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <div id="post"> -<h2>Why do you need backbone.js?</h2> -<p>Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete <span class="caps">DOM</span> elements.</p> -<p>I shouldn’t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.</p> -<h3>So how does backbone.js help?</h3> -<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to backbone.js light nature you can incrementally include it in any current or future projects.</p> -<h3>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> - <li><a href="http://news.ycombinator.com/item?id=2119704">great hackernews discussion /w post from author</a></li> -</ul> -</div> -<script> -var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; -var idcomments_post_id; -var idcomments_post_url = 'http://backbonetutorials.com/what-would-you-use-backbone'; -</script> -<span id="IDCommentsPostTitle" style="display:none"></span> -<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script> -</div> - - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/what-is-a-model/index.html b/_site/what-is-a-model/index.html deleted file mode 100644 index 38703c5..0000000 --- a/_site/what-is-a-model/index.html +++ /dev/null @@ -1,290 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> -<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>What is a model? - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - .FlattrButton { - position: absolute; - top: 15px; - right: 15px; - } - </style> - <script type="text/javascript"> -/* <![CDATA[ */ - (function() { - var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; - s.type = 'text/javascript'; - s.async = true; - s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; - t.parentNode.insertBefore(s, t); - })(); -/* ]]> */ -</script> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> - - <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> -<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> -<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> - -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/examples.html">examples</a> - <a href="/contribute.html">contribute</a> - <a href="/about.html">about</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <div id="post"> -<h2>What is a model?</h2> -<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span class="caps">MVC</span></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> -</blockquote> -<p>So for the purpose of the tutorial let’s create a model.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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> -<h4>Setting attributes</h4> -<p>Now we want to pass some parameters when we create an instance of our model.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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="k">delete</span> <span class="nx">person</span><span class="p">;</span> - <span class="c1">// or we can set afterwards, these operations are equivelent</span> - <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">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">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> - -</code></pre> -</div><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> -<h4>Getting attributes</h4> -<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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">"age"</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan']</span> - -</code></pre> -</div><h4>Setting model defaults</h4> -<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="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">'Fetus'</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</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">"age"</span><span class="p">);</span> <span class="c1">// 67</span> - <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">children</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">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan']</span> - -</code></pre> -</div><h4>Manipulating model attributes</h4> -<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">'Fetus'</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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">"Welcome to this world"</span><span class="p">);</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">'John Resig'</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</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">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan', 'John Resig']</span> - -</code></pre> -</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> -<h4>Listening for changes to the model</h4> -<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 every time we adopt a new kid we are going to throw a party.</p> -<div class="highlight"><pre><code class="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> - <span class="nx">name</span><span class="o">:</span> <span class="s1">'Fetus'</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</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">"Welcome to this world"</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">"change:children"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"More children, single parenting is great!"</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan', 'Stewie Griffin']</span> - <span class="p">});</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</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 a change listener to individual attributes or if we like simply ‘<em>this.bind(“change”, function(){});</em>’ to listen for changes to all attributes of the model.</p> -<h4>Fetching, Saving and Destroying</h4> -<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> -<h4>Tips and Tricks</h4> -<p><strong>Get all the current attributes</strong></p> -<div class="highlight"><pre><code class="javascript"> - <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">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="c1">// { name: "Thomas", age: 67, children: ['Ryan']}</span> - <span class="cm">/* This simply returns a copy of the current attributes. */</span> - <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> - <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> -</code></pre> -</div><p><strong>Validate data before you set or save it</strong></p> -<div class="highlight"><pre><code class="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="c1">// If you return a string from the validate function,</span> - <span class="c1">// Backbone will throw an error</span> - <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> - <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o"><</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">attributes</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="k">return</span> <span class="s2">"You can't be negative years old"</span><span class="p">;</span> - <span class="p">}</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">"Welcome to this world"</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">"error"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> - <span class="c1">// We have received an error, log it, alert it or forget it :)</span> - <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</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">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</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="s2">"Mary Poppins"</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">// Will trigger an alert outputting the error</span> - <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> - - <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">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>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> -</ul> -<h3>Author</h3> -<ul> - <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> -</ul> -<h3>Contributors</h3> -<ul> - <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> -</ul> -</div> -<!-- AddThis Button BEGIN --> -<div class="addthis_toolbox addthis_default_style "> -<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> -<a class="addthis_button_tweet"></a> -<a class="addthis_counter addthis_pill_style"></a> -</div> -<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script> -<!-- AddThis Button END --> -<script> -var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; -var idcomments_post_id; -var idcomments_post_url = 'http://backbonetutorials.com/what-is-a-model'; -</script> -<span id="IDCommentsPostTitle" style="display:none"></span> -<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script> -</div> - - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/what-is-a-view/index.html b/_site/what-is-a-view/index.html deleted file mode 100644 index e40853b..0000000 --- a/_site/what-is-a-view/index.html +++ /dev/null @@ -1,262 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> -<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>What is a view? - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - .FlattrButton { - position: absolute; - top: 15px; - right: 15px; - } - </style> - <script type="text/javascript"> -/* <![CDATA[ */ - (function() { - var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; - s.type = 'text/javascript'; - s.async = true; - s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; - t.parentNode.insertBefore(s, t); - })(); -/* ]]> */ -</script> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> - - <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> -<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> -<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> - -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/examples.html">examples</a> - <a href="/contribute.html">contribute</a> - <a href="/about.html">about</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <div id="post"> -<h2>What is a view?</h2> -<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.5</a> as our <span class="caps">DOM</span> 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/thomas/C9wew/6">A live example</a> can be found on jsFiddle.</p> -<div class="highlight"><pre><code class="javascript"> <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="c1">// The initialize function is always called when instantiating a Backbone View.</span> - <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><h4>The “el” property</h4> -<p>The “el” property references the <span class="caps">DOM</span> 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 <span class="caps">DOM</span> element.</p> -<div class="highlight"><pre><code class="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="nt"></script></span> -</code></pre> -</div><p><strong>Note</strong>: Keep in mind that this binds the container element. Any events we trigger must be in this element.</p> -<h4>Loading a template</h4> -<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> -<div class="highlight"><pre><code class="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="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> - -<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> - <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_input"</span> <span class="o">/></span> - <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_button"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Search"</span> <span class="o">/></span> -<span class="nt"></script></span> -</code></pre> -</div><p><strong>Tip</strong>: Place all your templates in a file and serve them from a <span class="caps">CDN</span>. This ensures your users will always have your application cached.</p> -<h4>Listening for events</h4> -<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="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="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="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="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> - -<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> - <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_input"</span> <span class="o">/></span> - <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_button"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Search"</span> <span class="o">/></span> -<span class="nt"></script></span> -</code></pre> -</div><h4>Tips and Tricks</h4> -<p><strong>Using template variables</strong></p> -<div class="highlight"><pre><code class="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="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> - -<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="c"><!--</span> <span class="nx">Access</span> <span class="nx">template</span> <span class="nx">variables</span> <span class="kd">with</span> <span class="o"><%=</span> <span class="o">%></span> <span class="o">--></span> - <span class="o"><</span><span class="nx">label</span><span class="o">><%=</span> <span class="nx">search_label</span> <span class="o">%><</span><span class="err">/label></span> - <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_input"</span> <span class="o">/></span> - <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_button"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Search"</span> <span class="o">/></span> -<span class="nt"></script></span> -</code></pre> -</div><p>If you have any questions, leave a comment below.</p> -<h3>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li> - <li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google <span class="caps">API</span></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>Author</h3> -<ul> - <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> -</ul> -<h3>Contributors</h3> -<ul> - <li><a href="https://github.com/zaeleus">Michael Macias</a></li> -</ul> -</div> -<!-- AddThis Button BEGIN --> -<div class="addthis_toolbox addthis_default_style "> -<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> -<a class="addthis_button_tweet"></a> -<a class="addthis_counter addthis_pill_style"></a> -</div> -<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script> -<!-- AddThis Button END --> -<script> -var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; -var idcomments_post_id; -var idcomments_post_url = 'http://backbonetutorials.com/what-is-a-view'; -</script> -<span id="IDCommentsPostTitle" style="display:none"></span> -<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script> -</div> - - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> diff --git a/_site/why-would-you-use-backbone/index.html b/_site/why-would-you-use-backbone/index.html deleted file mode 100644 index 6dfca0a..0000000 --- a/_site/why-would-you-use-backbone/index.html +++ /dev/null @@ -1,131 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> -<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>Why would you use backbone.js? - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - .FlattrButton { - position: absolute; - top: 15px; - right: 15px; - } - </style> - <script type="text/javascript"> -/* <![CDATA[ */ - (function() { - var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; - s.type = 'text/javascript'; - s.async = true; - s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; - t.parentNode.insertBefore(s, t); - })(); -/* ]]> */ -</script> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> - - <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> -<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> -<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> - -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/examples.html">examples</a> - <a href="/contribute.html">contribute</a> - <a href="/about.html">about</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <div id="post"> -<h2>Why do you need backbone.js?</h2> -<p>Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete <span class="caps">DOM</span> elements.</p> -<p>I shouldn’t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.</p> -<h3>So how does backbone.js help?</h3> -<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to backbone.js light nature you can incrementally include it in any current or future projects.</p> -<h3>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> - <li><a href="http://news.ycombinator.com/item?id=2119704">great hackernews discussion /w post from author</a></li> -</ul> -</div> -<!-- AddThis Button BEGIN --> -<div class="addthis_toolbox addthis_default_style "> -<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> -<a class="addthis_button_tweet"></a> -<a class="addthis_counter addthis_pill_style"></a> -</div> -<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script> -<!-- AddThis Button END --> -<script> -var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; -var idcomments_post_id; -var idcomments_post_url = 'http://backbonetutorials.com/what-would-you-use-backbone'; -</script> -<span id="IDCommentsPostTitle" style="display:none"></span> -<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script> -</div> - - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> |