diff options
| author | Thomas Davis <thomasalwyndavis@gmail.com> | 2011-08-30 21:15:25 +1000 |
|---|---|---|
| committer | Thomas Davis <thomasalwyndavis@gmail.com> | 2011-08-30 21:15:25 +1000 |
| commit | 1d0a086a50a70df4bfb0cdfc0016d66cb37e71dc (patch) | |
| tree | 5154c49ec548824daa3f7b571b202c08a87be84c /_site/pygments | |
| parent | cc55c4447016eee6162ecda10b803b8f1a481a95 (diff) | |
| download | backbonetutorials-1d0a086a50a70df4bfb0cdfc0016d66cb37e71dc.zip backbonetutorials-1d0a086a50a70df4bfb0cdfc0016d66cb37e71dc.tar.gz backbonetutorials-1d0a086a50a70df4bfb0cdfc0016d66cb37e71dc.tar.bz2 | |
nN
Diffstat (limited to '_site/pygments')
| -rw-r--r-- | _site/pygments/CNAME | 1 | ||||
| -rw-r--r-- | _site/pygments/README.md | 15 | ||||
| -rw-r--r-- | _site/pygments/about.html | 83 | ||||
| -rw-r--r-- | _site/pygments/atom.xml | 381 | ||||
| -rw-r--r-- | _site/pygments/contact.html | 82 | ||||
| -rw-r--r-- | _site/pygments/contribute.html | 83 | ||||
| -rw-r--r-- | _site/pygments/css/reset.css | 260 | ||||
| -rw-r--r-- | _site/pygments/css/ribbon.css | 115 | ||||
| -rw-r--r-- | _site/pygments/css/stacklayout.css | 96 | ||||
| -rw-r--r-- | _site/pygments/css/style.css | 81 | ||||
| -rw-r--r-- | _site/pygments/css/syntax.css | 60 | ||||
| -rw-r--r-- | _site/pygments/index.html | 113 | ||||
| -rw-r--r-- | _site/pygments/what-is-a-model/index.html | 261 | ||||
| -rw-r--r-- | _site/pygments/what-is-a-view/index.html | 257 | ||||
| -rw-r--r-- | _site/pygments/why-would-you-use-backbone/index.html | 101 |
15 files changed, 1989 insertions, 0 deletions
diff --git a/_site/pygments/CNAME b/_site/pygments/CNAME new file mode 100644 index 0000000..0c9de91 --- /dev/null +++ b/_site/pygments/CNAME @@ -0,0 +1 @@ +backbonetutorials.com diff --git a/_site/pygments/README.md b/_site/pygments/README.md new file mode 100644 index 0000000..d0e47f3 --- /dev/null +++ b/_site/pygments/README.md @@ -0,0 +1,15 @@ + +# 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/pygments/about.html b/_site/pygments/about.html new file mode 100644 index 0000000..d3da6bf --- /dev/null +++ b/_site/pygments/about.html @@ -0,0 +1,83 @@ +<!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 new file mode 100644 index 0000000..2fbf3c7 --- /dev/null +++ b/_site/pygments/atom.xml @@ -0,0 +1,381 @@ +<?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 new file mode 100644 index 0000000..e1ad82a --- /dev/null +++ b/_site/pygments/contact.html @@ -0,0 +1,82 @@ +<!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 new file mode 100644 index 0000000..6047046 --- /dev/null +++ b/_site/pygments/contribute.html @@ -0,0 +1,83 @@ +<!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 new file mode 100644 index 0000000..5b41bb7 --- /dev/null +++ b/_site/pygments/css/reset.css @@ -0,0 +1,260 @@ +/** + * 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 new file mode 100644 index 0000000..580b9d3 --- /dev/null +++ b/_site/pygments/css/ribbon.css @@ -0,0 +1,115 @@ +@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 new file mode 100644 index 0000000..149a432 --- /dev/null +++ b/_site/pygments/css/stacklayout.css @@ -0,0 +1,96 @@ +/* +* 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 new file mode 100644 index 0000000..d9a8e4e --- /dev/null +++ b/_site/pygments/css/style.css @@ -0,0 +1,81 @@ + +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 new file mode 100644 index 0000000..2774b76 --- /dev/null +++ b/_site/pygments/css/syntax.css @@ -0,0 +1,60 @@ +.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 new file mode 100644 index 0000000..b442da1 --- /dev/null +++ b/_site/pygments/index.html @@ -0,0 +1,113 @@ +<!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 new file mode 100644 index 0000000..8570c1a --- /dev/null +++ b/_site/pygments/what-is-a-model/index.html @@ -0,0 +1,261 @@ +<!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; + position: relative; + } + .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/what-is-a-view/index.html b/_site/pygments/what-is-a-view/index.html new file mode 100644 index 0000000..0cd2f72 --- /dev/null +++ b/_site/pygments/what-is-a-view/index.html @@ -0,0 +1,257 @@ +<!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 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; + } + </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 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">"Welcome to this world"</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’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>None</li> +</ul> +</div> +<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/pygments/why-would-you-use-backbone/index.html b/_site/pygments/why-would-you-use-backbone/index.html new file mode 100644 index 0000000..73a5b4a --- /dev/null +++ b/_site/pygments/why-would-you-use-backbone/index.html @@ -0,0 +1,101 @@ +<!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> |