diff options
| author | Ryan Kirkman <ryan@ryankirkman.com> | 2011-10-25 00:03:43 +1000 |
|---|---|---|
| committer | Ryan Kirkman <ryan@ryankirkman.com> | 2011-10-25 00:03:43 +1000 |
| commit | b5313ff320576aaa0b66a2552b08a6461fce05eb (patch) | |
| tree | 920a1415a9ba8b7a3f3afa45aea75f65e061cb0c | |
| parent | 83aa56b4cd4477933bb6da6d745c9f86ea1e6ec5 (diff) | |
| download | backbonetutorials-b5313ff320576aaa0b66a2552b08a6461fce05eb.zip backbonetutorials-b5313ff320576aaa0b66a2552b08a6461fce05eb.tar.gz backbonetutorials-b5313ff320576aaa0b66a2552b08a6461fce05eb.tar.bz2 | |
girls are hard
45 files changed, 3153 insertions, 361 deletions
diff --git a/_layouts/.default.html.swp b/_layouts/.default.html.swp Binary files differnew file mode 100644 index 0000000..b1d9aed --- /dev/null +++ b/_layouts/.default.html.swp diff --git a/_layouts/default.html b/_layouts/default.html index 962f51a..e0f8f89 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -75,10 +75,10 @@ <div class="menu"> <a href="/">home</a> <a href="/examples.html">examples</a> - <a href="/contribute.html">contribute</a> + <!-- <a href="/contribute.html">contribute</a>--> <a href="/about.html">about</a> <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - <a href="/lessons.html"><strong>team training</strong></a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> </div> diff --git a/_layouts/post.html b/_layouts/post.html index 0d32463..18bdb4d 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,6 +4,8 @@ layout: default <div id="post"> {{ content }} </div> + +<p>Leave a comment or donation(top right) to let me know that I've helped you and continue doing what I do</p> <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> diff --git a/about.textile b/about.textile index c421fbd..68b65c4 100644 --- a/about.textile +++ b/about.textile @@ -11,4 +11,4 @@ I started this site to not only consolidate my understanding of backbone.js but p. You can contact the original owner of this site through "github":https://github.com/thomasdavis or via twitter("@neutralthoughts":http://twitter.com/neutralthoughts). You can also find me at #cdnjs on freenode.net. - +thomasalwyndavis@gmail.com diff --git a/pygments/README.md b/pygments/README.md index d0e47f3..8b39281 100644 --- a/pygments/README.md +++ b/pygments/README.md @@ -1,4 +1,3 @@ - # Backbone Tutorials This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome. @@ -13,3 +12,28 @@ 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 +* Thanks to Wes Bos ([https://github.com/wesbos](https://github.com/wesbos)) for CSS fixes +* Thanks to Paul Irish ([https://github.com/https://github.com/paulirish](https://github.com/paulirish)) for tutorial clarification + +## About the author + +Looking for feedback on my latest startup Protosal(http://protosal.com) any and all would be great! + +**Contact:** + +* \#cdnjs on freenode +* @neutralthoughts on twitter +* thomasalwyndavis@gmail.com + +**Projects:** + +* Javascript Library CDN - http://cdnjs.com +* Proposal Generation Start up - http://protosal.com +* Backbone.js Tutorials - http://backbonetutorials.com +* Technical Blog - http://thomasdavis.github.com +* Github Account - https://github.com/thomasdavis +* Freelance Blog - http://thomasalwyndavis.com +* Quora - http://www.quora.com/Thomas-Davis +* StackOverflow - http://stackoverflow.com/users/580675/thomas-davis + +Love you mum! diff --git a/pygments/about.html b/pygments/about.html index d3da6bf..e9402c0 100644 --- a/pygments/about.html +++ b/pygments/about.html @@ -1,7 +1,8 @@ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>About Backbone Tutorials - Backbone.js Tutorials</title> <link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> <meta name="author" content="Backbone Tutorials" /> @@ -41,7 +42,23 @@ width: 720px; margin: auto; } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> </head> <body> <div class="left ribbon-holder"> @@ -49,13 +66,19 @@ <span class="text">Fork on GitHub</span> </a> </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + <div class="container"> <div class="menu"> <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> </div> @@ -64,11 +87,16 @@ <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> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + <hr> <h2>About Backbone Tutorials</h2> <p>As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial.</p> <p>I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others.</p> +<p>You can contact the original owner of this site through <a href="https://github.com/thomasdavis">github</a> or via twitter(<a href="http://twitter.com/neutralthoughts">@neutralthoughts</a>). You can also find me at #cdnjs on freenode.net.</p> diff --git a/pygments/atom.xml b/pygments/atom.xml index 2fbf3c7..5c4c122 100644 --- a/pygments/atom.xml +++ b/pygments/atom.xml @@ -4,7 +4,7 @@ <title>Backbone Tutorials</title> <link href="http://backbonetutorials.com/atom.xml" rel="self"/> <link href="http://backbonetutorials.com/"/> - <updated>2011-04-18T18:03:50+10:00</updated> + <updated>2011-10-24T23:56:02+10:00</updated> <id>http://backbonetutorials.com/</id> <author> <name>Thomas Davis</name> @@ -13,19 +13,388 @@ <entry> - <title>Why would you use backbone.js?</title> + <title>Organizing your application using Modules (require.js)</title> + <link href="http://backbonetutorials.com/organizing-backbone-using-modules"/> + <updated>2011-10-10T00:00:00+10:00</updated> + <id>http://backbonetutorials.com/organizing-backbone-using-modules</id> + <content type="html"><h2>Organizing your application using Modules (require.js)</h2> +<p>Unfortunatly Backbone.js does not tell you how to organize your code leaving many developers in the dark regarding how to load scripts and lay out their development enviroments.</p> +<p>This was quite a different decision to other Javascript <span class="caps">MVC</span> frameworks who were more in favor of setting a development philosophy.</p> +<p>Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code.</p> +<p>This tutorial will get you started on combining Backbone.js with <a href="https://github.com/amdjs/amdjs-api/wiki/AMD"><span class="caps">AMD</span></a> (Asynchronous Module Definitions).</p> +<h3>What is <span class="caps">AMD</span>?</h3> +<p><a href="https://github.com/amdjs/amdjs-api/wiki/AMD">Asynchronous Module Definitions</a> designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around <span class="caps">AMD</span>, seeing it as the future of modular Javascript development.</p> +<p>This tutorial will use <a href="http://requirejs.org">Require.js</a> to implement a modular and organized Backbone.js.</p> +<p><b>I highly recommend using <span class="caps">AMD</span> for application development</b></p> +<p>Quick Overview</p> +<ul> + <li>Modular</li> + <li>Scalable</li> + <li>Compiles well(see <a href="http://requirejs.org/docs/optimization.html">r.js</a>)</li> + <li>Market Adoption( <a href="http://dojotoolkit.org/reference-guide/releasenotes/1.6.html">Dojo 1.6 converted fully to <span class="caps">AMD</span></a> )</li> +</ul> +<h3>Why Require.js?</h3> +<p>Require.js has a boastful community and is growing rapidly. <a href="http://tagneto.blogspot.com/">James Burke</a> the author is married to Require.js and responds to user feedback always. A leading expert in script loading, he is also a contributer to the <span class="caps">AMD</span> specification.</p> +<p><a href="https://twitter.com/jrburke" class="twitter-follow-button">Follow @jrburke</a><br /> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></p> +<h3>Getting started</h3> +<p>To easily understand this tutorial you should jump straight into the example code base.</p> +<h3><a href="https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/modular-backbone">Example Codebase</a></h3> +<h3><a href="http://backbonetutorials.com/examples/modular-backbone">Example Demo</a></h3> +<p>The tutorial is only loosely coupled with the example and you will find the example to be more comprehensive.</p> +<p>If you would like to see how a particuliar use case would be implemented please visit the Github page and create an issue.(Example Request: How to do nested views).</p> +<p>The example isn&#8217;t super fleshed out but should give you a vague idea.</p> +<h3>Example File Structure</h3> +<p>There are many different ways to lay out your files and I believe it is actually dependent on the size and type of the project. In the example below views and templates are mirroed in file structure. Collections and Models aren&#8217;t categorized into folders kind of like an <span class="caps">ORM</span>.</p> +<div class="highlight"><pre><code class="javascript"><span class="cm">/* File Structure</span> +<span class="cm">├── imgs</span> +<span class="cm">├── css</span> +<span class="cm">│ └── style.css</span> +<span class="cm">├── templates</span> +<span class="cm">│ ├── projects</span> +<span class="cm">│ │ ├── list.html</span> +<span class="cm">│ │ └── edit.html</span> +<span class="cm">│ └── users</span> +<span class="cm">│ ├── list.html</span> +<span class="cm">│ └── edit.html</span> +<span class="cm">├── js</span> +<span class="cm">│ ├── libs</span> +<span class="cm">│ │ ├── jquery</span> +<span class="cm">│ │ │ ├── jquery.min.js</span> +<span class="cm">│ │ │ └── jquery.js // jQuery Library Wrapper</span> +<span class="cm">│ │ ├── backbone</span> +<span class="cm">│ │ │ ├── backbone.min.js</span> +<span class="cm">│ │ │ └── backbone.js // Backbone Library Wrapper</span> +<span class="cm">│ │ └── underscore</span> +<span class="cm">│ │ │ ├── underscore.min.js</span> +<span class="cm">│ │ │ └── underscore.js // Underscore Library Wrapper</span> +<span class="cm">│ ├── models</span> +<span class="cm">│ │ ├── users.js</span> +<span class="cm">│ │ └── projects.js</span> +<span class="cm">│ ├── collections</span> +<span class="cm">│ │ ├── users.js</span> +<span class="cm">│ │ └── projects.js</span> +<span class="cm">│ ├── views</span> +<span class="cm">│ │ ├── projects</span> +<span class="cm">│ │ │ ├── list.js</span> +<span class="cm">│ │ │ └── edit.js</span> +<span class="cm">│ │ └── users</span> +<span class="cm">│ │ ├── list.js</span> +<span class="cm">│ │ └── edit.js</span> +<span class="cm">│ ├── router.js</span> +<span class="cm">│ ├── app.js</span> +<span class="cm">│ ├── main.js // Bootstrap</span> +<span class="cm">│ ├── order.js //Require.js plugin</span> +<span class="cm">│ └── text.js //Require.js plugin</span> +<span class="cm">└── index.html</span> + +<span class="cm">*/</span> +</code></pre> +</div> +<p>To continue you must really understand what we are aiming towards as described in the introduction.</p> +<h3>Bootstrapping your application</h3> +<p>Using Require.js we define a single entry point on our index page. <br /> +We should setup any useful containers that might be used by our Backbone views.</p> +<p><b>Note</b>: The data-main attribute on our single script tag tells Require.js to load the script located at &#8220;js/main.js&#8221;. It automatically appends the &#8220;.js&#8221;</p> +<div class="highlight"><pre><code class="html"><span class="cp">&lt;!doctype html&gt;</span> +<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span> +<span class="nt">&lt;head&gt;</span> + <span class="nt">&lt;title&gt;</span>Jackie Chan<span class="nt">&lt;/title&gt;</span> + <span class="c">&lt;!-- Load the script &quot;js/main.js&quot; as our entry point --&gt;</span> + <span class="nt">&lt;script </span><span class="na">data-main=</span><span class="s">&quot;js/main&quot;</span> <span class="na">src=</span><span class="s">&quot;js/libs/require/require.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span> +<span class="nt">&lt;/head&gt;</span> +<span class="nt">&lt;body&gt;</span> + +<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span> + <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;menu&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> + <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> +<span class="nt">&lt;/div&gt;</span> + +<span class="nt">&lt;/body&gt;</span> +<span class="nt">&lt;/html&gt;</span> +</code></pre> +</div> +<p>You should most always end up with quite a light weight index file. You can serve this off your server and then the rest of your site off a <span class="caps">CDN</span> ensuring that everything that can be cached, will be.</p> +<h4>What does the bootstrap look like?</h4> +<p>Our bootstrap file will be responsible for configuring Require.js and loading initially important dependencies.</p> +<p>In the below example we configure Require.js to create shortcut alias to commonly used scripts such as jQuery, Underscore and Backbone.</p> +<p>Due to the nature of these libraries implementations we actually have to load them in order because they each depend on each other existing in the global namespace(which is bad but is all we have to work with).</p> +<p>Hopefully if the <span class="caps">AMD</span> specification takes off these libraries will add code to allow themselves to be loaded asynchronously. Due to this inconvience the bootstrap is not as intuitive as it could be, I hope to solve this problem in the near future.</p> +<p>We also request a module called &#8220;app&#8221;, this will contain the entireity of our application logic.</p> +<p><b>Note:</b> Modules are loaded relativly to the boot strap and always append with &#8220;.js&#8221;. So the module &#8220;app&#8221; will load &#8220;app.js&#8221; which is in the same directory as the bootstrap.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: main.js</span> + +<span class="c1">// Require.js allows us to configure shortcut alias</span> +<span class="c1">// There usage will become more apparent futher along in the tutorial.</span> +<span class="nx">require</span><span class="p">.</span><span class="nx">config</span><span class="p">({</span> + <span class="nx">paths</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">jQuery</span><span class="o">:</span> <span class="s1">&#39;libs/jquery/jquery&#39;</span><span class="p">,</span> + <span class="nx">Underscore</span><span class="o">:</span> <span class="s1">&#39;libs/underscore/underscore&#39;</span><span class="p">,</span> + <span class="nx">Backbone</span><span class="o">:</span> <span class="s1">&#39;libs/backbone/backbone&#39;</span> + <span class="p">}</span> + +<span class="p">});</span> + +<span class="nx">require</span><span class="p">([</span> + + <span class="c1">// Load our app module and pass it to our definition function</span> + <span class="s1">&#39;app&#39;</span><span class="p">,</span> + + <span class="c1">// Some plugins have to be loaded in order due to there non AMD compliance</span> + <span class="c1">// Because these scripts are not &quot;modules&quot; they do not pass any values to the definition function below</span> + <span class="s1">&#39;order!libs/jquery/jquery-min&#39;</span><span class="p">,</span> + <span class="s1">&#39;order!libs/underscore/underscore-min&#39;</span><span class="p">,</span> + <span class="s1">&#39;order!libs/backbone/backbone-min&#39;</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">App</span><span class="p">){</span> + <span class="c1">// The &quot;app&quot; dependency is passed in as &quot;App&quot;</span> + <span class="c1">// Again, the other dependencies passed in are not &quot;AMD&quot; therefore don&#39;t pass a parameter to this function</span> + <span class="nx">App</span><span class="p">.</span><span class="nx">initialize</span><span class="p">();</span> +<span class="p">});</span> +</code></pre> +</div> +<h3>How should we lay out external scripts?</h3> +<p>Any modules we develop for our application using <span class="caps">AMD</span>/Require.js will be asynchronously loaded.</p> +<p>We have a heavy dependency on jQuery, Underscore and Backbone, unfortunatly this libraries are loaded synchronously and also depend on each other existing in the global namespace.</p> +<p>Below I propose a solution(until these libraries allow themselves to be loaded asynchronously) to allow these libraries to be loaded properly(synchronously) and also removing themselves from global scope.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: libs/jquery/jquery.js</span> + +<span class="nx">define</span><span class="p">([</span> +<span class="c1">// Load the original jQuery source file</span> + <span class="s1">&#39;order!libs/jquery/jquery-min&#39;</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Tell Require.js that this module returns a reference to jQuery</span> + <span class="k">return</span> <span class="nx">$</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: libs/underscore/underscore</span> +<span class="c1">// As above lets load the original underscore source code</span> +<span class="nx">define</span><span class="p">([</span><span class="s1">&#39;order!libs/underscore/underscore-min&#39;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Tell Require.js that this module returns a reference to Underscore</span> + <span class="k">return</span> <span class="nx">_</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<div class="highlight"><pre><code class="javascript"> <span class="c1">// Filename: libs/backbone/backbone</span> + <span class="c1">// Finally lets load the original backbone source code</span> +<span class="nx">define</span><span class="p">([</span><span class="s1">&#39;order!libs/backbone/backbone-min&#39;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Now that all the orignal source codes have ran and accessed each other</span> + <span class="c1">// We can call noConflict() to remove them from the global name space</span> + <span class="c1">// Require.js will keep a reference to them so we can use them in our modules</span> + <span class="nx">_</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">();</span> + <span class="nx">$</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">();</span> + <span class="k">return</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">();</span> +<span class="p">});</span> +</code></pre> +</div> +<h3>A boiler plate module</h3> +<p>So before we start developing our application, let&#8217;s quickly look over boiler plate code that will be reused quite often.</p> +<p>For convience sake I generally keep a &#8220;boilerplate.js&#8221; in my application root so I can copy it when I need to.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">//Filename: boilerplate.js</span> + +<span class="nx">define</span><span class="p">([</span> + <span class="c1">// These are path alias that we configured in our bootstrap</span> + <span class="s1">&#39;jQuery&#39;</span><span class="p">,</span> <span class="c1">// lib/jquery/jquery</span> + <span class="s1">&#39;Underscore&#39;</span><span class="p">,</span> <span class="c1">// lib/underscore/underscore</span> + <span class="s1">&#39;Backbone&#39;</span> <span class="c1">// lib/backbone/backbone</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">){</span> + <span class="c1">// Above we have passed in jQuery, Underscore and Backbone</span> + <span class="c1">// They will not be accesible in the global scope</span> + <span class="k">return</span> <span class="p">{};</span> + <span class="c1">// What we return here will be used by other modules </span> +<span class="p">});</span> +</code></pre> +</div> +<p>The first argument of the define function is our dependency array, we can pass in any modules we like in the future.</p> +<h3>App.js Building our applications main module</h3> +<p>Our applications main module should always remain quite light weight. This tutorial covers only setting up a Backbone Router and initializing it in our main module.</p> +<p>The router will then load the correct dependencies depending on the current <span class="caps">URL</span>.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: app.js</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">&#39;jQuery&#39;</span><span class="p">,</span> + <span class="s1">&#39;Underscore&#39;</span><span class="p">,</span> + <span class="s1">&#39;Backbone&#39;</span><span class="p">,</span> + <span class="s1">&#39;router&#39;</span><span class="p">,</span> <span class="c1">// Request router.js</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">Router</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">initialize</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Pass in our Router module and call it&#39;s initialize function</span> + <span class="nx">Router</span><span class="p">.</span><span class="nx">initialize</span><span class="p">();</span> + <span class="p">}</span> + + <span class="k">return</span> <span class="p">{</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="nx">initialize</span> + <span class="p">};</span> +<span class="p">});</span> +</code></pre> +</div> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: router.js</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">&#39;jQuery&#39;</span><span class="p">,</span> + <span class="s1">&#39;Underscore&#39;</span><span class="p">,</span> + <span class="s1">&#39;Backbone&#39;</span><span class="p">,</span> + <span class="s1">&#39;views/projects/list&#39;</span><span class="p">,</span> + <span class="s1">&#39;views/users/list&#39;</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">Session</span><span class="p">,</span> <span class="nx">projectListView</span><span class="p">,</span> <span class="nx">userListView</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + <span class="c1">// Define some URL routes</span> + <span class="s1">&#39;/projects&#39;</span><span class="o">:</span> <span class="s1">&#39;showProjects&#39;</span><span class="p">,</span> + <span class="s1">&#39;/users&#39;</span><span class="o">:</span> <span class="s1">&#39;showUsers&#39;</span><span class="p">,</span> + + <span class="c1">// Default</span> + <span class="s1">&#39;*actions&quot;: &quot;defaultAction&#39;</span> + <span class="p">},</span> + <span class="nx">showProjects</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Call render on the module we loaded in via the dependency array</span> + <span class="c1">// &#39;views/projects/list&#39;</span> + <span class="nx">projectListView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="c1">// As above, call render on our loaded module</span> + <span class="c1">// &#39;views/users/list&#39;</span> + <span class="nx">showUsers</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">userListView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">defaultAction</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">actions</span><span class="p">){</span> + <span class="c1">// We have no matching route, lets just log what the URL was</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;No route:&#39;</span><span class="p">,</span> <span class="nx">actions</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">initialize</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> + <span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span> + <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> + <span class="p">};</span> + <span class="k">return</span> <span class="p">{</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="nx">initialize</span> + <span class="p">};</span> +<span class="p">});</span> +</code></pre> +</div> +<h3>Modularizing a Backbone View</h3> +<p>Backbone views most usually always interact with the <span class="caps">DOM</span>, using our new modular system we can load in Javascript templates using Require.js text! plugin.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: views/project/list</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">&#39;jQuery&#39;</span><span class="p">,</span> + <span class="s1">&#39;Underscore&#39;</span><span class="p">,</span> + <span class="s1">&#39;Backbone&#39;</span><span class="p">,</span> + <span class="c1">// Using the Require.js text! plugin, we are loaded raw text</span> + <span class="c1">// which will be used as our views primary template</span> + <span class="s1">&#39;text!templates/project/list.html&#39;</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">projectListTemplate</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">projectListView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#container&#39;</span><span class="p">),</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Using Underscore we can compile our template with data</span> + <span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{};</span> + <span class="kd">var</span> <span class="nx">compiledTemplate</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">projectListTemplate</span><span class="p">,</span> <span class="nx">data</span> <span class="p">);</span> + <span class="c1">// Append our compiled template to this Views &quot;el&quot;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span> <span class="nx">compiledTemplate</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// Our module now returns an instantiated view</span> + <span class="c1">// Sometimes you might return an un-instantiated view e.g. return projectListView</span> + <span class="k">return</span> <span class="k">new</span> <span class="nx">projectListView</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<p>Javascript templating allows us to seperate the design from the application logic placing all our html in the templates folder.</p> +<h3>Modularizing a Collection, Model and View</h3> +<p>Now we put it altogether by chaining up a Model, Collection and View which is a typical scenairo when building a Backbone.js application.</p> +<p>First off we will define our model</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: models/project</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">&#39;Underscore&#39;</span><span class="p">,</span> + <span class="s1">&#39;Backbone&#39;</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">projectModel</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Harry Potter&quot;</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// You usually don&#39;t return a model instantiated</span> + <span class="k">return</span> <span class="nx">projectModel</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<p>Now we have a model, our collection module can depend on it. We will set the &#8220;model&#8221; attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.</p> +<p>&#8220;Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.&#8221;</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: collections/projects</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">&#39;Underscore&#39;</span><span class="p">,</span> + <span class="s1">&#39;Backbone&#39;</span><span class="p">,</span> + <span class="c1">// Pull in the Model module from above</span> + <span class="s1">&#39;models/project&#39;</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">projectModel</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">projectCollection</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">model</span><span class="o">:</span> <span class="nx">projectModel</span> + <span class="p">});</span> + <span class="c1">// You don&#39;t usually return a collection instantiated</span> + <span class="k">return</span> <span class="k">new</span> <span class="nx">projectCollection</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<p>Now we can simply depend on our collection in our view and pass it to our Javascript template.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: views/projects/list</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">&#39;jQuery&#39;</span><span class="p">,</span> + <span class="s1">&#39;Underscore&#39;</span><span class="p">,</span> + <span class="s1">&#39;Backbone&#39;</span><span class="p">,</span> + <span class="c1">// Pull in the Collection module from above</span> + <span class="s1">&#39;collections/projects&#39;</span><span class="p">,</span> + <span class="err">&#39;</span><span class="nx">text</span><span class="o">!</span><span class="nx">templates</span><span class="o">/</span><span class="nx">projects</span><span class="o">/</span><span class="nx">list</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">projectsCollection</span><span class="p">,</span> <span class="nx">projectsListTemplate</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">projectListView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#container&quot;</span><span class="p">),</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">collection</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">projectsCollection</span><span class="p">;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">add</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Ginger Kid&quot;</span><span class="p">});</span> + <span class="c1">// Compile the template using Underscores micro-templating</span> + <span class="kd">var</span> <span class="nx">compiledTemplate</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">projectsListTemplate</span><span class="p">,</span> <span class="p">{</span> <span class="nx">projects</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">models</span> <span class="p">}</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">compiledTemplate</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// Returning instantiated views can be quite useful for having &quot;state&quot;</span> + <span class="k">return</span> <span class="k">new</span> <span class="nx">projectListView</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<h3>Conclusion</h3> +<p>Looking forward to feedback so I can turn this post and example into quality references on building modular Javascript applications.</p> +<p>Get in touch with me on twitter, comments or github!</p> +<h3>Relevant Links</h3> +<p><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></p> +<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> + + <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> + <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 simply using <a href="http://jquery.com">jQuery</a> or <a href="http://mootools.net">MooTools</a>. The problem is standard JavaScript libraries are great at what they do &#8211; 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>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://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> +<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/FND"><span class="caps">FND</span></a></li> </ul></content> </entry> @@ -48,7 +417,8 @@ <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> +</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> @@ -64,7 +434,8 @@ <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> +</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> @@ -80,7 +451,8 @@ <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> +</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> @@ -100,7 +472,8 @@ <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> +</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> @@ -123,9 +496,10 @@ <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> +</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> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our &#8220;person&#8221; changes we will alert their new name.</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> @@ -134,23 +508,21 @@ <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="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;change:name&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> + <span class="kd">var</span> <span class="nx">name</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;name&quot;</span><span class="p">);</span> <span class="c1">// &#39;Stewie Griffin&#39;</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Changed my name to &quot;</span> <span class="o">+</span> <span class="nx">name</span> <span class="p">);</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="nx">replaceNameAttr</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">name</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">name</span><span class="o">:</span> <span class="nx">name</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> - + <span class="nx">person</span><span class="p">.</span><span class="nx">replaceNameAttr</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> +</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> @@ -163,7 +535,8 @@ <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> +<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> @@ -191,7 +564,8 @@ <span class="c1">// God have mercy on our souls</span> </code></pre> -</div><h3>Relevant Links</h3> +</div> +<h3>Relevant Links</h3> <ul> <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> </ul> @@ -211,162 +585,320 @@ <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> +<p>Backbone views are used to reflect what your applications&#8217; data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically <a href="http://documentcloud.github.com/underscore/#template">Underscore.js&#8217;s _.template</a>.</p> +<p>We will be using <a href="http://jquery.com/">jQuery 1.5</a> as our <span class="caps">DOM</span> manipulator. It&#8217;s possible to use other libraries such as <a href="http://mootools.net/">MooTools</a> or <a href="http://sizzlejs.com/">Sizzle</a>, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.</p> +<p>For the purposes of this demonstration, we will be implementing a search box. <a href="http://jsfiddle.net/thomas/C9wew/6">A live example</a> can be found on jsFiddle.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Alerts suck.&quot;</span><span class="p">);</span> <span class="p">}</span> <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">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> - + + <span class="c1">// The initialize function is always called when instantiating a Backbone View.</span> + <span class="c1">// Consider it the constructor of the class.</span> + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">;</span> </code></pre> -</div><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> +</div> +<h4>The &#8220;el&#8221; property</h4> +<p>The &#8220;el&#8221; property references the <span class="caps">DOM</span> object created in the browser. Every Backbone.js view has an &#8220;el&#8221; property, and if it not defined, Backbone.js will construct its own, which is an empty div element.</p> +<p>Let us set our view&#8217;s &#8220;el&#8221; property to div#search_container, effectively making Backbone.View the owner of the <span class="caps">DOM</span> element.</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Alerts suck.&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> +<span class="nt">&lt;/script&gt;</span> +</code></pre> +</div> +<p><strong>Note</strong>: Keep in mind that this binds the container element. Any events we trigger must be in this element.</p> +<h4>Loading a template</h4> +<p>Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to <a href="http://documentcloud.github.com/underscore/">Underscore.js&#8217;s documentation</a> for more information.</p> +<p>Let us implement a &#8220;render()&#8221; function and call it when the view is initialized. The &#8220;render()&#8221; function will load our template into the view&#8217;s &#8220;el&#8221; property using jQuery.</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> + <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;</span><span class="nx">Search</span><span class="o">&lt;</span><span class="err">/label&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_input&quot;</span> <span class="o">/&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_button&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Search&quot;</span> <span class="o">/&gt;</span> +<span class="nt">&lt;/script&gt;</span> +</code></pre> +</div> +<p><strong>Tip</strong>: Place all your templates in a file and serve them from a <span class="caps">CDN</span>. This ensures your users will always have your application cached.</p> +<h4>Listening for events</h4> +<p>To attach a listener to our view, we use the &#8220;events&#8221; attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the &#8220;el&#8221; property. Let us attach a &#8220;click&#8221; listener to our button.</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="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">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;click input[type=button]&quot;</span><span class="o">:</span> <span class="s2">&quot;doSearch&quot;</span> + <span class="p">},</span> + <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> + <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Search for &quot;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_input&quot;</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> <span class="p">}</span> <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">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> - + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> + <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;</span><span class="nx">Search</span><span class="o">&lt;</span><span class="err">/label&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_input&quot;</span> <span class="o">/&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_button&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Search&quot;</span> <span class="o">/&gt;</span> +<span class="nt">&lt;/script&gt;</span> </code></pre> -</div><h4>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> +</div> +<h4>Tips and Tricks</h4> +<p><strong>Using template variables</strong></p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">//Pass variables in using Underscore.js Template</span> + <span class="kd">var</span> <span class="nx">variables</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">search_label</span><span class="o">:</span> <span class="s2">&quot;My Search&quot;</span> <span class="p">};</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="nx">variables</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;click input[type=button]&quot;</span><span class="o">:</span> <span class="s2">&quot;doSearch&quot;</span> + <span class="p">},</span> + <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> + <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Search for &quot;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_input&quot;</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> + <span class="c">&lt;!--</span> <span class="nx">Access</span> <span class="nx">template</span> <span class="nx">variables</span> <span class="kd">with</span> <span class="o">&lt;%=</span> <span class="o">%&gt;</span> <span class="o">--&gt;</span> + <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;&lt;%=</span> <span class="nx">search_label</span> <span class="o">%&gt;&lt;</span><span class="err">/label&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_input&quot;</span> <span class="o">/&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_button&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Search&quot;</span> <span class="o">/&gt;</span> +<span class="nt">&lt;/script&gt;</span> +</code></pre> +</div> +<p>If you have any questions, leave a comment below.</p> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li> + <li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google <span class="caps">API</span></a></li> + <li><a href="http://jsfiddle.net/thomas/C9wew/4/">This examples exact code on jsfiddle.net</a></li> + <li><a href="http://jsfiddle.net/thomas/dKK9Y/6/">Another semi-complete example on jsFiddle</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="https://github.com/zaeleus">Michael Macias</a></li> +</ul></content> + </entry> + + <entry> + <title>What is a router?</title> + <link href="http://backbonetutorials.com/what-is-a-router"/> + <updated>2011-01-27T00:00:00+10:00</updated> + <id>http://backbonetutorials.com/what-is-a-router</id> + <content type="html"><h2>What is a router?</h2> +<p>Backbone routers are used for routing your applications URL&#8217;s when using hash tags(#). In the traditional <span class="caps">MVC</span> sense they don&#8217;t neccesarily fit the semantics and if you have read &#8220;<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>&#8221; it will elaborate on this point. Though a Backbone &#8220;router&#8221; is still very useful for any application/feature that needs <span class="caps">URL</span> routing/history capabilities.</p> +<p>Defined routers should always contain at least one route and a function to map the particular route to. In the example below we are going to define a route that is always called.</p> +<p>Also note that routes intepret anything after &#8220;#&#8221; tag in the url. All links in your application should target &#8220;#/action&#8221; or &#8220;#action&#8221;. (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help)</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;script&gt;</span> + <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;*actions&quot;</span><span class="o">:</span> <span class="s2">&quot;defaultRoute&quot;</span> <span class="c1">// matches http://example.com/#anything-here</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="nx">defaultRoute</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">){</span> + <span class="c1">// The variable passed in matches the variable in the route definition &quot;actions&quot;</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">actions</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> - + <span class="c1">// Initiate the router</span> + <span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span> + <span class="c1">// Start Backbone history a neccesary step for bookmarkable URL&#39;s</span> + <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> + +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#action&quot;</span><span class="nt">&gt;</span>Activate route<span class="nt">&lt;/a&gt;</span> +<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#/route/action&quot;</span><span class="nt">&gt;</span>Activate another route<span class="nt">&lt;/a&gt;</span> +<span class="c">&lt;!-- Notice the change in the url --&gt;</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> +</div> +<p><strong>Please note: * Prior to Backbone 0.5 (released 1. July 2011) a Router was called a Controller. To avoid confusion, the Backbone developers changed the name to Router. Hence, if you find yourself using an older version of Backbone you should write Backbone.Controller.extend({ *</strong> });</p> +<h4>Dynamic Routing</h4> +<p>Most conventional frameworks allow you to define routes that contain a mix of static and dynamic route parameters. For example you might want to retrieve a post with a variable id with a friendly <span class="caps">URL</span> string. Such that your <span class="caps">URL</span> would look like &#8220;http://example.com/#/posts/12&#8221;. Once this route was activated you would want to access the id given in the <span class="caps">URL</span> string. This example is implemented below.</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;script&gt;</span> + <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;/posts/:id&quot;</span><span class="o">:</span> <span class="s2">&quot;getPost&quot;</span><span class="p">,</span> + <span class="s2">&quot;*actions&quot;</span><span class="o">:</span> <span class="s2">&quot;defaultRoute&quot;</span> <span class="c1">// Backbone will try match the route above first</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="nx">getPost</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">id</span> <span class="p">)</span> <span class="p">{</span> + <span class="c1">// Note the variable in the route definition being passed in here</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Get post number &quot;</span> <span class="o">+</span> <span class="nx">id</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="nx">defaultRoute</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">actions</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> - + <span class="c1">// Instantiate the router</span> + <span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span> + <span class="c1">// Start Backbone history a neccesary step for bookmarkable URL&#39;s</span> + <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> + +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#/posts/120&quot;</span><span class="nt">&gt;</span>Post 120<span class="nt">&lt;/a&gt;</span> +<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#/posts/130&quot;</span><span class="nt">&gt;</span>Post 130<span class="nt">&lt;/a&gt;</span> +<span class="c">&lt;!-- Notice the change in the url --&gt;</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> +</div> +<h4>Dynamic Routing Cont. &#8220;:params&#8221; and &#8220;*splats&#8221;</h4> +<p>Backbone uses two styles of variables when implementing routes. First there are &#8220;:params&#8221; which match any <span class="caps">URL</span> components between slashes. Then there are &#8220;*splats&#8221; which match any number of <span class="caps">URL</span> components. Note that due to the nature of a &#8220;*splat&#8221; it will always be the last variable in your <span class="caps">URL</span> as it will match any and all components.</p> +<p>Any &#8220;*splats&#8221; or &#8220;:params&#8221; in route definitions are passed as arguments (in respective order) to the associated function. A route defined as &#8220;/:route/:action&#8221; will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)</p> +<p>Here are some examples of using &#8220;:params&#8221; and &#8220;*splats&#8221;</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + + <span class="s2">&quot;/posts/:id&quot;</span><span class="o">:</span> <span class="s2">&quot;getPost&quot;</span><span class="p">,</span> + <span class="c1">// &lt;a href=&quot;http://example.com/#/posts/121&quot;&gt;Example&lt;/a&gt;</span> + + <span class="s2">&quot;/download/*path&quot;</span><span class="o">:</span> <span class="s2">&quot;downloadFile&quot;</span><span class="p">,</span> + <span class="c1">// &lt;a href=&quot;http://example.com/#/download/user/images/hey.gif&quot;&gt;Download&lt;/a&gt;</span> + + <span class="s2">&quot;/:route/:action&quot;</span><span class="o">:</span> <span class="s2">&quot;loadView&quot;</span><span class="p">,</span> + <span class="c1">// &lt;a href=&quot;http://example.com/#/dashboard/graph&quot;&gt;Load Route/Action View&lt;/a&gt;</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="nx">getPost</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">id</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span> <span class="c1">// 121 </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="nx">downloadFile</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">path</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span><span class="nx">path</span><span class="p">);</span> <span class="c1">// user/images/hey.gif </span> + <span class="p">},</span> + <span class="nx">loadView</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">route</span><span class="p">,</span> <span class="nx">action</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span><span class="nx">route</span> <span class="o">+</span> <span class="s2">&quot;_&quot;</span> <span class="o">+</span> <span class="nx">action</span><span class="p">);</span> <span class="c1">// dashboard_graph </span> <span class="p">}</span> - <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> +</div> +<p>Routes are quite powerful and in an ideal world your application should never contain too many. If you need to implement hash tags with <span class="caps">SEO</span> in mind, do a google search for &#8220;google seo hashbangs&#8221;.</p> +<p>Remember to do a pull request for any errors you come across.</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> +<p>No Tips and Tricks</p> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li> + <li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="http://schistad.info">Herman Schistad</a> (Backbone 0.5 rename from Controller to Router)</li> + <li><a href="http://paulirish.com">Paul Irish</a></li> +</ul></content> + </entry> + + <entry> + <title>What is a collection?</title> + <link href="http://backbonetutorials.com/what-is-a-collection"/> + <updated>2011-01-26T00:00:00+10:00</updated> + <id>http://backbonetutorials.com/what-is-a-collection</id> + <content type="html"><h1>In progress</h1> +<h2>What is a collection?</h2> +<p>Backbone collections are simply an ordered set of <a href="/what-is-a-model">models</a>. Such that it can be used in situations such as;</p> +<ul> + <li>Model: Student, Collection: ClassStudents</li> + <li>Model: Todo Item, Collection: Todo List</li> + <li>Model: Animals, Collection: Zoo</li> +</ul> +<p>Typically your collection will only use one type of model but models themselves are not limited to a type of collection;</p> +<ul> + <li>Model: Student, Collection: Gym Class</li> + <li>Model: Student, Collection: Art Class</li> + <li>Model: Student, Collection: English Class</li> +</ul> +<p>Here is a generic Model/Collection example.</p> +<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">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="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Music is the answer&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">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> + <span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span> + <span class="p">});</span> +</code></pre> +</div> +<h3>Building a collection</h3> +<p>Now we are going to populate a creation with some useful data.</p> +<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Not specified&quot;</span><span class="p">,</span> + <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;Not specified&quot;</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Music is the answer&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">song1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;How Bizarre&quot;</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;OMC&quot;</span> <span class="p">});</span> + <span class="kd">var</span> <span class="nx">song2</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Sexual Healing&quot;</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;Marvin Gaye&quot;</span> <span class="p">});</span> + <span class="kd">var</span> <span class="nx">song3</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Talk It Over In Bed&quot;</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;OMC&quot;</span> <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">myAlbum</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Album</span><span class="p">([</span> <span class="nx">song1</span><span class="p">,</span> <span class="nx">song2</span><span class="p">,</span> <span class="nx">song3</span><span class="p">]);</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">myAlbum</span><span class="p">.</span><span class="nx">models</span> <span class="p">);</span> <span class="c1">// [song1, song2, song3]</span> + </code></pre> -</div><h3>Relevant Links</h3> +</div> +<h3>Relevant Links</h3> <ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> + <li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li> </ul> <h3>Author</h3> <ul> diff --git a/pygments/chat.html b/pygments/chat.html new file mode 100644 index 0000000..e393ba6 --- /dev/null +++ b/pygments/chat.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Chat - Backbone.js Tutorials</title> +<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> + <meta name="author" content="Backbone Tutorials" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> + + <!-- Typekit --> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } + </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> +</head> +<body> + <div class="left ribbon-holder"> + <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> + <span class="text">Fork on GitHub</span> + </a> + </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> + <a href="/about.html">about</a> + <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + + <hr> + <p> +<p>#cdnjs on irc.freenode.net, don’t forget to follow me on <a href="http://twitter.com/neutralthoughts" target="_blank">twitter</a>.</p><br /> +<iframe src="http://webchat.freenode.net/?channels=cdnjs" width="100%" height="500px"></iframe></p> + + + + </div> + + </div> +</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/pygments/contact.html b/pygments/contact.html index e1ad82a..a73fd44 100644 --- a/pygments/contact.html +++ b/pygments/contact.html @@ -1,7 +1,8 @@ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Contact - Backbone.js Tutorials</title> <link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> <meta name="author" content="Backbone Tutorials" /> @@ -41,7 +42,23 @@ width: 720px; margin: auto; } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> </head> <body> <div class="left ribbon-holder"> @@ -49,13 +66,19 @@ <span class="text">Fork on GitHub</span> </a> </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + <div class="container"> <div class="menu"> <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> </div> @@ -64,7 +87,11 @@ <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> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + <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> diff --git a/pygments/contribute.html b/pygments/contribute.html index 6047046..b8f8861 100644 --- a/pygments/contribute.html +++ b/pygments/contribute.html @@ -1,7 +1,8 @@ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Contribute - Backbone.js Tutorials</title> <link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> <meta name="author" content="Backbone Tutorials" /> @@ -41,7 +42,23 @@ width: 720px; margin: auto; } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> </head> <body> <div class="left ribbon-holder"> @@ -49,13 +66,19 @@ <span class="text">Fork on GitHub</span> </a> </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + <div class="container"> <div class="menu"> <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> </div> @@ -64,11 +87,15 @@ <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> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + <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> +<p>All contributions will be well acknowledged on the site.</p> diff --git a/pygments/css/ribbon.css b/pygments/css/ribbon.css index 580b9d3..d4846b6 100644 --- a/pygments/css/ribbon.css +++ b/pygments/css/ribbon.css @@ -35,6 +35,7 @@ /* Defaults friendly for white pages. */ -moz-box-shadow: 0 0 13px #888; -webkit-box-shadow: 0 0 13px #888; + box-shadow: 0 0 13px #888; color: #FFF; display: block; line-height: 1.35em; @@ -47,21 +48,35 @@ .right .ribbon { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); right: -2.6em; } .left .ribbon { -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + 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)); + background: #f3f3f3; /* Old browsers */ + background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #f3f3f3 0%,#ffffff 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #f3f3f3 0%,#ffffff 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, #f3f3f3 0%,#ffffff 100%); /* W3C */ -moz-box-shadow: 0 0 13px #999; -webkit-box-shadow: 0 0 13px #999; + box-shadow: 0 0 13px #999; text-shadow: 0 0 .05em; } @@ -71,7 +86,14 @@ .red.ribbon { background-color: #9a0000; - background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); + background: #9a0000; /* Old browsers */ + background: -moz-linear-gradient(top, #9a0000 0%, #a90000 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9a0000), color-stop(100%,#a90000)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #9a0000 0%,#a90000 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #9a0000 0%,#a90000 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #9a0000 0%,#a90000 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a0000', endColorstr='#a90000',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, #9a0000 0%,#a90000 100%); /* W3C */ } .red.ribbon .text { @@ -80,7 +102,14 @@ .green.ribbon { background-color: #006e00; - background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); + background: #006e00; /* Old browsers */ + background: -moz-linear-gradient(top, #006e00 0%, #007200 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006e00), color-stop(100%,#007200)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #006e00 0%,#007200 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #006e00 0%,#007200 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #006e00 0%,#007200 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006e00', endColorstr='#007200',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, #006e00 0%,#007200 100%); /* W3C */ } .green.ribbon .text { @@ -98,7 +127,14 @@ .orange.ribbon { background-color: #E57504; - background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); + background: #dc7202; /* Old browsers */ + background: -moz-linear-gradient(top, #dc7202 0%, #ee7906 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dc7202), color-stop(100%,#ee7906)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #dc7202 0%,#ee7906 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #dc7202 0%,#ee7906 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #dc7202 0%,#ee7906 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc7202', endColorstr='#ee7906',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, #dc7202 0%,#ee7906 100%); /* W3C */ } .orange.ribbon .text { @@ -107,7 +143,14 @@ .gray.ribbon { background-color: #6d6d6d; - background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); + background: #6a6a6a; /* Old browsers */ + background: -moz-linear-gradient(top, #6a6a6a 0%, #6d6d6d 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6a6a6a), color-stop(100%,#6d6d6d)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #6a6a6a 0%,#6d6d6d 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #6a6a6a 0%,#6d6d6d 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #6a6a6a 0%,#6d6d6d 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6a6a', endColorstr='#6d6d6d',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, #6a6a6a 0%,#6d6d6d 100%); /* W3C */ } .gray.ribbon .text { diff --git a/pygments/examples.html b/pygments/examples.html new file mode 100644 index 0000000..f22c00d --- /dev/null +++ b/pygments/examples.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Contact - Backbone.js Tutorials</title> +<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> + <meta name="author" content="Backbone Tutorials" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> + + <!-- Typekit --> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } + </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> +</head> +<body> + <div class="left ribbon-holder"> + <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> + <span class="text">Fork on GitHub</span> + </a> + </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> + <a href="/about.html">about</a> + <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + + <hr> + <h2>Examples of sites using Backbone.js</h2> +<h3><a href="http://app.protosal.com">Protosal.com</a></h3> +<p>Generate proposals for your clients with ease using predefined templates. Track how often your proposals get accepted or declined and who your best client are.</p> +<p><em>CouchDb and Node.js Backend</em></p> +<h3><a href="http://getflow.com">GetFlow.com</a></h3> +<p>Flow is a task management app that makes working with your team a breeze. You can see the internals under window.Flow.</p> + + + + </div> + + </div> +</div> +<script src="//static.getclicky.com/js" type="text/javascript"></script> +<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> +<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> +</body> +</html> diff --git a/pygments/examples/modular-backbone/css/style.css b/pygments/examples/modular-backbone/css/style.css new file mode 100644 index 0000000..7631f59 --- /dev/null +++ b/pygments/examples/modular-backbone/css/style.css @@ -0,0 +1,318 @@ +/* + * HTML5 Boilerplate + * + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + + +/* ============================================================================= + HTML5 element display + ========================================================================== */ + +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } +audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; } + + +/* ============================================================================= + Base + ========================================================================== */ + +/* + * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 2. Force vertical scrollbar in non-IE + * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted + * www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ + * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ + +html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } + +body { margin: 0; font-size: 13px; line-height: 1.231; } + +body, button, input, select, textarea { font-family: sans-serif; color: #222; } + +/* + * These selection declarations have to be separate + * No text-shadow: twitter.com/miketaylr/status/12228805301 + * Also: hot pink! + */ + +::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } +::selection { background: #fe57a1; color: #fff; text-shadow: none; } + + +/* ============================================================================= + Links + ========================================================================== */ + +a { color: #00e; } +a:visited { color: #551a8b; } +a:focus { outline: thin dotted; } + +/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */ +a:hover, a:active { outline: 0; } + + +/* ============================================================================= + Typography + ========================================================================== */ + +abbr[title] { border-bottom: 1px dotted; } + +b, strong { font-weight: bold; } + +blockquote { margin: 1em 40px; } + +dfn { font-style: italic; } + +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } + +ins { background: #ff9; color: #000; text-decoration: none; } + +mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } + +/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ +pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } + +/* Improve readability of pre-formatted text in all browsers */ +pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } + +q { quotes: none; } +q:before, q:after { content: ""; content: none; } + +small { font-size: 85%; } + +/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */ +sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + + +/* ============================================================================= + Lists + ========================================================================== */ + +ul, ol { margin: 1em 0; padding: 0 0 0 40px; } +dd { margin: 0 0 0 40px; } +nav ul, nav ol { list-style: none; margin: 0; padding: 0; } + + +/* ============================================================================= + Embedded content + ========================================================================== */ + +/* + * Improve image quality when scaled in IE7 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ + +img { border: 0; -ms-interpolation-mode: bicubic; } + +/* + * Correct overflow displayed oddly in IE9 + */ + +svg:not(:root) { + overflow: hidden; +} + + +/* ============================================================================= + Figures + ========================================================================== */ + +figure { margin: 0; } + + +/* ============================================================================= + Forms + ========================================================================== */ + +form { margin: 0; } +fieldset { border: 0; margin: 0; padding: 0; } + +/* + * 1. Correct color not inheriting in IE6/7/8/9 + * 2. Correct alignment displayed oddly in IE6/7 + */ + +legend { border: 0; *margin-left: -7px; padding: 0; } + +/* Indicate that 'label' will shift focus to the associated form element */ +label { cursor: pointer; } + +/* + * 1. Correct font-size not inheriting in all browsers + * 2. Remove margins in FF3/4 S5 Chrome + * 3. Define consistent vertical alignment display in all browsers + */ + +button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } + +/* + * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) + * 2. Correct inner spacing displayed oddly in IE6/7 + */ + +button, input { line-height: normal; *overflow: visible; } + +/* + * 1. Display hand cursor for clickable form elements + * 2. Allow styling of clickable form elements in iOS + */ + +button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } + +/* + * Consistent box sizing and appearance + */ + +input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } +input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } + +/* + * Remove inner padding and border in FF3/4 + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + */ + +button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } + +/* Remove default vertical scrollbar in IE6/7/8/9 */ +textarea { overflow: auto; vertical-align: top; } + +/* Colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { background-color: #f0dddd; } + + +/* ============================================================================= + Tables + ========================================================================== */ + +table { border-collapse: collapse; border-spacing: 0; } + + +/* ============================================================================= + Primary styles + Author: + ========================================================================== */ +body { + background: #ebebeb; +} + +#container { + width: 960px; + margin: auto; + min-height: 500px; + background: #fff; +} +#menu { + background: #444; + height: 30px; color: #fff; text-align: right; +} +#menu ul { + list-style: none; + margin: 0; padding: 0; +} +#menu ul li { + float: left; + margin-left: 10px; +} +#menu ul li a { + color: #fff; + line-height: 30px; + text-decoration: none; +} +#menu ul li a:hover { + color: #ccc; +} +#container { + +} +#logo { + padding: 20px; +} +h1{ + padding: 0; + margin: 0; +} +#page { + border-top: 1px solid #ebebeb; + border-bottom: 1px solid #ebebeb; + min-height: 400px; + padding: 20px; +} + +#footer { + text-align: center; +} +/* ============================================================================= + 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; } +.ir br { display: none; } + +/* 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; } + +/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ +.clearfix:before, .clearfix:after { content: ""; display: table; } +.clearfix:after { clear: both; } +.clearfix { zoom: 1; } + + + +/* ============================================================================= + PLACEHOLDER Media Queries for Responsive Design. + These override the primary ('mobile first') styles + Modify as content requires. + ========================================================================== */ + +@media only screen and (min-width: 480px) { + /* Style adjustments for viewports 480px and over go here */ + +} + +@media only screen and (min-width: 768px) { + /* Style adjustments for viewports 768px and over go here */ + +} + + +/* ============================================================================= + 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; } + img { max-width: 100% !important; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +} diff --git a/pygments/examples/modular-backbone/index.html b/pygments/examples/modular-backbone/index.html new file mode 100644 index 0000000..149f05b --- /dev/null +++ b/pygments/examples/modular-backbone/index.html @@ -0,0 +1,42 @@ +<!doctype html> +<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> +<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> +<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> +<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + + <title></title> + <meta name="description" content=""> + <meta name="author" content=""> + + <meta name="viewport" content="width=device-width,initial-scale=1"> + + <link rel="stylesheet" href="css/style.css"> + + <script data-main="js/main" src="js/libs/require/require.js"></script> +</head> +<body> + +<div id="container"> + <div id="logo"> + <h1>Modular Backbone</h1> + </div> + <div id="menu"> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#/projects">Project List</a></li> + <li><a href="#/users">User List</a></li> + </ul> + </div> + <div id="page"> + Loading.... + </div> + <div id="footer"> + Thomas Davis + </div> +</div> + +</body> +</html> diff --git a/pygments/examples/modular-backbone/js/app.js b/pygments/examples/modular-backbone/js/app.js new file mode 100644 index 0000000..d1b1f05 --- /dev/null +++ b/pygments/examples/modular-backbone/js/app.js @@ -0,0 +1,16 @@ +// Filename: app.js +define([ + 'jQuery', + 'Underscore', + 'Backbone', + 'router', // Request router.js +], function($, _, Backbone, Router){ + var initialize = function(){ + // Pass in our Router module and call it's initialize function + Router.initialize(); + } + + return { + initialize: initialize + }; +}); diff --git a/pygments/examples/modular-backbone/js/boilerplate.js b/pygments/examples/modular-backbone/js/boilerplate.js new file mode 100644 index 0000000..455546c --- /dev/null +++ b/pygments/examples/modular-backbone/js/boilerplate.js @@ -0,0 +1,8 @@ +define([ + 'jQuery', + 'Underscore', + 'Backbone' +], function($, _, Backbone){ + + return {}; +}); diff --git a/pygments/examples/modular-backbone/js/collections/projects.js b/pygments/examples/modular-backbone/js/collections/projects.js new file mode 100644 index 0000000..2efd596 --- /dev/null +++ b/pygments/examples/modular-backbone/js/collections/projects.js @@ -0,0 +1,16 @@ +define([ + 'jQuery', + 'Underscore', + 'Backbone', + 'models/projects' +], function($, _, Backbone, projectsModel){ + var projectsCollection = Backbone.Collection.extend({ + model: projectsModel, + initialize: function(){ + + } + + }); + + return new projectsCollection; +}); diff --git a/pygments/examples/modular-backbone/js/collections/template.js b/pygments/examples/modular-backbone/js/collections/template.js new file mode 100644 index 0000000..455546c --- /dev/null +++ b/pygments/examples/modular-backbone/js/collections/template.js @@ -0,0 +1,8 @@ +define([ + 'jQuery', + 'Underscore', + 'Backbone' +], function($, _, Backbone){ + + return {}; +}); diff --git a/pygments/examples/modular-backbone/js/libs/backbone/backbone-min.js b/pygments/examples/modular-backbone/js/libs/backbone/backbone-min.js new file mode 100644 index 0000000..3f0d495 --- /dev/null +++ b/pygments/examples/modular-backbone/js/libs/backbone/backbone-min.js @@ -0,0 +1,33 @@ +// Backbone.js 0.5.3 +// (c) 2010 Jeremy Ashkenas, DocumentCloud Inc. +// Backbone may be freely distributed under the MIT license. +// For all details and documentation: +// http://documentcloud.github.com/backbone +(function(){var h=this,p=h.Backbone,e;e=typeof exports!=="undefined"?exports:h.Backbone={};e.VERSION="0.5.3";var f=h._;if(!f&&typeof require!=="undefined")f=require("underscore")._;var g=h.jQuery||h.Zepto;e.noConflict=function(){h.Backbone=p;return this};e.emulateHTTP=!1;e.emulateJSON=!1;e.Events={bind:function(a,b,c){var d=this._callbacks||(this._callbacks={});(d[a]||(d[a]=[])).push([b,c]);return this},unbind:function(a,b){var c;if(a){if(c=this._callbacks)if(b){c=c[a];if(!c)return this;for(var d= +0,e=c.length;d<e;d++)if(c[d]&&b===c[d][0]){c[d]=null;break}}else c[a]=[]}else this._callbacks={};return this},trigger:function(a){var b,c,d,e,f=2;if(!(c=this._callbacks))return this;for(;f--;)if(b=f?a:"all",b=c[b])for(var g=0,h=b.length;g<h;g++)(d=b[g])?(e=f?Array.prototype.slice.call(arguments,1):arguments,d[0].apply(d[1]||this,e)):(b.splice(g,1),g--,h--);return this}};e.Model=function(a,b){var c;a||(a={});if(c=this.defaults)f.isFunction(c)&&(c=c.call(this)),a=f.extend({},c,a);this.attributes={}; +this._escapedAttributes={};this.cid=f.uniqueId("c");this.set(a,{silent:!0});this._changed=!1;this._previousAttributes=f.clone(this.attributes);if(b&&b.collection)this.collection=b.collection;this.initialize(a,b)};f.extend(e.Model.prototype,e.Events,{_previousAttributes:null,_changed:!1,idAttribute:"id",initialize:function(){},toJSON:function(){return f.clone(this.attributes)},get:function(a){return this.attributes[a]},escape:function(a){var b;if(b=this._escapedAttributes[a])return b;b=this.attributes[a]; +return this._escapedAttributes[a]=(b==null?"":""+b).replace(/&(?!\w+;|#\d+;|#x[\da-f]+;)/gi,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")},has:function(a){return this.attributes[a]!=null},set:function(a,b){b||(b={});if(!a)return this;if(a.attributes)a=a.attributes;var c=this.attributes,d=this._escapedAttributes;if(!b.silent&&this.validate&&!this._performValidation(a,b))return!1;if(this.idAttribute in a)this.id=a[this.idAttribute]; +var e=this._changing;this._changing=!0;for(var g in a){var h=a[g];if(!f.isEqual(c[g],h))c[g]=h,delete d[g],this._changed=!0,b.silent||this.trigger("change:"+g,this,h,b)}!e&&!b.silent&&this._changed&&this.change(b);this._changing=!1;return this},unset:function(a,b){if(!(a in this.attributes))return this;b||(b={});var c={};c[a]=void 0;if(!b.silent&&this.validate&&!this._performValidation(c,b))return!1;delete this.attributes[a];delete this._escapedAttributes[a];a==this.idAttribute&&delete this.id;this._changed= +!0;b.silent||(this.trigger("change:"+a,this,void 0,b),this.change(b));return this},clear:function(a){a||(a={});var b,c=this.attributes,d={};for(b in c)d[b]=void 0;if(!a.silent&&this.validate&&!this._performValidation(d,a))return!1;this.attributes={};this._escapedAttributes={};this._changed=!0;if(!a.silent){for(b in c)this.trigger("change:"+b,this,void 0,a);this.change(a)}return this},fetch:function(a){a||(a={});var b=this,c=a.success;a.success=function(d,e,f){if(!b.set(b.parse(d,f),a))return!1;c&& +c(b,d)};a.error=i(a.error,b,a);return(this.sync||e.sync).call(this,"read",this,a)},save:function(a,b){b||(b={});if(a&&!this.set(a,b))return!1;var c=this,d=b.success;b.success=function(a,e,f){if(!c.set(c.parse(a,f),b))return!1;d&&d(c,a,f)};b.error=i(b.error,c,b);var f=this.isNew()?"create":"update";return(this.sync||e.sync).call(this,f,this,b)},destroy:function(a){a||(a={});if(this.isNew())return this.trigger("destroy",this,this.collection,a);var b=this,c=a.success;a.success=function(d){b.trigger("destroy", +b,b.collection,a);c&&c(b,d)};a.error=i(a.error,b,a);return(this.sync||e.sync).call(this,"delete",this,a)},url:function(){var a=k(this.collection)||this.urlRoot||l();if(this.isNew())return a;return a+(a.charAt(a.length-1)=="/"?"":"/")+encodeURIComponent(this.id)},parse:function(a){return a},clone:function(){return new this.constructor(this)},isNew:function(){return this.id==null},change:function(a){this.trigger("change",this,a);this._previousAttributes=f.clone(this.attributes);this._changed=!1},hasChanged:function(a){if(a)return this._previousAttributes[a]!= +this.attributes[a];return this._changed},changedAttributes:function(a){a||(a=this.attributes);var b=this._previousAttributes,c=!1,d;for(d in a)f.isEqual(b[d],a[d])||(c=c||{},c[d]=a[d]);return c},previous:function(a){if(!a||!this._previousAttributes)return null;return this._previousAttributes[a]},previousAttributes:function(){return f.clone(this._previousAttributes)},_performValidation:function(a,b){var c=this.validate(a);if(c)return b.error?b.error(this,c,b):this.trigger("error",this,c,b),!1;return!0}}); +e.Collection=function(a,b){b||(b={});if(b.comparator)this.comparator=b.comparator;f.bindAll(this,"_onModelEvent","_removeReference");this._reset();a&&this.reset(a,{silent:!0});this.initialize.apply(this,arguments)};f.extend(e.Collection.prototype,e.Events,{model:e.Model,initialize:function(){},toJSON:function(){return this.map(function(a){return a.toJSON()})},add:function(a,b){if(f.isArray(a))for(var c=0,d=a.length;c<d;c++)this._add(a[c],b);else this._add(a,b);return this},remove:function(a,b){if(f.isArray(a))for(var c= +0,d=a.length;c<d;c++)this._remove(a[c],b);else this._remove(a,b);return this},get:function(a){if(a==null)return null;return this._byId[a.id!=null?a.id:a]},getByCid:function(a){return a&&this._byCid[a.cid||a]},at:function(a){return this.models[a]},sort:function(a){a||(a={});if(!this.comparator)throw Error("Cannot sort a set without a comparator");this.models=this.sortBy(this.comparator);a.silent||this.trigger("reset",this,a);return this},pluck:function(a){return f.map(this.models,function(b){return b.get(a)})}, +reset:function(a,b){a||(a=[]);b||(b={});this.each(this._removeReference);this._reset();this.add(a,{silent:!0});b.silent||this.trigger("reset",this,b);return this},fetch:function(a){a||(a={});var b=this,c=a.success;a.success=function(d,f,e){b[a.add?"add":"reset"](b.parse(d,e),a);c&&c(b,d)};a.error=i(a.error,b,a);return(this.sync||e.sync).call(this,"read",this,a)},create:function(a,b){var c=this;b||(b={});a=this._prepareModel(a,b);if(!a)return!1;var d=b.success;b.success=function(a,e,f){c.add(a,b); +d&&d(a,e,f)};a.save(null,b);return a},parse:function(a){return a},chain:function(){return f(this.models).chain()},_reset:function(){this.length=0;this.models=[];this._byId={};this._byCid={}},_prepareModel:function(a,b){if(a instanceof e.Model){if(!a.collection)a.collection=this}else{var c=a;a=new this.model(c,{collection:this});a.validate&&!a._performValidation(c,b)&&(a=!1)}return a},_add:function(a,b){b||(b={});a=this._prepareModel(a,b);if(!a)return!1;var c=this.getByCid(a);if(c)throw Error(["Can't add the same model to a set twice", +c.id]);this._byId[a.id]=a;this._byCid[a.cid]=a;this.models.splice(b.at!=null?b.at:this.comparator?this.sortedIndex(a,this.comparator):this.length,0,a);a.bind("all",this._onModelEvent);this.length++;b.silent||a.trigger("add",a,this,b);return a},_remove:function(a,b){b||(b={});a=this.getByCid(a)||this.get(a);if(!a)return null;delete this._byId[a.id];delete this._byCid[a.cid];this.models.splice(this.indexOf(a),1);this.length--;b.silent||a.trigger("remove",a,this,b);this._removeReference(a);return a}, +_removeReference:function(a){this==a.collection&&delete a.collection;a.unbind("all",this._onModelEvent)},_onModelEvent:function(a,b,c,d){(a=="add"||a=="remove")&&c!=this||(a=="destroy"&&this._remove(b,d),b&&a==="change:"+b.idAttribute&&(delete this._byId[b.previous(b.idAttribute)],this._byId[b.id]=b),this.trigger.apply(this,arguments))}});f.each(["forEach","each","map","reduce","reduceRight","find","detect","filter","select","reject","every","all","some","any","include","contains","invoke","max", +"min","sortBy","sortedIndex","toArray","size","first","rest","last","without","indexOf","lastIndexOf","isEmpty","groupBy"],function(a){e.Collection.prototype[a]=function(){return f[a].apply(f,[this.models].concat(f.toArray(arguments)))}});e.Router=function(a){a||(a={});if(a.routes)this.routes=a.routes;this._bindRoutes();this.initialize.apply(this,arguments)};var q=/:([\w\d]+)/g,r=/\*([\w\d]+)/g,s=/[-[\]{}()+?.,\\^$|#\s]/g;f.extend(e.Router.prototype,e.Events,{initialize:function(){},route:function(a, +b,c){e.history||(e.history=new e.History);f.isRegExp(a)||(a=this._routeToRegExp(a));e.history.route(a,f.bind(function(d){d=this._extractParameters(a,d);c.apply(this,d);this.trigger.apply(this,["route:"+b].concat(d))},this))},navigate:function(a,b){e.history.navigate(a,b)},_bindRoutes:function(){if(this.routes){var a=[],b;for(b in this.routes)a.unshift([b,this.routes[b]]);b=0;for(var c=a.length;b<c;b++)this.route(a[b][0],a[b][1],this[a[b][1]])}},_routeToRegExp:function(a){a=a.replace(s,"\\$&").replace(q, +"([^/]*)").replace(r,"(.*?)");return RegExp("^"+a+"$")},_extractParameters:function(a,b){return a.exec(b).slice(1)}});e.History=function(){this.handlers=[];f.bindAll(this,"checkUrl")};var j=/^#*/,t=/msie [\w.]+/,m=!1;f.extend(e.History.prototype,{interval:50,getFragment:function(a,b){if(a==null)if(this._hasPushState||b){a=window.location.pathname;var c=window.location.search;c&&(a+=c);a.indexOf(this.options.root)==0&&(a=a.substr(this.options.root.length))}else a=window.location.hash;return decodeURIComponent(a.replace(j, +""))},start:function(a){if(m)throw Error("Backbone.history has already been started");this.options=f.extend({},{root:"/"},this.options,a);this._wantsPushState=!!this.options.pushState;this._hasPushState=!(!this.options.pushState||!window.history||!window.history.pushState);a=this.getFragment();var b=document.documentMode;if(b=t.exec(navigator.userAgent.toLowerCase())&&(!b||b<=7))this.iframe=g('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo("body")[0].contentWindow,this.navigate(a); +this._hasPushState?g(window).bind("popstate",this.checkUrl):"onhashchange"in window&&!b?g(window).bind("hashchange",this.checkUrl):setInterval(this.checkUrl,this.interval);this.fragment=a;m=!0;a=window.location;b=a.pathname==this.options.root;if(this._wantsPushState&&!this._hasPushState&&!b)return this.fragment=this.getFragment(null,!0),window.location.replace(this.options.root+"#"+this.fragment),!0;else if(this._wantsPushState&&this._hasPushState&&b&&a.hash)this.fragment=a.hash.replace(j,""),window.history.replaceState({}, +document.title,a.protocol+"//"+a.host+this.options.root+this.fragment);if(!this.options.silent)return this.loadUrl()},route:function(a,b){this.handlers.unshift({route:a,callback:b})},checkUrl:function(){var a=this.getFragment();a==this.fragment&&this.iframe&&(a=this.getFragment(this.iframe.location.hash));if(a==this.fragment||a==decodeURIComponent(this.fragment))return!1;this.iframe&&this.navigate(a);this.loadUrl()||this.loadUrl(window.location.hash)},loadUrl:function(a){var b=this.fragment=this.getFragment(a); +return f.any(this.handlers,function(a){if(a.route.test(b))return a.callback(b),!0})},navigate:function(a,b){var c=(a||"").replace(j,"");if(!(this.fragment==c||this.fragment==decodeURIComponent(c))){if(this._hasPushState){var d=window.location;c.indexOf(this.options.root)!=0&&(c=this.options.root+c);this.fragment=c;window.history.pushState({},document.title,d.protocol+"//"+d.host+c)}else if(window.location.hash=this.fragment=c,this.iframe&&c!=this.getFragment(this.iframe.location.hash))this.iframe.document.open().close(), +this.iframe.location.hash=c;b&&this.loadUrl(a)}}});e.View=function(a){this.cid=f.uniqueId("view");this._configure(a||{});this._ensureElement();this.delegateEvents();this.initialize.apply(this,arguments)};var u=/^(\S+)\s*(.*)$/,n=["model","collection","el","id","attributes","className","tagName"];f.extend(e.View.prototype,e.Events,{tagName:"div",$:function(a){return g(a,this.el)},initialize:function(){},render:function(){return this},remove:function(){g(this.el).remove();return this},make:function(a, +b,c){a=document.createElement(a);b&&g(a).attr(b);c&&g(a).html(c);return a},delegateEvents:function(a){if(a||(a=this.events))for(var b in f.isFunction(a)&&(a=a.call(this)),g(this.el).unbind(".delegateEvents"+this.cid),a){var c=this[a[b]];if(!c)throw Error('Event "'+a[b]+'" does not exist');var d=b.match(u),e=d[1];d=d[2];c=f.bind(c,this);e+=".delegateEvents"+this.cid;d===""?g(this.el).bind(e,c):g(this.el).delegate(d,e,c)}},_configure:function(a){this.options&&(a=f.extend({},this.options,a));for(var b= +0,c=n.length;b<c;b++){var d=n[b];a[d]&&(this[d]=a[d])}this.options=a},_ensureElement:function(){if(this.el){if(f.isString(this.el))this.el=g(this.el).get(0)}else{var a=this.attributes||{};if(this.id)a.id=this.id;if(this.className)a["class"]=this.className;this.el=this.make(this.tagName,a)}}});e.Model.extend=e.Collection.extend=e.Router.extend=e.View.extend=function(a,b){var c=v(this,a,b);c.extend=this.extend;return c};var w={create:"POST",update:"PUT","delete":"DELETE",read:"GET"};e.sync=function(a, +b,c){var d=w[a];c=f.extend({type:d,dataType:"json"},c);if(!c.url)c.url=k(b)||l();if(!c.data&&b&&(a=="create"||a=="update"))c.contentType="application/json",c.data=JSON.stringify(b.toJSON());if(e.emulateJSON)c.contentType="application/x-www-form-urlencoded",c.data=c.data?{model:c.data}:{};if(e.emulateHTTP&&(d==="PUT"||d==="DELETE")){if(e.emulateJSON)c.data._method=d;c.type="POST";c.beforeSend=function(a){a.setRequestHeader("X-HTTP-Method-Override",d)}}if(c.type!=="GET"&&!e.emulateJSON)c.processData= +!1;return g.ajax(c)};var o=function(){},v=function(a,b,c){var d;d=b&&b.hasOwnProperty("constructor")?b.constructor:function(){return a.apply(this,arguments)};f.extend(d,a);o.prototype=a.prototype;d.prototype=new o;b&&f.extend(d.prototype,b);c&&f.extend(d,c);d.prototype.constructor=d;d.__super__=a.prototype;return d},k=function(a){if(!a||!a.url)return null;return f.isFunction(a.url)?a.url():a.url},l=function(){throw Error('A "url" property or function must be specified');},i=function(a,b,c){return function(d){a? +a(b,d,c):b.trigger("error",b,d,c)}}}).call(this); diff --git a/pygments/examples/modular-backbone/js/libs/backbone/backbone.js b/pygments/examples/modular-backbone/js/libs/backbone/backbone.js new file mode 100644 index 0000000..e8cb2ac --- /dev/null +++ b/pygments/examples/modular-backbone/js/libs/backbone/backbone.js @@ -0,0 +1,5 @@ +define(['order!libs/backbone/backbone-min'], function(){ + _.noConflict(); + $.noConflict(); + return Backbone.noConflict(); +}); diff --git a/pygments/examples/modular-backbone/js/libs/jquery/jquery-min.js b/pygments/examples/modular-backbone/js/libs/jquery/jquery-min.js new file mode 100644 index 0000000..628ed9b --- /dev/null +++ b/pygments/examples/modular-backbone/js/libs/jquery/jquery-min.js @@ -0,0 +1,4 @@ +/*! jQuery v1.6.4 http://jquery.com/ | http://jquery.org/license */ +(function(a,b){function cu(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cr(a){if(!cg[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){ch||(ch=c.createElement("iframe"),ch.frameBorder=ch.width=ch.height=0),b.appendChild(ch);if(!ci||!ch.createElement)ci=(ch.contentWindow||ch.contentDocument).document,ci.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),ci.close();d=ci.createElement(a),ci.body.appendChild(d),e=f.css(d,"display"),b.removeChild(ch)}cg[a]=e}return cg[a]}function cq(a,b){var c={};f.each(cm.concat.apply([],cm.slice(0,b)),function(){c[this]=a});return c}function cp(){cn=b}function co(){setTimeout(cp,0);return cn=f.now()}function cf(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ce(){try{return new a.XMLHttpRequest}catch(b){}}function b$(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function bZ(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function bY(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bA.test(a)?d(a,e):bY(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)bY(a+"["+e+"]",b[e],c,d);else d(a,b)}function bX(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function bW(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bP,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=bW(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=bW(a,c,d,e,"*",g));return l}function bV(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bL),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function by(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bt:bu;if(d>0){c!=="border"&&f.each(e,function(){c||(d-=parseFloat(f.css(a,"padding"+this))||0),c==="margin"?d+=parseFloat(f.css(a,c+this))||0:d-=parseFloat(f.css(a,"border"+this+"Width"))||0});return d+"px"}d=bv(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0,c&&f.each(e,function(){d+=parseFloat(f.css(a,"padding"+this))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+this+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+this))||0)});return d+"px"}function bl(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bd,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bk(a){f.nodeName(a,"input")?bj(a):"getElementsByTagName"in a&&f.grep(a.getElementsByTagName("input"),bj)}function bj(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bi(a){return"getElementsByTagName"in a?a.getElementsByTagName("*"):"querySelectorAll"in a?a.querySelectorAll("*"):[]}function bh(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bg(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c=f.expando,d=f.data(a),e=f.data(b,d);if(d=d[c]){var g=d.events;e=e[c]=f.extend({},d);if(g){delete e.handle,e.events={};for(var h in g)for(var i=0,j=g[h].length;i<j;i++)f.event.add(b,h+(g[h][i].namespace?".":"")+g[h][i].namespace,g[h][i],g[h][i].data)}}}}function bf(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function V(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(Q.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function U(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function M(a,b){return(a&&a!=="*"?a+".":"")+b.replace(y,"`").replace(z,"&")}function L(a){var b,c,d,e,g,h,i,j,k,l,m,n,o,p=[],q=[],r=f._data(this,"events");if(!(a.liveFired===this||!r||!r.live||a.target.disabled||a.button&&a.type==="click")){a.namespace&&(n=new RegExp("(^|\\.)"+a.namespace.split(".").join("\\.(?:.*\\.)?")+"(\\.|$)")),a.liveFired=this;var s=r.live.slice(0);for(i=0;i<s.length;i++)g=s[i],g.origType.replace(w,"")===a.type?q.push(g.selector):s.splice(i--,1);e=f(a.target).closest(q,a.currentTarget);for(j=0,k=e.length;j<k;j++){m=e[j];for(i=0;i<s.length;i++){g=s[i];if(m.selector===g.selector&&(!n||n.test(g.namespace))&&!m.elem.disabled){h=m.elem,d=null;if(g.preType==="mouseenter"||g.preType==="mouseleave")a.type=g.preType,d=f(a.relatedTarget).closest(g.selector)[0],d&&f.contains(h,d)&&(d=h);(!d||d!==h)&&p.push({elem:h,handleObj:g,level:m.level})}}}for(j=0,k=p.length;j<k;j++){e=p[j];if(c&&e.level>c)break;a.currentTarget=e.elem,a.data=e.handleObj.data,a.handleObj=e.handleObj,o=e.handleObj.origHandler.apply(e.elem,arguments);if(o===!1||a.isPropagationStopped()){c=e.level,o===!1&&(b=!1);if(a.isImmediatePropagationStopped())break}}return b}}function J(a,c,d){var e=f.extend({},d[0]);e.type=a,e.originalEvent={},e.liveFired=b,f.event.handle.call(c,e),e.isDefaultPrevented()&&d[0].preventDefault()}function D(){return!0}function C(){return!1}function m(a,c,d){var e=c+"defer",g=c+"queue",h=c+"mark",i=f.data(a,e,b,!0);i&&(d==="queue"||!f.data(a,g,b,!0))&&(d==="mark"||!f.data(a,h,b,!0))&&setTimeout(function(){!f.data(a,g,b,!0)&&!f.data(a,h,b,!0)&&(f.removeData(a,e,!0),i.resolve())},0)}function l(a){for(var b in a)if(b!=="toJSON")return!1;return!0}function k(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(j,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNaN(d)?i.test(d)?f.parseJSON(d):d:parseFloat(d)}catch(g){}f.data(a,c,d)}else d=b}return d}var c=a.document,d=a.navigator,e=a.location,f=function(){function K(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(K,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/\d/,n=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,o=/^[\],:{}\s]*$/,p=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,q=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,r=/(?:^|:|,)(?:\s*\[)+/g,s=/(webkit)[ \/]([\w.]+)/,t=/(opera)(?:.*version)?[ \/]([\w.]+)/,u=/(msie) ([\w.]+)/,v=/(mozilla)(?:.*? rv:([\w.]+))?/,w=/-([a-z]|[0-9])/ig,x=/^-ms-/,y=function(a,b){return(b+"").toUpperCase()},z=d.userAgent,A,B,C,D=Object.prototype.toString,E=Object.prototype.hasOwnProperty,F=Array.prototype.push,G=Array.prototype.slice,H=String.prototype.trim,I=Array.prototype.indexOf,J={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=n.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.6.4",length:0,size:function(){return this.length},toArray:function(){return G.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?F.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),B.done(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(G.apply(this,arguments),"slice",G.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:F,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;B.resolveWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").unbind("ready")}},bindReady:function(){if(!B){B=e._Deferred();if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",C,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",C),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&K()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNaN:function(a){return a==null||!m.test(a)||isNaN(a)},type:function(a){return a==null?String(a):J[D.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!E.call(a,"constructor")&&!E.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||E.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw a},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(o.test(b.replace(p,"@").replace(q,"]").replace(r,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(x,"ms-").replace(w,y)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:H?function(a){return a==null?"":H.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?F.call(c,a):e.merge(c,a)}return c},inArray:function(a,b){if(!b)return-1;if(I)return I.call(b,a);for(var c=0,d=b.length;c<d;c++)if(b[c]===a)return c;return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=G.call(arguments,2),g=function(){return a.apply(c,f.concat(G.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=s.exec(a)||t.exec(a)||u.exec(a)||a.indexOf("compatible")<0&&v.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){J["[object "+b+"]"]=b.toLowerCase()}),A=e.uaMatch(z),A.browser&&(e.browser[A.browser]=!0,e.browser.version=A.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?C=function(){c.removeEventListener("DOMContentLoaded",C,!1),e.ready()}:c.attachEvent&&(C=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",C),e.ready())});return e}(),g="done fail isResolved isRejected promise then always pipe".split(" "),h=[].slice;f.extend({_Deferred:function(){var a=[],b,c,d,e={done:function(){if(!d){var c=arguments,g,h,i,j,k;b&&(k=b,b=0);for(g=0,h=c.length;g<h;g++)i=c[g],j=f.type(i),j==="array"?e.done.apply(e,i):j==="function"&&a.push(i);k&&e.resolveWith(k[0],k[1])}return this},resolveWith:function(e,f){if(!d&&!b&&!c){f=f||[],c=1;try{while(a[0])a.shift().apply(e,f)}finally{b=[e,f],c=0}}return this},resolve:function(){e.resolveWith(this,arguments);return this},isResolved:function(){return!!c||!!b},cancel:function(){d=1,a=[];return this}};return e},Deferred:function(a){var b=f._Deferred(),c=f._Deferred(),d;f.extend(b,{then:function(a,c){b.done(a).fail(c);return this},always:function(){return b.done.apply(b,arguments).fail.apply(this,arguments)},fail:c.done,rejectWith:c.resolveWith,reject:c.resolve,isRejected:c.isResolved,pipe:function(a,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[c,"reject"]},function(a,c){var e=c[0],g=c[1],h;f.isFunction(e)?b[a](function(){h=e.apply(this,arguments),h&&f.isFunction(h.promise)?h.promise().then(d.resolve,d.reject):d[g+"With"](this===b?d:this,[h])}):b[a](d[g])})}).promise()},promise:function(a){if(a==null){if(d)return d;d=a={}}var c=g.length;while(c--)a[g[c]]=b[g[c]];return a}}),b.done(c.cancel).fail(b.cancel),delete b.cancel,a&&a.call(b,b);return b},when:function(a){function i(a){return function(c){b[a]=arguments.length>1?h.call(arguments,0):c,--e||g.resolveWith(g,h.call(b,0))}}var b=arguments,c=0,d=b.length,e=d,g=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred();if(d>1){for(;c<d;c++)b[c]&&f.isFunction(b[c].promise)?b[c].promise().then(i(c),g.reject):--e;e||g.resolveWith(g,b)}else g!==a&&g.resolveWith(g,d?[a]:[]);return g.promise()}}),f.support=function(){var a=c.createElement("div"),b=c.documentElement,d,e,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u;a.setAttribute("className","t"),a.innerHTML=" <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=a.getElementsByTagName("*"),e=a.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=a.getElementsByTagName("input")[0],k={leadingWhitespace:a.firstChild.nodeType===3,tbody:!a.getElementsByTagName("tbody").length,htmlSerialize:!!a.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55$/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:a.className!=="t",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,k.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,k.optDisabled=!h.disabled;try{delete a.test}catch(v){k.deleteExpando=!1}!a.addEventListener&&a.attachEvent&&a.fireEvent&&(a.attachEvent("onclick",function(){k.noCloneEvent=!1}),a.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),k.radioValue=i.value==="t",i.setAttribute("checked","checked"),a.appendChild(i),l=c.createDocumentFragment(),l.appendChild(a.firstChild),k.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,a.innerHTML="",a.style.width=a.style.paddingLeft="1px",m=c.getElementsByTagName("body")[0],o=c.createElement(m?"div":"body"),p={visibility:"hidden",width:0,height:0,border:0,margin:0,background:"none"},m&&f.extend(p,{position:"absolute",left:"-1000px",top:"-1000px"});for(t in p)o.style[t]=p[t];o.appendChild(a),n=m||b,n.insertBefore(o,n.firstChild),k.appendChecked=i.checked,k.boxModel=a.offsetWidth===2,"zoom"in a.style&&(a.style.display="inline",a.style.zoom=1,k.inlineBlockNeedsLayout=a.offsetWidth===2,a.style.display="",a.innerHTML="<div style='width:4px;'></div>",k.shrinkWrapBlocks=a.offsetWidth!==2),a.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",q=a.getElementsByTagName("td"),u=q[0].offsetHeight===0,q[0].style.display="",q[1].style.display="none",k.reliableHiddenOffsets=u&&q[0].offsetHeight===0,a.innerHTML="",c.defaultView&&c.defaultView.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",a.appendChild(j),k.reliableMarginRight=(parseInt((c.defaultView.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0),o.innerHTML="",n.removeChild(o);if(a.attachEvent)for(t in{submit:1,change:1,focusin:1})s="on"+t,u=s in a,u||(a.setAttribute(s,"return;"),u=typeof a[s]=="function"),k[t+"Bubbles"]=u;o=l=g=h=m=j=a=i=null;return k}(),f.boxModel=f.support.boxModel;var i=/^(?:\{.*\}|\[.*\])$/,j=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!l(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i=f.expando,j=typeof c=="string",k=a.nodeType,l=k?f.cache:a,m=k?a[f.expando]:a[f.expando]&&f.expando;if((!m||e&&m&&l[m]&&!l[m][i])&&j&&d===b)return;m||(k?a[f.expando]=m=++f.uuid:m=f.expando),l[m]||(l[m]={},k||(l[m].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?l[m][i]=f.extend(l[m][i],c):l[m]=f.extend(l[m],c);g=l[m],e&&(g[i]||(g[i]={}),g=g[i]),d!==b&&(g[f.camelCase(c)]=d);if(c==="events"&&!g[c])return g[i]&&g[i].events;j?(h=g[c],h==null&&(h=g[f.camelCase(c)])):h=g;return h}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e=f.expando,g=a.nodeType,h=g?f.cache:a,i=g?a[f.expando]:f.expando;if(!h[i])return;if(b){d=c?h[i][e]:h[i];if(d){d[b]||(b=f.camelCase(b)),delete d[b];if(!l(d))return}}if(c){delete h[i][e];if(!l(h[i]))return}var j=h[i][e];f.support.deleteExpando||!h.setInterval?delete h[i]:h[i]=null,j?(h[i]={},g||(h[i].toJSON=f.noop),h[i][e]=j):g&&(f.support.deleteExpando?delete a[f.expando]:a.removeAttribute?a.removeAttribute(f.expando):a[f.expando]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d=null;if(typeof a=="undefined"){if(this.length){d=f.data(this[0]);if(this[0].nodeType===1){var e=this[0].attributes,g;for(var h=0,i=e.length;h<i;h++)g=e[h].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),k(this[0],g,d[g]))}}return d}if(typeof a=="object")return this.each(function(){f.data(this,a)});var j=a.split(".");j[1]=j[1]?"."+j[1]:"";if(c===b){d=this.triggerHandler("getData"+j[1]+"!",[j[0]]),d===b&&this.length&&(d=f.data(this[0],a),d=k(this[0],a,d));return d===b&&j[1]?this.data(j[0]):d}return this.each(function(){var b=f(this),d=[j[0],c];b.triggerHandler("setData"+j[1]+"!",d),f.data(this,a,c),b.triggerHandler("changeData"+j[1]+"!",d)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,c){a&&(c=(c||"fx")+"mark",f.data(a,c,(f.data(a,c,b,!0)||0)+1,!0))},_unmark:function(a,c,d){a!==!0&&(d=c,c=a,a=!1);if(c){d=d||"fx";var e=d+"mark",g=a?0:(f.data(c,e,b,!0)||1)-1;g?f.data(c,e,g,!0):(f.removeData(c,e,!0),m(c,d,"mark"))}},queue:function(a,c,d){if(a){c=(c||"fx")+"queue";var e=f.data(a,c,b,!0);d&&(!e||f.isArray(d)?e=f.data(a,c,f.makeArray(d),!0):e.push(d));return e||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e;d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),d.call(a,function(){f.dequeue(a,b)})),c.length||(f.removeData(a,b+"queue",!0),m(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(){var c=this;setTimeout(function(){f.dequeue(c,b)},a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f._Deferred(),!0))h++,l.done(m);m();return d.promise()}});var n=/[\n\t\r]/g,o=/\s+/,p=/\r/g,q=/^(?:button|input)$/i,r=/^(?:button|input|object|select|textarea)$/i,s=/^a(?:rea)?$/i,t=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,u,v;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(o);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(o);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(n," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(o);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ";for(var c=0,d=this.length;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(n," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e=this[0];if(!arguments.length){if(e){c=f.valHooks[e.nodeName.toLowerCase()]||f.valHooks[e.type];if(c&&"get"in c&&(d=c.get(e,"value"))!==b)return d;d=e.value;return typeof d=="string"?d.replace(p,""):d==null?"":d}return b}var g=f.isFunction(a);return this.each(function(d){var e=f(this),h;if(this.nodeType===1){g?h=a.call(this,d,e.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c=a.selectedIndex,d=[],e=a.options,g=a.type==="select-one";if(c<0)return null;for(var h=g?c:0,i=g?c+1:e.length;h<i;h++){var j=e[h];if(j.selected&&(f.support.optDisabled?!j.disabled:j.getAttribute("disabled")===null)&&(!j.parentNode.disabled||!f.nodeName(j.parentNode,"optgroup"))){b=f(j).val();if(g)return b;d.push(b)}}if(g&&!d.length&&e.length)return f(e[c]).val();return d},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attrFix:{tabindex:"tabIndex"},attr:function(a,c,d,e){var g=a.nodeType;if(!a||g===3||g===8||g===2)return b;if(e&&c in f.attrFn)return f(a)[c](d);if(!("getAttribute"in a))return f.prop(a,c,d);var h,i,j=g!==1||!f.isXMLDoc(a);j&&(c=f.attrFix[c]||c,i=f.attrHooks[c],i||(t.test(c)?i=v:u&&(i=u)));if(d!==b){if(d===null){f.removeAttr(a,c);return b}if(i&&"set"in i&&j&&(h=i.set(a,d,c))!==b)return h;a.setAttribute(c,""+d);return d}if(i&&"get"in i&&j&&(h=i.get(a,c))!==null)return h;h=a.getAttribute(c);return h===null?b:h},removeAttr:function(a,b){var c;a.nodeType===1&&(b=f.attrFix[b]||b,f.attr(a,b,""),a.removeAttribute(b),t.test(b)&&(c=f.propFix[b]||b)in a&&(a[c]=!1))},attrHooks:{type:{set:function(a,b){if(q.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(u&&f.nodeName(a,"button"))return u.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(u&&f.nodeName(a,"button"))return u.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e=a.nodeType;if(!a||e===3||e===8||e===2)return b;var g,h,i=e!==1||!f.isXMLDoc(a);i&&(c=f.propFix[c]||c,h=f.propHooks[c]);return d!==b?h&&"set"in h&&(g=h.set(a,d,c))!==b?g:a[c]=d:h&&"get"in h&&(g=h.get(a,c))!==null?g:a[c]},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):r.test(a.nodeName)||s.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabIndex=f.propHooks.tabIndex,v={get:function(a,c){var d;return f.prop(a,c)===!0||(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},f.support.getSetAttribute||(u=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&d.nodeValue!==""?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})})),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var w=/\.(.*)$/,x=/^(?:textarea|input|select)$/i,y=/\./g,z=/ /g,A=/[^\w\s.|`]/g,B=function(a){return a.replace(A,"\\$&")};f.event={add:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){if(d===!1)d=C;else if(!d)return;var g,h;d.handler&&(g=d,d=g.handler),d.guid||(d.guid=f.guid++);var i=f._data(a);if(!i)return;var j=i.events,k=i.handle;j||(i.events=j={}),k||(i.handle=k=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.handle.apply(k.elem,arguments):b}),k.elem=a,c=c.split(" ");var l,m=0,n;while(l=c[m++]){h=g?f.extend({},g):{handler:d,data:e},l.indexOf(".")>-1?(n=l.split("."),l=n.shift(),h.namespace=n.slice(0).sort().join(".")):(n=[],h.namespace=""),h.type=l,h.guid||(h.guid=d.guid);var o=j[l],p=f.event.special[l]||{};if(!o){o=j[l]=[];if(!p.setup||p.setup.call(a,e,n,k)===!1)a.addEventListener?a.addEventListener(l,k,!1):a.attachEvent&&a.attachEvent("on"+l,k)}p.add&&(p.add.call(a,h),h.handler.guid||(h.handler.guid=d.guid)),o.push(h),f.event.global[l]=!0}a=null}},global:{},remove:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){d===!1&&(d=C);var g,h,i,j,k=0,l,m,n,o,p,q,r,s=f.hasData(a)&&f._data(a),t=s&&s.events;if(!s||!t)return;c&&c.type&&(d=c.handler,c=c.type);if(!c||typeof c=="string"&&c.charAt(0)==="."){c=c||"";for(h in t)f.event.remove(a,h+c);return}c=c.split(" ");while(h=c[k++]){r=h,q=null,l=h.indexOf(".")<0,m=[],l||(m=h.split("."),h=m.shift(),n=new RegExp("(^|\\.)"+f.map(m.slice(0).sort(),B).join("\\.(?:.*\\.)?")+"(\\.|$)")),p=t[h];if(!p)continue;if(!d){for(j=0;j<p.length;j++){q=p[j];if(l||n.test(q.namespace))f.event.remove(a,r,q.handler,j),p.splice(j--,1)}continue}o=f.event.special[h]||{};for(j=e||0;j<p.length;j++){q=p[j];if(d.guid===q.guid){if(l||n.test(q.namespace))e==null&&p.splice(j--,1),o.remove&&o.remove.call(a,q);if(e!=null)break}}if(p.length===0||e!=null&&p.length===1)(!o.teardown||o.teardown.call(a,m)===!1)&&f.removeEvent(a,h,s.handle),g=null,delete +t[h]}if(f.isEmptyObject(t)){var u=s.handle;u&&(u.elem=null),delete s.events,delete s.handle,f.isEmptyObject(s)&&f.removeData(a,b,!0)}}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){var h=c.type||c,i=[],j;h.indexOf("!")>=0&&(h=h.slice(0,-1),j=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if(!!e&&!f.event.customEvent[h]||!!f.event.global[h]){c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.exclusive=j,c.namespace=i.join("."),c.namespace_re=new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)");if(g||!e)c.preventDefault(),c.stopPropagation();if(!e){f.each(f.cache,function(){var a=f.expando,b=this[a];b&&b.events&&b.events[h]&&f.event.trigger(c,d,b.handle.elem)});return}if(e.nodeType===3||e.nodeType===8)return;c.result=b,c.target=e,d=d!=null?f.makeArray(d):[],d.unshift(c);var k=e,l=h.indexOf(":")<0?"on"+h:"";do{var m=f._data(k,"handle");c.currentTarget=k,m&&m.apply(k,d),l&&f.acceptData(k)&&k[l]&&k[l].apply(k,d)===!1&&(c.result=!1,c.preventDefault()),k=k.parentNode||k.ownerDocument||k===c.target.ownerDocument&&a}while(k&&!c.isPropagationStopped());if(!c.isDefaultPrevented()){var n,o=f.event.special[h]||{};if((!o._default||o._default.call(e.ownerDocument,c)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)){try{l&&e[h]&&(n=e[l],n&&(e[l]=null),f.event.triggered=h,e[h]())}catch(p){}n&&(e[l]=n),f.event.triggered=b}}return c.result}},handle:function(c){c=f.event.fix(c||a.event);var d=((f._data(this,"events")||{})[c.type]||[]).slice(0),e=!c.exclusive&&!c.namespace,g=Array.prototype.slice.call(arguments,0);g[0]=c,c.currentTarget=this;for(var h=0,i=d.length;h<i;h++){var j=d[h];if(e||c.namespace_re.test(j.namespace)){c.handler=j.handler,c.data=j.data,c.handleObj=j;var k=j.handler.apply(this,g);k!==b&&(c.result=k,k===!1&&(c.preventDefault(),c.stopPropagation()));if(c.isImmediatePropagationStopped())break}}return c.result},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(a){if(a[f.expando])return a;var d=a;a=f.Event(d);for(var e=this.props.length,g;e;)g=this.props[--e],a[g]=d[g];a.target||(a.target=a.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),!a.relatedTarget&&a.fromElement&&(a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement);if(a.pageX==null&&a.clientX!=null){var h=a.target.ownerDocument||c,i=h.documentElement,j=h.body;a.pageX=a.clientX+(i&&i.scrollLeft||j&&j.scrollLeft||0)-(i&&i.clientLeft||j&&j.clientLeft||0),a.pageY=a.clientY+(i&&i.scrollTop||j&&j.scrollTop||0)-(i&&i.clientTop||j&&j.clientTop||0)}a.which==null&&(a.charCode!=null||a.keyCode!=null)&&(a.which=a.charCode!=null?a.charCode:a.keyCode),!a.metaKey&&a.ctrlKey&&(a.metaKey=a.ctrlKey),!a.which&&a.button!==b&&(a.which=a.button&1?1:a.button&2?3:a.button&4?2:0);return a},guid:1e8,proxy:f.proxy,special:{ready:{setup:f.bindReady,teardown:f.noop},live:{add:function(a){f.event.add(this,M(a.origType,a.selector),f.extend({},a,{handler:L,guid:a.handler.guid}))},remove:function(a){f.event.remove(this,M(a.origType,a.selector),a)}},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}}},f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!this.preventDefault)return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?D:C):this.type=a,b&&f.extend(this,b),this.timeStamp=f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=D;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=D;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=D,this.stopPropagation()},isDefaultPrevented:C,isPropagationStopped:C,isImmediatePropagationStopped:C};var E=function(a){var b=a.relatedTarget,c=!1,d=a.type;a.type=a.data,b!==this&&(b&&(c=f.contains(this,b)),c||(f.event.handle.apply(this,arguments),a.type=d))},F=function(a){a.type=a.data,f.event.handle.apply(this,arguments)};f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={setup:function(c){f.event.add(this,b,c&&c.selector?F:E,a)},teardown:function(a){f.event.remove(this,b,a&&a.selector?F:E)}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(a,b){if(!f.nodeName(this,"form"))f.event.add(this,"click.specialSubmit",function(a){var b=a.target,c=f.nodeName(b,"input")||f.nodeName(b,"button")?b.type:"";(c==="submit"||c==="image")&&f(b).closest("form").length&&J("submit",this,arguments)}),f.event.add(this,"keypress.specialSubmit",function(a){var b=a.target,c=f.nodeName(b,"input")||f.nodeName(b,"button")?b.type:"";(c==="text"||c==="password")&&f(b).closest("form").length&&a.keyCode===13&&J("submit",this,arguments)});else return!1},teardown:function(a){f.event.remove(this,".specialSubmit")}});if(!f.support.changeBubbles){var G,H=function(a){var b=f.nodeName(a,"input")?a.type:"",c=a.value;b==="radio"||b==="checkbox"?c=a.checked:b==="select-multiple"?c=a.selectedIndex>-1?f.map(a.options,function(a){return a.selected}).join("-"):"":f.nodeName(a,"select")&&(c=a.selectedIndex);return c},I=function(c){var d=c.target,e,g;if(!!x.test(d.nodeName)&&!d.readOnly){e=f._data(d,"_change_data"),g=H(d),(c.type!=="focusout"||d.type!=="radio")&&f._data(d,"_change_data",g);if(e===b||g===e)return;if(e!=null||g)c.type="change",c.liveFired=b,f.event.trigger(c,arguments[1],d)}};f.event.special.change={filters:{focusout:I,beforedeactivate:I,click:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(c==="radio"||c==="checkbox"||f.nodeName(b,"select"))&&I.call(this,a)},keydown:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(a.keyCode===13&&!f.nodeName(b,"textarea")||a.keyCode===32&&(c==="checkbox"||c==="radio")||c==="select-multiple")&&I.call(this,a)},beforeactivate:function(a){var b=a.target;f._data(b,"_change_data",H(b))}},setup:function(a,b){if(this.type==="file")return!1;for(var c in G)f.event.add(this,c+".specialChange",G[c]);return x.test(this.nodeName)},teardown:function(a){f.event.remove(this,".specialChange");return x.test(this.nodeName)}},G=f.event.special.change.filters,G.focus=G.beforeactivate}f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){function e(a){var c=f.event.fix(a);c.type=b,c.originalEvent={},f.event.trigger(c,null,c.target),c.isDefaultPrevented()&&a.preventDefault()}var d=0;f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.each(["bind","one"],function(a,c){f.fn[c]=function(a,d,e){var g;if(typeof a=="object"){for(var h in a)this[c](h,d,a[h],e);return this}if(arguments.length===2||d===!1)e=d,d=b;c==="one"?(g=function(a){f(this).unbind(a,g);return e.apply(this,arguments)},g.guid=e.guid||f.guid++):g=e;if(a==="unload"&&c!=="one")this.one(a,d,e);else for(var i=0,j=this.length;i<j;i++)f.event.add(this[i],a,g,d);return this}}),f.fn.extend({unbind:function(a,b){if(typeof a=="object"&&!a.preventDefault)for(var c in a)this.unbind(c,a[c]);else for(var d=0,e=this.length;d<e;d++)f.event.remove(this[d],a,b);return this},delegate:function(a,b,c,d){return this.live(b,c,d,a)},undelegate:function(a,b,c){return arguments.length===0?this.unbind("live"):this.die(b,null,c,a)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f.data(this,"lastToggle"+a.guid)||0)%d;f.data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}});var K={focus:"focusin",blur:"focusout",mouseenter:"mouseover",mouseleave:"mouseout"};f.each(["live","die"],function(a,c){f.fn[c]=function(a,d,e,g){var h,i=0,j,k,l,m=g||this.selector,n=g?this:f(this.context);if(typeof a=="object"&&!a.preventDefault){for(var o in a)n[c](o,d,a[o],m);return this}if(c==="die"&&!a&&g&&g.charAt(0)==="."){n.unbind(g);return this}if(d===!1||f.isFunction(d))e=d||C,d=b;a=(a||"").split(" ");while((h=a[i++])!=null){j=w.exec(h),k="",j&&(k=j[0],h=h.replace(w,""));if(h==="hover"){a.push("mouseenter"+k,"mouseleave"+k);continue}l=h,K[h]?(a.push(K[h]+k),h=h+k):h=(K[h]||h)+k;if(c==="live")for(var p=0,q=n.length;p<q;p++)f.event.add(n[p],"live."+M(h,m),{data:d,selector:m,handler:e,origType:h,origHandler:e,preType:l});else n.unbind("live."+M(h,m),e)}return this}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0)}),function(){function u(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}if(i.nodeType===1){f||(i.sizcache=c,i.sizset=g);if(typeof b!="string"){if(i===b){j=!0;break}}else if(k.filter(b,[i]).length>0){j=i;break}}i=i[a]}d[g]=j}}}function t(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}i.nodeType===1&&!f&&(i.sizcache=c,i.sizset=g);if(i.nodeName.toLowerCase()===b){j=i;break}i=i[a]}d[g]=j}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d=0,e=Object.prototype.toString,g=!1,h=!0,i=/\\/g,j=/\W/;[0,0].sort(function(){h=!1;return 0});var k=function(b,d,f,g){f=f||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return f;var i,j,n,o,q,r,s,t,u=!0,w=k.isXML(d),x=[],y=b;do{a.exec(""),i=a.exec(y);if(i){y=i[3],x.push(i[1]);if(i[2]){o=i[3];break}}}while(i);if(x.length>1&&m.exec(b))if(x.length===2&&l.relative[x[0]])j=v(x[0]+x[1],d);else{j=l.relative[x[0]]?[d]:k(x.shift(),d);while(x.length)b=x.shift(),l.relative[b]&&(b+=x.shift()),j=v(b,j)}else{!g&&x.length>1&&d.nodeType===9&&!w&&l.match.ID.test(x[0])&&!l.match.ID.test(x[x.length-1])&&(q=k.find(x.shift(),d,w),d=q.expr?k.filter(q.expr,q.set)[0]:q.set[0]);if(d){q=g?{expr:x.pop(),set:p(g)}:k.find(x.pop(),x.length===1&&(x[0]==="~"||x[0]==="+")&&d.parentNode?d.parentNode:d,w),j=q.expr?k.filter(q.expr,q.set):q.set,x.length>0?n=p(j):u=!1;while(x.length)r=x.pop(),s=r,l.relative[r]?s=x.pop():r="",s==null&&(s=d),l.relative[r](n,s,w)}else n=x=[]}n||(n=j),n||k.error(r||b);if(e.call(n)==="[object Array]")if(!u)f.push.apply(f,n);else if(d&&d.nodeType===1)for(t=0;n[t]!=null;t++)n[t]&&(n[t]===!0||n[t].nodeType===1&&k.contains(d,n[t]))&&f.push(j[t]);else for(t=0;n[t]!=null;t++)n[t]&&n[t].nodeType===1&&f.push(j[t]);else p(n,f);o&&(k(o,h,f,g),k.uniqueSort(f));return f};k.uniqueSort=function(a){if(r){g=h,a.sort(r);if(g)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},k.matches=function(a,b){return k(a,null,null,b)},k.matchesSelector=function(a,b){return k(b,null,null,[a]).length>0},k.find=function(a,b,c){var d;if(!a)return[];for(var e=0,f=l.order.length;e<f;e++){var g,h=l.order[e];if(g=l.leftMatch[h].exec(a)){var j=g[1];g.splice(1,1);if(j.substr(j.length-1)!=="\\"){g[1]=(g[1]||"").replace(i,""),d=l.find[h](g,b,c);if(d!=null){a=a.replace(l.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},k.filter=function(a,c,d,e){var f,g,h=a,i=[],j=c,m=c&&c[0]&&k.isXML(c[0]);while(a&&c.length){for(var n in l.filter)if((f=l.leftMatch[n].exec(a))!=null&&f[2]){var o,p,q=l.filter[n],r=f[1];g=!1,f.splice(1,1);if(r.substr(r.length-1)==="\\")continue;j===i&&(i=[]);if(l.preFilter[n]){f=l.preFilter[n](f,j,d,i,e,m);if(!f)g=o=!0;else if(f===!0)continue}if(f)for(var s=0;(p=j[s])!=null;s++)if(p){o=q(p,f,s,j);var t=e^!!o;d&&o!=null?t?g=!0:j[s]=!1:t&&(i.push(p),g=!0)}if(o!==b){d||(j=i),a=a.replace(l.match[n],"");if(!g)return[];break}}if(a===h)if(g==null)k.error(a);else break;h=a}return j},k.error=function(a){throw"Syntax error, unrecognized expression: "+a};var l=k.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!j.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&k.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!j.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&k.filter(b,a,!0)}},"":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("parentNode",b,f,a,e,c)},"~":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("previousSibling",b,f,a,e,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(i,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(i,"")},TAG:function(a,b){return a[1].replace(i,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||k.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&k.error(a[0]);a[0]=d++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(i,"");!f&&l.attrMap[g]&&(a[1]=l.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(i,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=k(b[3],null,null,c);else{var g=k.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(l.match.POS.test(b[0])||l.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!k(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=l.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||k.getText([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}k.error(e)},CHILD:function(a,b){var c=b[1],d=a;switch(c){case"only":case"first":while(d=d.previousSibling)if(d.nodeType===1)return!1;if(c==="first")return!0;d=a;case"last":while(d=d.nextSibling)if(d.nodeType===1)return!1;return!0;case"nth":var e=b[2],f=b[3];if(e===1&&f===0)return!0;var g=b[0],h=a.parentNode;if(h&&(h.sizcache!==g||!a.nodeIndex)){var i=0;for(d=h.firstChild;d;d=d.nextSibling)d.nodeType===1&&(d.nodeIndex=++i);h.sizcache=g}var j=a.nodeIndex-f;return e===0?j===0:j%e===0&&j/e>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=l.attrHandle[c]?l.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=l.setFilters[e];if(f)return f(a,c,b,d)}}},m=l.match.POS,n=function(a,b){return"\\"+(b-0+1)};for(var o in l.match)l.match[o]=new RegExp(l.match[o].source+/(?![^\[]*\])(?![^\(]*\))/.source),l.leftMatch[o]=new RegExp(/(^(?:.|\r|\n)*?)/.source+l.match[o].source.replace(/\\(\d+)/g,n));var p=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(q){p=function(a,b){var c=0,d=b||[];if(e.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var f=a.length;c<f;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var r,s;c.documentElement.compareDocumentPosition?r=function(a,b){if(a===b){g=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(r=function(a,b){if(a===b){g=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],h=a.parentNode,i=b.parentNode,j=h;if(h===i)return s(a,b);if(!h)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return s(e[k],f[k]);return k===c?s(a,f[k],-1):s(e[k],b,1)},s=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),k.getText=function(a){var b="",c;for(var d=0;a[d];d++)c=a[d],c.nodeType===3||c.nodeType===4?b+=c.nodeValue:c.nodeType!==8&&(b+=k.getText(c.childNodes));return b},function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(l.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},l.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(l.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(l.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=k,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){k=function(b,e,f,g){e=e||c;if(!g&&!k.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return p(e.getElementsByTagName(b),f);if(h[2]&&l.find.CLASS&&e.getElementsByClassName)return p(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return p([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return p([],f);if(i.id===h[3])return p([i],f)}try{return p(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var m=e,n=e.getAttribute("id"),o=n||d,q=e.parentNode,r=/^\s*[+~]/.test(b);n?o=o.replace(/'/g,"\\$&"):e.setAttribute("id",o),r&&q&&(e=e.parentNode);try{if(!r||q)return p(e.querySelectorAll("[id='"+o+"'] "+b),f)}catch(s){}finally{n||m.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)k[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}k.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!k.isXML(a))try{if(e||!l.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return k(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;l.order.splice(1,0,"CLASS"),l.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?k.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?k.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:k.contains=function(){return!1},k.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var v=function(a,b){var c,d=[],e="",f=b.nodeType?[b]:b;while(c=l.match.PSEUDO.exec(a))e+=c[0],a=a.replace(l.match.PSEUDO,"");a=l.relative[a]?a+"*":a;for(var g=0,h=f.length;g<h;g++)k(a,f[g],d);return k.filter(e,d)};f.find=k,f.expr=k.selectors,f.expr[":"]=f.expr.filters,f.unique=k.uniqueSort,f.text=k.getText,f.isXMLDoc=k.isXML,f.contains=k.contains}();var N=/Until$/,O=/^(?:parents|prevUntil|prevAll)/,P=/,/,Q=/^.[^:#\[\.,]*$/,R=Array.prototype.slice,S=f.expr.match.POS,T={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(V(this,a,!1),"not",a)},filter:function(a){return this.pushStack(V(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h,i,j={},k=1;if(g&&a.length){for(d=0,e=a.length;d<e;d++)i=a[d],j[i]||(j[i]=S.test(i)?f(i,b||this.context):i);while(g&&g.ownerDocument&&g!==b){for(i in j)h=j[i],(h.jquery?h.index(g)>-1:f(g).is(h))&&c.push({selector:i,elem:g,level:k});g=g.parentNode,k++}}return c}var l=S.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(l?l.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(U(c[0])||U(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c),g=R.call(arguments);N.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!T[a]?f.unique(e):e,(this.length>1||P.test(d))&&O.test(a)&&(e=e.reverse());return this.pushStack(e,a,g.join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|object|embed|option|style)/i,bb=/checked\s*(?:[^=]|=\s*.checked.)/i,bc=/\/(java|ecma)script/i,bd=/^\s*<!(?:\[CDATA\[|\-\-)/,be={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]};be.optgroup=be.option,be.tbody=be.tfoot=be.colgroup=be.caption=be.thead,be.th=be.td,f.support.htmlSerialize||(be._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){f(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f(arguments[0]).toArray());return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!be[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bb.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bf(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bl)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i;b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof a[0]=="string"&&a[0].length<512&&i===c&&a[0].charAt(0)==="<"&&!ba.test(a[0])&&(f.support.checkClone||!bb.test(a[0]))&&(g=!0,h=f.fragments[a[0]],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean +(a,i,e,d)),g&&(f.fragments[a[0]]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d=a.cloneNode(!0),e,g,h;if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bh(a,d),e=bi(a),g=bi(d);for(h=0;e[h];++h)g[h]&&bh(e[h],g[h])}if(b){bg(a,d);if(c){e=bi(a),g=bi(d);for(h=0;e[h];++h)bg(e[h],g[h])}}e=g=null;return d},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=be[l]||be._default,n=m[0],o=b.createElement("div");o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bk(k[i]);else bk(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||bc.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.expando,g=f.event.special,h=f.support.deleteExpando;for(var i=0,j;(j=a[i])!=null;i++){if(j.nodeName&&f.noData[j.nodeName.toLowerCase()])continue;c=j[f.expando];if(c){b=d[c]&&d[c][e];if(b&&b.events){for(var k in b.events)g[k]?f.event.remove(j,k):f.removeEvent(j,k,b.handle);b.handle&&(b.handle.elem=null)}h?delete j[f.expando]:j.removeAttribute&&j.removeAttribute(f.expando),delete d[c]}}}});var bm=/alpha\([^)]*\)/i,bn=/opacity=([^)]*)/,bo=/([A-Z]|^ms)/g,bp=/^-?\d+(?:px)?$/i,bq=/^-?\d/,br=/^([\-+])=([\-+.\de]+)/,bs={position:"absolute",visibility:"hidden",display:"block"},bt=["Left","Right"],bu=["Top","Bottom"],bv,bw,bx;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bv(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=br.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bv)return bv(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return by(a,b,d);f.swap(a,bs,function(){e=by(a,b,d)});return e}},set:function(a,b){if(!bp.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bn.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNaN(b)?"":"alpha(opacity="+b*100+")",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bm,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bm.test(g)?g.replace(bm,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bv(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bw=function(a,c){var d,e,g;c=c.replace(bo,"-$1").toLowerCase();if(!(e=a.ownerDocument.defaultView))return b;if(g=e.getComputedStyle(a,null))d=g.getPropertyValue(c),d===""&&!f.contains(a.ownerDocument.documentElement,a)&&(d=f.style(a,c));return d}),c.documentElement.currentStyle&&(bx=function(a,b){var c,d=a.currentStyle&&a.currentStyle[b],e=a.runtimeStyle&&a.runtimeStyle[b],f=a.style;!bp.test(d)&&bq.test(d)&&(c=f.left,e&&(a.runtimeStyle.left=a.currentStyle.left),f.left=b==="fontSize"?"1em":d||0,d=f.pixelLeft+"px",f.left=c,e&&(a.runtimeStyle.left=e));return d===""?"auto":d}),bv=bw||bx,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bz=/%20/g,bA=/\[\]$/,bB=/\r?\n/g,bC=/#.*$/,bD=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bE=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bF=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bG=/^(?:GET|HEAD)$/,bH=/^\/\//,bI=/\?/,bJ=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bK=/^(?:select|textarea)/i,bL=/\s+/,bM=/([?&])_=[^&]*/,bN=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bO=f.fn.load,bP={},bQ={},bR,bS,bT=["*/"]+["*"];try{bR=e.href}catch(bU){bR=c.createElement("a"),bR.href="",bR=bR.href}bS=bN.exec(bR.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bO)return bO.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bJ,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bK.test(this.nodeName)||bE.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bB,"\r\n")}}):{name:b.name,value:c.replace(bB,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.bind(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?bX(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),bX(a,b);return a},ajaxSettings:{url:bR,isLocal:bF.test(bS[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bT},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bV(bP),ajaxTransport:bV(bQ),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?bZ(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=b$(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.resolveWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f._Deferred(),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bD.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.done,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bC,"").replace(bH,bS[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bL),d.crossDomain==null&&(r=bN.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bS[1]&&r[2]==bS[2]&&(r[3]||(r[1]==="http:"?80:443))==(bS[3]||(bS[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),bW(bP,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bG.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bI.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bM,"$1_="+x);d.url=y+(y===d.url?(bI.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bT+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=bW(bQ,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){s<2?w(-1,z):f.error(z)}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)bY(g,a[g],c,e);return d.join("&").replace(bz,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var b_=f.now(),ca=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+b_++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ca.test(b.url)||e&&ca.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ca,l),b.url===j&&(e&&(k=k.replace(ca,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cb=a.ActiveXObject?function(){for(var a in cd)cd[a](0,1)}:!1,cc=0,cd;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ce()||cf()}:ce,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cb&&delete cd[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cc,cb&&(cd||(cd={},f(a).unload(cb)),cd[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cg={},ch,ci,cj=/^(?:toggle|show|hide)$/,ck=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cl,cm=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cn;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cq("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cr(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cq("hide",3),a,b,c);for(var d=0,e=this.length;d<e;d++)if(this[d].style){var g=f.css(this[d],"display");g!=="none"&&!f._data(this[d],"olddisplay")&&f._data(this[d],"olddisplay",g)}for(d=0;d<e;d++)this[d].style&&(this[d].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cq("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return this[e.queue===!1?"each":"queue"](function(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(f.support.inlineBlockNeedsLayout?(j=cr(this.nodeName),j==="inline"?this.style.display="inline-block":(this.style.display="inline",this.style.zoom=1)):this.style.display="inline-block"))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)k=new f.fx(this,b,i),h=a[i],cj.test(h)?k[h==="toggle"?d?"show":"hide":h]():(l=ck.exec(h),m=k.cur(),l?(n=parseFloat(l[2]),o=l[3]||(f.cssNumber[i]?"":"px"),o!=="px"&&(f.style(this,i,(n||1)+o),m=(n||1)/k.cur()*m,f.style(this,i,m+o)),l[1]&&(n=(l[1]==="-="?-1:1)*n+m),k.custom(m,n,o)):k.custom(m,h,""));return!0})},stop:function(a,b){a&&this.queue([]),this.each(function(){var a=f.timers,c=a.length;b||f._unmark(!0,this);while(c--)a[c].elem===this&&(b&&a[c](!0),a.splice(c,1))}),b||this.dequeue();return this}}),f.each({slideDown:cq("show",1),slideUp:cq("hide",1),slideToggle:cq("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default,d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue!==!1?f.dequeue(this):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,b,c){function g(a){return d.step(a)}var d=this,e=f.fx;this.startTime=cn||co(),this.start=a,this.end=b,this.unit=c||this.unit||(f.cssNumber[this.prop]?"":"px"),this.now=this.start,this.pos=this.state=0,g.elem=this.elem,g()&&f.timers.push(g)&&!cl&&(cl=setInterval(e.tick,e.interval))},show:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.show=!0,this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b=cn||co(),c=!0,d=this.elem,e=this.options,g,h;if(a||b>=e.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),e.animatedProperties[this.prop]=!0;for(g in e.animatedProperties)e.animatedProperties[g]!==!0&&(c=!1);if(c){e.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){d.style["overflow"+b]=e.overflow[a]}),e.hide&&f(d).hide();if(e.hide||e.show)for(var i in e.animatedProperties)f.style(d,i,e.orig[i]);e.complete.call(d)}return!1}e.duration==Infinity?this.now=b:(h=b-this.startTime,this.state=h/e.duration,this.pos=f.easing[e.animatedProperties[this.prop]](this.state,h,0,1,e.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){for(var a=f.timers,b=0;b<a.length;++b)a[b]()||a.splice(b--,1);a.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cl),cl=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit:a.elem[a.prop]=a.now}}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cs=/^t(?:able|d|h)$/i,ct=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cu(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);f.offset.initialize();var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.offset.supportsFixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.offset.doesNotAddBorder&&(!f.offset.doesAddBorderForTableAndCells||!cs.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.offset.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.offset.supportsFixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={initialize:function(){var a=c.body,b=c.createElement("div"),d,e,g,h,i=parseFloat(f.css(a,"marginTop"))||0,j="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";f.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"}),b.innerHTML=j,a.insertBefore(b,a.firstChild),d=b.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,this.doesNotAddBorder=e.offsetTop!==5,this.doesAddBorderForTableAndCells=h.offsetTop===5,e.style.position="fixed",e.style.top="20px",this.supportsFixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",this.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==i,a.removeChild(b),f.offset.initialize=f.noop},bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.offset.initialize(),f.offset.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=ct.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!ct.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cu(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cu(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a&&a.style?parseFloat(f.css(a,d,"padding")):null},f.fn["outer"+c]=function(a){var b=this[0];return b&&b.style?parseFloat(f.css(b,d,a?"margin":"border")):null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNaN(j)?i:j}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f})(window);
\ No newline at end of file diff --git a/pygments/examples/modular-backbone/js/libs/jquery/jquery-serialize.js b/pygments/examples/modular-backbone/js/libs/jquery/jquery-serialize.js new file mode 100644 index 0000000..c2020d5 --- /dev/null +++ b/pygments/examples/modular-backbone/js/libs/jquery/jquery-serialize.js @@ -0,0 +1,27 @@ +jQuery.fn.serializeObject = function(){ + var arrayData, objectData; + arrayData = this.serializeArray(); + objectData = {}; + + jQuery.each(arrayData, function() { + var value; + + if (this.value != null) { + value = this.value; + } else { + value = ''; + } + + if (objectData[this.name] != null) { + if (!objectData[this.name].push) { + objectData[this.name] = [objectData[this.name]]; + } + + objectData[this.name].push(value); + } else { + objectData[this.name] = value; + } + }); + + return objectData; +} diff --git a/pygments/examples/modular-backbone/js/libs/jquery/jquery.js b/pygments/examples/modular-backbone/js/libs/jquery/jquery.js new file mode 100644 index 0000000..d16b993 --- /dev/null +++ b/pygments/examples/modular-backbone/js/libs/jquery/jquery.js @@ -0,0 +1,5 @@ +define([ + 'order!libs/jquery/jquery-min', +], function(){ + return $; +}); diff --git a/pygments/examples/modular-backbone/js/libs/require/require.js b/pygments/examples/modular-backbone/js/libs/require/require.js new file mode 100644 index 0000000..127e2fa --- /dev/null +++ b/pygments/examples/modular-backbone/js/libs/require/require.js @@ -0,0 +1,31 @@ +/* + RequireJS 0.27.0 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved. + Available via the MIT or new BSD license. + see: http://github.com/jrburke/requirejs for details +*/ +var requirejs,require,define; +(function(){function J(a){return M.call(a)==="[object Function]"}function E(a){return M.call(a)==="[object Array]"}function Z(a,c,i){for(var j in c)if(!(j in K)&&(!(j in a)||i))a[j]=c[j];return d}function N(a,c,d){a=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+a);if(d)a.originalError=d;return a}function $(a,c,d){var j,k,q;for(j=0;q=c[j];j++){q=typeof q==="string"?{name:q}:q;k=q.location;if(d&&(!k||k.indexOf("/")!==0&&k.indexOf(":")===-1))k=d+"/"+(k||q.name);a[q.name]={name:q.name,location:k|| +q.name,main:(q.main||"main").replace(da,"").replace(aa,"")}}}function V(a,c){a.holdReady?a.holdReady(c):c?a.readyWait+=1:a.ready(!0)}function ea(a){function c(b,h){var e,s;if(b&&b.charAt(0)==="."&&h){p.pkgs[h]?h=[h]:(h=h.split("/"),h=h.slice(0,h.length-1));e=b=h.concat(b.split("/"));var a;for(s=0;a=e[s];s++)if(a===".")e.splice(s,1),s-=1;else if(a==="..")if(s===1&&(e[2]===".."||e[0]===".."))break;else s>0&&(e.splice(s-1,2),s-=2);s=p.pkgs[e=b[0]];b=b.join("/");s&&b===e+"/"+s.main&&(b=e)}return b}function i(b, +h){var e=b?b.indexOf("!"):-1,a=null,d=h?h.name:null,f=b,l,i;e!==-1&&(a=b.substring(0,e),b=b.substring(e+1,b.length));a&&(a=c(a,d));b&&(a?l=(e=n[a])&&e.normalize?e.normalize(b,function(b){return c(b,d)}):c(b,d):(l=c(b,d),i=E[l],i||(i=g.nameToUrl(l,null,h),E[l]=i)));return{prefix:a,name:l,parentMap:h,url:i,originalName:f,fullName:a?a+"!"+(l||""):l}}function j(){var b=!0,h=p.priorityWait,e,a;if(h){for(a=0;e=h[a];a++)if(!t[e]){b=!1;break}b&&delete p.priorityWait}return b}function k(b,h,e){return function(){var a= +ga.call(arguments,0),c;if(e&&J(c=a[a.length-1]))c.__requireJsBuild=!0;a.push(h);return b.apply(null,a)}}function q(b,h){var e=k(g.require,b,h);Z(e,{nameToUrl:k(g.nameToUrl,b),toUrl:k(g.toUrl,b),defined:k(g.requireDefined,b),specified:k(g.requireSpecified,b),isBrowser:d.isBrowser});return e}function o(b){var h,e,a;a=b.callback;var c=b.map,f=c.fullName,l=b.deps,fa=b.listeners;if(a&&J(a)){if(p.catchError.define)try{e=d.execCb(f,b.callback,l,n[f])}catch(j){h=j}else e=d.execCb(f,b.callback,l,n[f]);if(f)b.cjsModule&& +b.cjsModule.exports!==void 0?e=n[f]=b.cjsModule.exports:e===void 0&&b.usingExports?e=n[f]:(n[f]=e,F[f]&&(Q[f]=!0))}else f&&(e=n[f]=a,F[f]&&(Q[f]=!0));if(C[b.id])delete C[b.id],b.isDone=!0,g.waitCount-=1,g.waitCount===0&&(I=[]);delete R[f];if(d.onResourceLoad&&!b.placeholder)d.onResourceLoad(g,c,b.depArray);if(h)return e=(f?i(f).url:"")||h.fileName||h.sourceURL,a=h.moduleTree,h=N("defineerror",'Error evaluating module "'+f+'" at location "'+e+'":\n'+h+"\nfileName:"+e+"\nlineNumber: "+(h.lineNumber|| +h.line),h),h.moduleName=f,h.moduleTree=a,d.onError(h);for(h=0;a=fa[h];h++)a(e)}function r(b,h){return function(a){b.depDone[h]||(b.depDone[h]=!0,b.deps[h]=a,b.depCount-=1,b.depCount||o(b))}}function v(b,h){var a=h.map,c=a.fullName,i=a.name,f=L[b]||(L[b]=n[b]),l;if(!h.loading)h.loading=!0,l=function(b){h.callback=function(){return b};o(h);t[h.id]=!0},l.fromText=function(b,a){var h=O;t[b]=!1;g.scriptCount+=1;g.fake[b]=!0;h&&(O=!1);d.exec(a);h&&(O=!0);g.completeLoad(b)},c in n?l(n[c]):f.load(i,q(a.parentMap, +!0),l,p)}function w(b){C[b.id]||(C[b.id]=b,I.push(b),g.waitCount+=1)}function B(b){this.listeners.push(b)}function u(b,h){var a=b.fullName,c=b.prefix,d=c?L[c]||(L[c]=n[c]):null,f,l;a&&(f=R[a]);if(!f&&(l=!0,f={id:(c&&!d?M++ +"__p@:":"")+(a||"__r@"+M++),map:b,depCount:0,depDone:[],depCallbacks:[],deps:[],listeners:[],add:B},y[f.id]=!0,a&&(!c||L[c])))R[a]=f;c&&!d?(a=u(i(c),!0),a.add(function(){var a=i(b.originalName,b.parentMap),a=u(a,!0);f.placeholder=!0;a.add(function(b){f.callback=function(){return b}; +o(f)})})):l&&h&&(t[f.id]=!1,g.paused.push(f),w(f));return f}function x(b,a,e,c){var b=i(b,c),d=b.name,f=b.fullName,l=u(b),j=l.id,k=l.deps,m;if(f){if(f in n||t[j]===!0||f==="jquery"&&p.jQuery&&p.jQuery!==e().fn.jquery)return;y[j]=!0;t[j]=!0;f==="jquery"&&e&&S(e())}l.depArray=a;l.callback=e;for(e=0;e<a.length;e++)if(j=a[e])j=i(j,d?b:c),m=j.fullName,a[e]=m,m==="require"?k[e]=q(b):m==="exports"?(k[e]=n[f]={},l.usingExports=!0):m==="module"?l.cjsModule=k[e]={id:d,uri:d?g.nameToUrl(d,null,c):void 0,exports:n[f]}: +m in n&&!(m in C)&&(!(f in F)||f in F&&Q[m])?k[e]=n[m]:(f in F&&(F[m]=!0,delete n[m],T[j.url]=!1),l.depCount+=1,l.depCallbacks[e]=r(l,e),u(j,!0).add(l.depCallbacks[e]));l.depCount?w(l):o(l)}function m(b){x.apply(null,b)}function z(b,a){if(!b.isDone){var e=b.map.fullName,c=b.depArray,d,f,g,j;if(e){if(a[e])return n[e];a[e]=!0}if(c)for(d=0;d<c.length;d++)if(f=c[d])if((g=i(f).prefix)&&(j=C[g])&&z(j,a),(g=C[f])&&!g.isDone&&t[f])f=z(g,a),b.depCallbacks[d](f);return e?n[e]:void 0}}function A(){var b=p.waitSeconds* +1E3,a=b&&g.startTime+b<(new Date).getTime(),b="",e=!1,c=!1,i;if(!(g.pausedCount>0)){if(p.priorityWait)if(j())D();else return;for(i in t)if(!(i in K)&&(e=!0,!t[i]))if(a)b+=i+" ";else{c=!0;break}if(e||g.waitCount){if(a&&b)return i=N("timeout","Load timeout for modules: "+b),i.requireType="timeout",i.requireModules=b,d.onError(i);if(c||g.scriptCount){if((G||ba)&&!W)W=setTimeout(function(){W=0;A()},50)}else{if(g.waitCount){for(H=0;b=I[H];H++)z(b,{});g.paused.length&&D();X<5&&(X+=1,A())}X=0;d.checkReadyState()}}}} +var g,D,p={waitSeconds:7,baseUrl:"./",paths:{},pkgs:{},catchError:{}},P=[],y={require:!0,exports:!0,module:!0},E={},n={},t={},C={},I=[],T={},M=0,R={},L={},F={},Q={},Y=0;S=function(b){if(!g.jQuery&&(b=b||(typeof jQuery!=="undefined"?jQuery:null))&&!(p.jQuery&&b.fn.jquery!==p.jQuery)&&("holdReady"in b||"readyWait"in b))if(g.jQuery=b,m(["jquery",[],function(){return jQuery}]),g.scriptCount)V(b,!0),g.jQueryIncremented=!0};D=function(){var b,a,c,i,k,f;Y+=1;if(g.scriptCount<=0)g.scriptCount=0;for(;P.length;)if(b= +P.shift(),b[0]===null)return d.onError(N("mismatch","Mismatched anonymous define() module: "+b[b.length-1]));else m(b);if(!p.priorityWait||j())for(;g.paused.length;){k=g.paused;g.pausedCount+=k.length;g.paused=[];for(i=0;b=k[i];i++)a=b.map,c=a.url,f=a.fullName,a.prefix?v(a.prefix,b):!T[c]&&!t[f]&&(d.load(g,f,c),T[c]=!0);g.startTime=(new Date).getTime();g.pausedCount-=k.length}Y===1&&A();Y-=1};g={contextName:a,config:p,defQueue:P,waiting:C,waitCount:0,specified:y,loaded:t,urlMap:E,urlFetched:T,scriptCount:0, +defined:n,paused:[],pausedCount:0,plugins:L,needFullExec:F,fake:{},fullExec:Q,managerCallbacks:R,makeModuleMap:i,normalize:c,configure:function(b){var a,c,d;b.baseUrl&&b.baseUrl.charAt(b.baseUrl.length-1)!=="/"&&(b.baseUrl+="/");a=p.paths;d=p.pkgs;Z(p,b,!0);if(b.paths){for(c in b.paths)c in K||(a[c]=b.paths[c]);p.paths=a}if((a=b.packagePaths)||b.packages){if(a)for(c in a)c in K||$(d,a[c],c);b.packages&&$(d,b.packages);p.pkgs=d}if(b.priority)c=g.requireWait,g.requireWait=!1,g.takeGlobalQueue(),D(), +g.require(b.priority),D(),g.requireWait=c,p.priorityWait=b.priority;if(b.deps||b.callback)g.require(b.deps||[],b.callback)},requireDefined:function(b,a){return i(b,a).fullName in n},requireSpecified:function(b,a){return i(b,a).fullName in y},require:function(b,c,e){if(typeof b==="string"){if(J(c))return d.onError(N("requireargs","Invalid require call"));if(d.get)return d.get(g,b,c);c=i(b,c);b=c.fullName;return!(b in n)?d.onError(N("notloaded","Module name '"+c.fullName+"' has not been loaded yet for context: "+ +a)):n[b]}(b&&b.length||c)&&x(null,b,c,e);if(!g.requireWait)for(;!g.scriptCount&&g.paused.length;)g.takeGlobalQueue(),D();return g.require},takeGlobalQueue:function(){U.length&&(ha.apply(g.defQueue,[g.defQueue.length-1,0].concat(U)),U=[])},completeLoad:function(b){var a;for(g.takeGlobalQueue();P.length;)if(a=P.shift(),a[0]===null){a[0]=b;break}else if(a[0]===b)break;else m(a),a=null;a?m(a):m([b,[],b==="jquery"&&typeof jQuery!=="undefined"?function(){return jQuery}:null]);S();d.isAsync&&(g.scriptCount-= +1);D();d.isAsync||(g.scriptCount-=1)},toUrl:function(b,a){var c=b.lastIndexOf("."),d=null;c!==-1&&(d=b.substring(c,b.length),b=b.substring(0,c));return g.nameToUrl(b,d,a)},nameToUrl:function(b,a,e){var i,j,f,l,k=g.config,b=c(b,e&&e.fullName);if(d.jsExtRegExp.test(b))a=b+(a?a:"");else{i=k.paths;j=k.pkgs;e=b.split("/");for(l=e.length;l>0;l--)if(f=e.slice(0,l).join("/"),i[f]){e.splice(0,l,i[f]);break}else if(f=j[f]){b=b===f.name?f.location+"/"+f.main:f.location;e.splice(0,l,b);break}a=e.join("/")+(a|| +".js");a=(a.charAt(0)==="/"||a.match(/^\w+:/)?"":k.baseUrl)+a}return k.urlArgs?a+((a.indexOf("?")===-1?"?":"&")+k.urlArgs):a}};g.jQueryCheck=S;g.resume=D;return g}function ia(){var a,c,d;if(m&&m.readyState==="interactive")return m;a=document.getElementsByTagName("script");for(c=a.length-1;c>-1&&(d=a[c]);c--)if(d.readyState==="interactive")return m=d;return null}var ja=/(\/\*([\s\S]*?)\*\/|\/\/(.*)$)/mg,ka=/require\(\s*["']([^'"\s]+)["']\s*\)/g,da=/^\.\//,aa=/\.js$/,M=Object.prototype.toString,r=Array.prototype, +ga=r.slice,ha=r.splice,G=!!(typeof window!=="undefined"&&navigator&&document),ba=!G&&typeof importScripts!=="undefined",la=G&&navigator.platform==="PLAYSTATION 3"?/^complete$/:/^(complete|loaded)$/,ca=typeof opera!=="undefined"&&opera.toString()==="[object Opera]",K={},u={},U=[],m=null,X=0,O=!1,d,r={},I,w,x,y,v,z,A,H,B,S,W;if(typeof define==="undefined"){if(typeof requirejs!=="undefined")if(J(requirejs))return;else r=requirejs,requirejs=void 0;typeof require!=="undefined"&&!J(require)&&(r=require, +require=void 0);d=requirejs=function(a,c,d){var j="_",k;!E(a)&&typeof a!=="string"&&(k=a,E(c)?(a=c,c=d):a=[]);if(k&&k.context)j=k.context;d=u[j]||(u[j]=ea(j));k&&d.configure(k);return d.require(a,c)};d.config=function(a){return d(a)};require||(require=d);d.toUrl=function(a){return u._.toUrl(a)};d.version="0.27.0";d.jsExtRegExp=/^\/|:|\?|\.js$/;w=d.s={contexts:u,skipAsync:{}};if(d.isAsync=d.isBrowser=G)if(x=w.head=document.getElementsByTagName("head")[0],y=document.getElementsByTagName("base")[0])x= +w.head=y.parentNode;d.onError=function(a){throw a;};d.load=function(a,c,i){d.resourcesReady(!1);a.scriptCount+=1;d.attach(i,a,c);if(a.jQuery&&!a.jQueryIncremented)V(a.jQuery,!0),a.jQueryIncremented=!0};define=function(a,c,d){var j,k;typeof a!=="string"&&(d=c,c=a,a=null);E(c)||(d=c,c=[]);!a&&!c.length&&J(d)&&d.length&&(d.toString().replace(ja,"").replace(ka,function(a,d){c.push(d)}),c=(d.length===1?["require"]:["require","exports","module"]).concat(c));if(O&&(j=I||ia()))a||(a=j.getAttribute("data-requiremodule")), +k=u[j.getAttribute("data-requirecontext")];(k?k.defQueue:U).push([a,c,d])};define.amd={multiversion:!0,plugins:!0,jQuery:!0};d.exec=function(a){return eval(a)};d.execCb=function(a,c,d,j){return c.apply(j,d)};d.addScriptToDom=function(a){I=a;y?x.insertBefore(a,y):x.appendChild(a);I=null};d.onScriptLoad=function(a){var c=a.currentTarget||a.srcElement,i;if(a.type==="load"||c&&la.test(c.readyState))m=null,a=c.getAttribute("data-requirecontext"),i=c.getAttribute("data-requiremodule"),u[a].completeLoad(i), +c.detachEvent&&!ca?c.detachEvent("onreadystatechange",d.onScriptLoad):c.removeEventListener("load",d.onScriptLoad,!1)};d.attach=function(a,c,i,j,k,m){var o;if(G)return j=j||d.onScriptLoad,o=c&&c.config&&c.config.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script"),o.type=k||"text/javascript",o.charset="utf-8",o.async=!w.skipAsync[a],c&&o.setAttribute("data-requirecontext",c.contextName),o.setAttribute("data-requiremodule",i),o.attachEvent&& +!ca?(O=!0,m?o.onreadystatechange=function(){if(o.readyState==="loaded")o.onreadystatechange=null,o.attachEvent("onreadystatechange",j),m(o)}:o.attachEvent("onreadystatechange",j)):o.addEventListener("load",j,!1),o.src=a,m||d.addScriptToDom(o),o;else ba&&(importScripts(a),c.completeLoad(i));return null};if(G){v=document.getElementsByTagName("script");for(H=v.length-1;H>-1&&(z=v[H]);H--){if(!x)x=z.parentNode;if(A=z.getAttribute("data-main")){if(!r.baseUrl)v=A.split("/"),z=v.pop(),v=v.length?v.join("/")+ +"/":"./",r.baseUrl=v,A=z.replace(aa,"");r.deps=r.deps?r.deps.concat(A):[A];break}}}d.checkReadyState=function(){var a=w.contexts,c;for(c in a)if(!(c in K)&&a[c].waitCount)return;d.resourcesReady(!0)};d.resourcesReady=function(a){var c,i;d.resourcesDone=a;if(d.resourcesDone)for(i in a=w.contexts,a)if(!(i in K)&&(c=a[i],c.jQueryIncremented))V(c.jQuery,!1),c.jQueryIncremented=!1};d.pageLoaded=function(){if(document.readyState!=="complete")document.readyState="complete"};if(G&&document.addEventListener&& +!document.readyState)document.readyState="loading",window.addEventListener("load",d.pageLoaded,!1);d(r);if(d.isAsync&&typeof setTimeout!=="undefined")B=w.contexts[r.context||"_"],B.requireWait=!0,setTimeout(function(){B.requireWait=!1;B.takeGlobalQueue();B.jQueryCheck();B.scriptCount||B.resume();d.checkReadyState()},0)}})(); diff --git a/pygments/examples/modular-backbone/js/libs/underscore/underscore-min.js b/pygments/examples/modular-backbone/js/libs/underscore/underscore-min.js new file mode 100644 index 0000000..5983694 --- /dev/null +++ b/pygments/examples/modular-backbone/js/libs/underscore/underscore-min.js @@ -0,0 +1,27 @@ +// Underscore.js 1.1.7 +// (c) 2011 Jeremy Ashkenas, DocumentCloud Inc. +// Underscore is freely distributable under the MIT license. +// Portions of Underscore are inspired or borrowed from Prototype, +// Oliver Steele's Functional, and John Resig's Micro-Templating. +// For all details and documentation: +// http://documentcloud.github.com/underscore +(function(){var p=this,C=p._,m={},i=Array.prototype,n=Object.prototype,f=i.slice,D=i.unshift,E=n.toString,l=n.hasOwnProperty,s=i.forEach,t=i.map,u=i.reduce,v=i.reduceRight,w=i.filter,x=i.every,y=i.some,o=i.indexOf,z=i.lastIndexOf;n=Array.isArray;var F=Object.keys,q=Function.prototype.bind,b=function(a){return new j(a)};typeof module!=="undefined"&&module.exports?(module.exports=b,b._=b):p._=b;b.VERSION="1.1.7";var h=b.each=b.forEach=function(a,c,b){if(a!=null)if(s&&a.forEach===s)a.forEach(c,b);else if(a.length=== ++a.length)for(var e=0,k=a.length;e<k;e++){if(e in a&&c.call(b,a[e],e,a)===m)break}else for(e in a)if(l.call(a,e)&&c.call(b,a[e],e,a)===m)break};b.map=function(a,c,b){var e=[];if(a==null)return e;if(t&&a.map===t)return a.map(c,b);h(a,function(a,g,G){e[e.length]=c.call(b,a,g,G)});return e};b.reduce=b.foldl=b.inject=function(a,c,d,e){var k=d!==void 0;a==null&&(a=[]);if(u&&a.reduce===u)return e&&(c=b.bind(c,e)),k?a.reduce(c,d):a.reduce(c);h(a,function(a,b,f){k?d=c.call(e,d,a,b,f):(d=a,k=!0)});if(!k)throw new TypeError("Reduce of empty array with no initial value"); +return d};b.reduceRight=b.foldr=function(a,c,d,e){a==null&&(a=[]);if(v&&a.reduceRight===v)return e&&(c=b.bind(c,e)),d!==void 0?a.reduceRight(c,d):a.reduceRight(c);a=(b.isArray(a)?a.slice():b.toArray(a)).reverse();return b.reduce(a,c,d,e)};b.find=b.detect=function(a,c,b){var e;A(a,function(a,g,f){if(c.call(b,a,g,f))return e=a,!0});return e};b.filter=b.select=function(a,c,b){var e=[];if(a==null)return e;if(w&&a.filter===w)return a.filter(c,b);h(a,function(a,g,f){c.call(b,a,g,f)&&(e[e.length]=a)});return e}; +b.reject=function(a,c,b){var e=[];if(a==null)return e;h(a,function(a,g,f){c.call(b,a,g,f)||(e[e.length]=a)});return e};b.every=b.all=function(a,c,b){var e=!0;if(a==null)return e;if(x&&a.every===x)return a.every(c,b);h(a,function(a,g,f){if(!(e=e&&c.call(b,a,g,f)))return m});return e};var A=b.some=b.any=function(a,c,d){c=c||b.identity;var e=!1;if(a==null)return e;if(y&&a.some===y)return a.some(c,d);h(a,function(a,b,f){if(e|=c.call(d,a,b,f))return m});return!!e};b.include=b.contains=function(a,c){var b= +!1;if(a==null)return b;if(o&&a.indexOf===o)return a.indexOf(c)!=-1;A(a,function(a){if(b=a===c)return!0});return b};b.invoke=function(a,c){var d=f.call(arguments,2);return b.map(a,function(a){return(c.call?c||a:a[c]).apply(a,d)})};b.pluck=function(a,c){return b.map(a,function(a){return a[c]})};b.max=function(a,c,d){if(!c&&b.isArray(a))return Math.max.apply(Math,a);var e={computed:-Infinity};h(a,function(a,b,f){b=c?c.call(d,a,b,f):a;b>=e.computed&&(e={value:a,computed:b})});return e.value};b.min=function(a, +c,d){if(!c&&b.isArray(a))return Math.min.apply(Math,a);var e={computed:Infinity};h(a,function(a,b,f){b=c?c.call(d,a,b,f):a;b<e.computed&&(e={value:a,computed:b})});return e.value};b.sortBy=function(a,c,d){return b.pluck(b.map(a,function(a,b,f){return{value:a,criteria:c.call(d,a,b,f)}}).sort(function(a,b){var c=a.criteria,d=b.criteria;return c<d?-1:c>d?1:0}),"value")};b.groupBy=function(a,b){var d={};h(a,function(a,f){var g=b(a,f);(d[g]||(d[g]=[])).push(a)});return d};b.sortedIndex=function(a,c,d){d|| +(d=b.identity);for(var e=0,f=a.length;e<f;){var g=e+f>>1;d(a[g])<d(c)?e=g+1:f=g}return e};b.toArray=function(a){if(!a)return[];if(a.toArray)return a.toArray();if(b.isArray(a))return f.call(a);if(b.isArguments(a))return f.call(a);return b.values(a)};b.size=function(a){return b.toArray(a).length};b.first=b.head=function(a,b,d){return b!=null&&!d?f.call(a,0,b):a[0]};b.rest=b.tail=function(a,b,d){return f.call(a,b==null||d?1:b)};b.last=function(a){return a[a.length-1]};b.compact=function(a){return b.filter(a, +function(a){return!!a})};b.flatten=function(a){return b.reduce(a,function(a,d){if(b.isArray(d))return a.concat(b.flatten(d));a[a.length]=d;return a},[])};b.without=function(a){return b.difference(a,f.call(arguments,1))};b.uniq=b.unique=function(a,c){return b.reduce(a,function(a,e,f){if(0==f||(c===!0?b.last(a)!=e:!b.include(a,e)))a[a.length]=e;return a},[])};b.union=function(){return b.uniq(b.flatten(arguments))};b.intersection=b.intersect=function(a){var c=f.call(arguments,1);return b.filter(b.uniq(a), +function(a){return b.every(c,function(c){return b.indexOf(c,a)>=0})})};b.difference=function(a,c){return b.filter(a,function(a){return!b.include(c,a)})};b.zip=function(){for(var a=f.call(arguments),c=b.max(b.pluck(a,"length")),d=Array(c),e=0;e<c;e++)d[e]=b.pluck(a,""+e);return d};b.indexOf=function(a,c,d){if(a==null)return-1;var e;if(d)return d=b.sortedIndex(a,c),a[d]===c?d:-1;if(o&&a.indexOf===o)return a.indexOf(c);d=0;for(e=a.length;d<e;d++)if(a[d]===c)return d;return-1};b.lastIndexOf=function(a, +b){if(a==null)return-1;if(z&&a.lastIndexOf===z)return a.lastIndexOf(b);for(var d=a.length;d--;)if(a[d]===b)return d;return-1};b.range=function(a,b,d){arguments.length<=1&&(b=a||0,a=0);d=arguments[2]||1;for(var e=Math.max(Math.ceil((b-a)/d),0),f=0,g=Array(e);f<e;)g[f++]=a,a+=d;return g};b.bind=function(a,b){if(a.bind===q&&q)return q.apply(a,f.call(arguments,1));var d=f.call(arguments,2);return function(){return a.apply(b,d.concat(f.call(arguments)))}};b.bindAll=function(a){var c=f.call(arguments,1); +c.length==0&&(c=b.functions(a));h(c,function(c){a[c]=b.bind(a[c],a)});return a};b.memoize=function(a,c){var d={};c||(c=b.identity);return function(){var b=c.apply(this,arguments);return l.call(d,b)?d[b]:d[b]=a.apply(this,arguments)}};b.delay=function(a,b){var d=f.call(arguments,2);return setTimeout(function(){return a.apply(a,d)},b)};b.defer=function(a){return b.delay.apply(b,[a,1].concat(f.call(arguments,1)))};var B=function(a,b,d){var e;return function(){var f=this,g=arguments,h=function(){e=null; +a.apply(f,g)};d&&clearTimeout(e);if(d||!e)e=setTimeout(h,b)}};b.throttle=function(a,b){return B(a,b,!1)};b.debounce=function(a,b){return B(a,b,!0)};b.once=function(a){var b=!1,d;return function(){if(b)return d;b=!0;return d=a.apply(this,arguments)}};b.wrap=function(a,b){return function(){var d=[a].concat(f.call(arguments));return b.apply(this,d)}};b.compose=function(){var a=f.call(arguments);return function(){for(var b=f.call(arguments),d=a.length-1;d>=0;d--)b=[a[d].apply(this,b)];return b[0]}};b.after= +function(a,b){return function(){if(--a<1)return b.apply(this,arguments)}};b.keys=F||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var b=[],d;for(d in a)l.call(a,d)&&(b[b.length]=d);return b};b.values=function(a){return b.map(a,b.identity)};b.functions=b.methods=function(a){var c=[],d;for(d in a)b.isFunction(a[d])&&c.push(d);return c.sort()};b.extend=function(a){h(f.call(arguments,1),function(b){for(var d in b)b[d]!==void 0&&(a[d]=b[d])});return a};b.defaults=function(a){h(f.call(arguments, +1),function(b){for(var d in b)a[d]==null&&(a[d]=b[d])});return a};b.clone=function(a){return b.isArray(a)?a.slice():b.extend({},a)};b.tap=function(a,b){b(a);return a};b.isEqual=function(a,c){if(a===c)return!0;var d=typeof a;if(d!=typeof c)return!1;if(a==c)return!0;if(!a&&c||a&&!c)return!1;if(a._chain)a=a._wrapped;if(c._chain)c=c._wrapped;if(a.isEqual)return a.isEqual(c);if(c.isEqual)return c.isEqual(a);if(b.isDate(a)&&b.isDate(c))return a.getTime()===c.getTime();if(b.isNaN(a)&&b.isNaN(c))return!1; +if(b.isRegExp(a)&&b.isRegExp(c))return a.source===c.source&&a.global===c.global&&a.ignoreCase===c.ignoreCase&&a.multiline===c.multiline;if(d!=="object")return!1;if(a.length&&a.length!==c.length)return!1;d=b.keys(a);var e=b.keys(c);if(d.length!=e.length)return!1;for(var f in a)if(!(f in c)||!b.isEqual(a[f],c[f]))return!1;return!0};b.isEmpty=function(a){if(b.isArray(a)||b.isString(a))return a.length===0;for(var c in a)if(l.call(a,c))return!1;return!0};b.isElement=function(a){return!!(a&&a.nodeType== +1)};b.isArray=n||function(a){return E.call(a)==="[object Array]"};b.isObject=function(a){return a===Object(a)};b.isArguments=function(a){return!(!a||!l.call(a,"callee"))};b.isFunction=function(a){return!(!a||!a.constructor||!a.call||!a.apply)};b.isString=function(a){return!!(a===""||a&&a.charCodeAt&&a.substr)};b.isNumber=function(a){return!!(a===0||a&&a.toExponential&&a.toFixed)};b.isNaN=function(a){return a!==a};b.isBoolean=function(a){return a===!0||a===!1};b.isDate=function(a){return!(!a||!a.getTimezoneOffset|| +!a.setUTCFullYear)};b.isRegExp=function(a){return!(!a||!a.test||!a.exec||!(a.ignoreCase||a.ignoreCase===!1))};b.isNull=function(a){return a===null};b.isUndefined=function(a){return a===void 0};b.noConflict=function(){p._=C;return this};b.identity=function(a){return a};b.times=function(a,b,d){for(var e=0;e<a;e++)b.call(d,e)};b.mixin=function(a){h(b.functions(a),function(c){H(c,b[c]=a[c])})};var I=0;b.uniqueId=function(a){var b=I++;return a?a+b:b};b.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g}; +b.template=function(a,c){var d=b.templateSettings;d="var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('"+a.replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(d.interpolate,function(a,b){return"',"+b.replace(/\\'/g,"'")+",'"}).replace(d.evaluate||null,function(a,b){return"');"+b.replace(/\\'/g,"'").replace(/[\r\n\t]/g," ")+"__p.push('"}).replace(/\r/g,"\\r").replace(/\n/g,"\\n").replace(/\t/g,"\\t")+"');}return __p.join('');";d=new Function("obj",d);return c?d(c):d}; +var j=function(a){this._wrapped=a};b.prototype=j.prototype;var r=function(a,c){return c?b(a).chain():a},H=function(a,c){j.prototype[a]=function(){var a=f.call(arguments);D.call(a,this._wrapped);return r(c.apply(b,a),this._chain)}};b.mixin(b);h(["pop","push","reverse","shift","sort","splice","unshift"],function(a){var b=i[a];j.prototype[a]=function(){b.apply(this._wrapped,arguments);return r(this._wrapped,this._chain)}});h(["concat","join","slice"],function(a){var b=i[a];j.prototype[a]=function(){return r(b.apply(this._wrapped, +arguments),this._chain)}});j.prototype.chain=function(){this._chain=!0;return this};j.prototype.value=function(){return this._wrapped}})(); diff --git a/pygments/examples/modular-backbone/js/libs/underscore/underscore.js b/pygments/examples/modular-backbone/js/libs/underscore/underscore.js new file mode 100644 index 0000000..aadf2b6 --- /dev/null +++ b/pygments/examples/modular-backbone/js/libs/underscore/underscore.js @@ -0,0 +1,3 @@ +define(['order!libs/underscore/underscore-min'], function(){ + return _; +}); diff --git a/pygments/examples/modular-backbone/js/main.js b/pygments/examples/modular-backbone/js/main.js new file mode 100644 index 0000000..8e363e0 --- /dev/null +++ b/pygments/examples/modular-backbone/js/main.js @@ -0,0 +1,30 @@ +// Author: Thomas Davis <thomasalwyndavis@gmail.com> +// Filename: main.js + +// Require.js allows us to configure shortcut alias +// Their usage will become more apparent futher along in the tutorial. +require.config({ + paths: { + jQuery: 'libs/jquery/jquery', + Underscore: 'libs/underscore/underscore', + Backbone: 'libs/backbone/backbone', + templates: '../templates' + } + +}); + +require([ + + // Load our app module and pass it to our definition function + 'app', + + // Some plugins have to be loaded in order due to their non AMD compliance + // Because these scripts are not "modules" they do not pass any values to the definition function below + 'order!libs/jquery/jquery-min', + 'order!libs/underscore/underscore-min', + 'order!libs/backbone/backbone-min' +], function(App){ + // The "app" dependency is passed in as "App" + // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function + App.initialize(); +}); diff --git a/pygments/examples/modular-backbone/js/models/projects.js b/pygments/examples/modular-backbone/js/models/projects.js new file mode 100644 index 0000000..e1ba3bc --- /dev/null +++ b/pygments/examples/modular-backbone/js/models/projects.js @@ -0,0 +1,15 @@ +define([ + 'Underscore', + 'Backbone' +], function(_, Backbone) { + var projectsModel = Backbone.Model.extend({ + defaults: { + score: 10 + }, + initialize: function(){ + } + + }); + return projectsModel; + +}); diff --git a/pygments/examples/modular-backbone/js/order.js b/pygments/examples/modular-backbone/js/order.js new file mode 100644 index 0000000..ac9ff95 --- /dev/null +++ b/pygments/examples/modular-backbone/js/order.js @@ -0,0 +1,8 @@ +/* + RequireJS order 0.27.0 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved. + Available via the MIT or new BSD license. + see: http://github.com/jrburke/requirejs for details +*/ +(function(){function k(a){var b=a.currentTarget||a.srcElement,c;if(a.type==="load"||l.test(b.readyState)){a=b.getAttribute("data-requiremodule");j[a]=!0;for(a=0;c=g[a];a++)if(j[c.name])c.req([c.name],c.onLoad);else break;a>0&&g.splice(0,a);setTimeout(function(){b.parentNode.removeChild(b)},15)}}function m(a){var b,c;a.setAttribute("data-orderloaded","loaded");for(a=0;c=h[a];a++)if((b=i[c])&&b.getAttribute("data-orderloaded")==="loaded")delete i[c],require.addScriptToDom(b);else break;a>0&&h.splice(0, +a)}var f=typeof document!=="undefined"&&typeof window!=="undefined"&&document.createElement("script"),n=f&&(f.async||window.opera&&Object.prototype.toString.call(window.opera)==="[object Opera]"||"MozAppearance"in document.documentElement.style),o=f&&f.readyState==="uninitialized",l=/^(complete|loaded)$/,g=[],j={},i={},h=[],f=null;define({version:"0.27.0",load:function(a,b,c,d){var e=b.nameToUrl(a,null);require.s.skipAsync[e]=!0;n||d.isBuild?b([a],c):o?(d=require.s.contexts._,!d.urlFetched[e]&&!d.loaded[a]&& +(d.urlFetched[e]=!0,require.resourcesReady(!1),d.scriptCount+=1,e=require.attach(e,d,a,null,null,m),i[a]=e,h.push(a)),b([a],c)):b.specified(a)?b([a],c):(g.push({name:a,req:b,onLoad:c}),require.attach(e,null,a,k,"script/cache"))}})})(); diff --git a/pygments/examples/modular-backbone/js/router.js b/pygments/examples/modular-backbone/js/router.js new file mode 100644 index 0000000..e606f3e --- /dev/null +++ b/pygments/examples/modular-backbone/js/router.js @@ -0,0 +1,42 @@ +// Filename: router.js +define([ + 'jQuery', + 'Underscore', + 'Backbone', + 'views/home/main', + 'views/projects/list', + 'views/users/list' +], function($, _, Backbone, mainHomeView, projectListView, userListView ){ + var AppRouter = Backbone.Router.extend({ + routes: { + // Define some URL routes + '/projects': 'showProjects', + '/users': 'showUsers', + + // Default + '*actions': 'defaultAction' + }, + showProjects: function(){ + // Call render on the module we loaded in via the dependency array + // 'views/projects/list' + projectListView.render(); + }, + // As above, call render on our loaded module + // 'views/users/list' + showUsers: function(){ + userListView.render(); + }, + defaultAction: function(actions){ + // We have no matching route, lets display the home page + mainHomeView.render(); + } + }); + + var initialize = function(){ + var app_router = new AppRouter; + Backbone.history.start(); + }; + return { + initialize: initialize + }; +}); diff --git a/pygments/examples/modular-backbone/js/text.js b/pygments/examples/modular-backbone/js/text.js new file mode 100644 index 0000000..0caaacf --- /dev/null +++ b/pygments/examples/modular-backbone/js/text.js @@ -0,0 +1,11 @@ +/* + RequireJS text 0.27.0 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved. + Available via the MIT or new BSD license. + see: http://github.com/jrburke/requirejs for details +*/ +(function(){var k=["Msxml2.XMLHTTP","Microsoft.XMLHTTP","Msxml2.XMLHTTP.4.0"],n=/^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,o=/<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,i=typeof location!=="undefined"&&location.href,p=i&&location.protocol&&location.protocol.replace(/\:/,""),q=i&&location.hostname,r=i&&(location.port||void 0),j=[];define(function(){var g,h,l;typeof window!=="undefined"&&window.navigator&&window.document?h=function(a,b){var c=g.createXhr();c.open("GET",a,!0);c.onreadystatechange= +function(){c.readyState===4&&b(c.responseText)};c.send(null)}:typeof process!=="undefined"&&process.versions&&process.versions.node?(l=require.nodeRequire("fs"),h=function(a,b){b(l.readFileSync(a,"utf8"))}):typeof Packages!=="undefined"&&(h=function(a,b){var c=new java.io.File(a),e=java.lang.System.getProperty("line.separator"),c=new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(c),"utf-8")),d,f,g="";try{d=new java.lang.StringBuffer;(f=c.readLine())&&f.length()&& +f.charAt(0)===65279&&(f=f.substring(1));for(d.append(f);(f=c.readLine())!==null;)d.append(e),d.append(f);g=String(d.toString())}finally{c.close()}b(g)});return g={version:"0.27.0",strip:function(a){if(a){var a=a.replace(n,""),b=a.match(o);b&&(a=b[1])}else a="";return a},jsEscape:function(a){return a.replace(/(['\\])/g,"\\$1").replace(/[\f]/g,"\\f").replace(/[\b]/g,"\\b").replace(/[\n]/g,"\\n").replace(/[\t]/g,"\\t").replace(/[\r]/g,"\\r")},createXhr:function(){var a,b,c;if(typeof XMLHttpRequest!== +"undefined")return new XMLHttpRequest;else for(b=0;b<3;b++){c=k[b];try{a=new ActiveXObject(c)}catch(e){}if(a){k=[c];break}}if(!a)throw Error("createXhr(): XMLHttpRequest not available");return a},get:h,parseName:function(a){var b=!1,c=a.indexOf("."),e=a.substring(0,c),a=a.substring(c+1,a.length),c=a.indexOf("!");c!==-1&&(b=a.substring(c+1,a.length),b=b==="strip",a=a.substring(0,c));return{moduleName:e,ext:a,strip:b}},xdRegExp:/^((\w+)\:)?\/\/([^\/\\]+)/,useXhr:function(a,b,c,e){var d=g.xdRegExp.exec(a), +f;if(!d)return!0;a=d[2];d=d[3];d=d.split(":");f=d[1];d=d[0];return(!a||a===b)&&(!d||d===c)&&(!f&&!d||f===e)},finishLoad:function(a,b,c,e,d){c=b?g.strip(c):c;d.isBuild&&d.inlineText&&(j[a]=c);e(c)},load:function(a,b,c,e){var d=g.parseName(a),f=d.moduleName+"."+d.ext,m=b.toUrl(f),h=e&&e.text&&e.text.useXhr||g.useXhr;!i||h(m,p,q,r)?g.get(m,function(b){g.finishLoad(a,d.strip,b,c,e)}):b([f],function(a){g.finishLoad(d.moduleName+"."+d.ext,d.strip,a,c,e)})},write:function(a,b,c){if(b in j){var e=g.jsEscape(j[b]); +c.asModule(a+"!"+b,"define(function () { return '"+e+"';});\n")}},writeFile:function(a,b,c,e,d){var b=g.parseName(b),f=b.moduleName+"."+b.ext,h=c.toUrl(b.moduleName+"."+b.ext)+".js";g.load(f,c,function(){var b=function(a){return e(h,a)};b.asModule=function(a,b){return e.asModule(a,h,b)};g.write(a,f,b,d)},d)}}})})(); diff --git a/pygments/examples/modular-backbone/js/views/home/main.js b/pygments/examples/modular-backbone/js/views/home/main.js new file mode 100644 index 0000000..c53b3da --- /dev/null +++ b/pygments/examples/modular-backbone/js/views/home/main.js @@ -0,0 +1,15 @@ +define([ + 'jQuery', + 'Underscore', + 'Backbone', + 'text!templates/home/main.html' +], function($, _, Backbone, mainHomeTemplate){ + + var mainHomeView = Backbone.View.extend({ + el: $("#page"), + render: function(){ + this.el.html(mainHomeTemplate); + } + }); + return new mainHomeView; +}); diff --git a/pygments/examples/modular-backbone/js/views/projects/list.js b/pygments/examples/modular-backbone/js/views/projects/list.js new file mode 100644 index 0000000..0c2f268 --- /dev/null +++ b/pygments/examples/modular-backbone/js/views/projects/list.js @@ -0,0 +1,33 @@ +// Filename: views/projects/list +define([ + 'jQuery', + 'Underscore', + 'Backbone', + // Pull in the Collection module from above + 'collections/projects', + 'text!templates/projects/list.html' + +], function($, _, Backbone, projectsCollection, projectListTemplate){ + var projectListView = Backbone.View.extend({ + el: $("#page"), + initialize: function(){ + this.collection = projectsCollection; + this.collection.bind("add", this.exampleBind); + this.collection = projectsCollection.add({ name: "Twitter"}); + this.collection = projectsCollection.add({ name: "Facebook"}); + this.collection = projectsCollection.add({ name: "Myspace", score: 20}); + }, + exampleBind: function( model ){ + //console.log(model); + }, + render: function(){ + var data = { + projects: this.collection.models, + _: _ + }; + var compiledTemplate = _.template( projectListTemplate, data ); + $("#page").html( compiledTemplate ); + } + }); + return new projectListView; +}); diff --git a/pygments/examples/modular-backbone/js/views/users/list.js b/pygments/examples/modular-backbone/js/views/users/list.js new file mode 100644 index 0000000..5f17cbe --- /dev/null +++ b/pygments/examples/modular-backbone/js/views/users/list.js @@ -0,0 +1,19 @@ +// Filename: views/projects/list +define([ + 'jQuery', + 'Underscore', + 'Backbone', + 'text!templates/users/list.html' +], function($, _, Backbone, userListTemplate){ + var userListView = Backbone.View.extend({ + el: $("#page"), + initialize: function(){ + }, + render: function(){ + var data = {}; + var compiledTemplate = _.template( userListTemplate, data ); + this.el.html( compiledTemplate ); + } + }); + return new userListView; +}); diff --git a/pygments/examples/modular-backbone/templates/home/main.html b/pygments/examples/modular-backbone/templates/home/main.html new file mode 100644 index 0000000..ce01a39 --- /dev/null +++ b/pygments/examples/modular-backbone/templates/home/main.html @@ -0,0 +1,7 @@ +Welcome to the Modular Backbone homepage. + +There are many benefits of combining Require.js with Backbone.js + +<ul> + <li>Take advantage of Require.js compiler! My dying words would be to tell you to try r.js</li> +</ul> diff --git a/pygments/examples/modular-backbone/templates/projects/list.html b/pygments/examples/modular-backbone/templates/projects/list.html new file mode 100644 index 0000000..03f1609 --- /dev/null +++ b/pygments/examples/modular-backbone/templates/projects/list.html @@ -0,0 +1,5 @@ +<ul> + <% _.each(projects, function(project){ %> + <li><%= project.get("name") %> - <%= project.get("score") %></li> + <% }); %> +</ul> diff --git a/pygments/examples/modular-backbone/templates/users/list.html b/pygments/examples/modular-backbone/templates/users/list.html new file mode 100644 index 0000000..12d06fe --- /dev/null +++ b/pygments/examples/modular-backbone/templates/users/list.html @@ -0,0 +1,3 @@ +<ul> + <li>User 1</li> +</ul> diff --git a/pygments/index.html b/pygments/index.html index b442da1..562d06f 100644 --- a/pygments/index.html +++ b/pygments/index.html @@ -1,7 +1,8 @@ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> - Backbone.js Tutorials</title> <link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> <meta name="author" content="Backbone Tutorials" /> @@ -41,7 +42,23 @@ width: 720px; margin: auto; } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> </head> <body> <div class="left ribbon-holder"> @@ -49,13 +66,19 @@ <span class="text">Fork on GitHub</span> </a> </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + <div class="container"> <div class="menu"> <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> </div> @@ -64,28 +87,56 @@ <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> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + <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="/why-would-you-use-backbone">Why would you use Backbone.js?</a> » <a href="http://thomasdavis.github.com">Thomas Davis</a></li> - <li><a href="/what-is-a-model">What is a model?</a> » Thomas Davis</li> + <li><a href="/what-is-a-model">What is a model?</a> » <a href="http://thomasdavis.github.com">Thomas Davis</a></li> - <li><a href="/what-is-a-view">What is a view?</a> » Thomas Davis</li> + <li><a href="/what-is-a-view">What is a view?</a> » <a href="http://thomasdavis.github.com">Thomas Davis</a></li> + + + + <li><a href="/what-is-a-router">What is a router?</a> » <a href="http://thomasdavis.github.com">Thomas Davis</a></li> + + + + <li><a href="/what-is-a-collection">What is a collection?</a> » <a href="http://thomasdavis.github.com">Thomas Davis</a></li> </ul> - <h2>Intermediate</h2> <ul class="tutorials"> - <li>Coming Soon</li> + + + <li><a href="/organizing-backbone-using-modules">Organizing your application using Modules (require.js)</a> » <a href="http://thomasdavis.github.com">Thomas Davis</a></li> + + + + + + + + + + + + + </ul> <h2>Advanced</h2> @@ -96,7 +147,9 @@ <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://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application with Modules</a></li> <li><a target="_blank" href="http://jvcustomdesigns.com/139/backbone-tutorial-1/">Backbone Tutorial #1 | JV Custom Designs</a></li> + <li><a target="_blank" href="http://quickleft.com/blog/leveraging-deferreds-in-backbonejs">Leveraging Deferreds in Backbone.js</a></li> </ul> diff --git a/pygments/lessons.html b/pygments/lessons.html new file mode 100644 index 0000000..a3597ba --- /dev/null +++ b/pygments/lessons.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Lessons - Backbone.js Tutorials</title> +<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> + <meta name="author" content="Backbone Tutorials" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> + + <!-- Typekit --> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } + </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> +</head> +<body> + <div class="left ribbon-holder"> + <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> + <span class="text">Fork on GitHub</span> + </a> + </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> + <a href="/about.html">about</a> + <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + + <hr> + <p>If you and your team are looking to learn Backbone.js and other front end development skills, I am available to fly in and coach onsite.</p> +<p>If you would like to discuss team training with me, send an email directly to thomasalwyndavis@gmail.com</p> + + + + </div> + + </div> +</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/pygments/organizing-backbone-using-modules/index.html b/pygments/organizing-backbone-using-modules/index.html new file mode 100644 index 0000000..69c9f46 --- /dev/null +++ b/pygments/organizing-backbone-using-modules/index.html @@ -0,0 +1,480 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Organizing your application using Modules (require.js) - Backbone.js Tutorials</title> +<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> + <meta name="author" content="Backbone Tutorials" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> + + <!-- Typekit --> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } + </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> +</head> +<body> + <div class="left ribbon-holder"> + <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> + <span class="text">Fork on GitHub</span> + </a> + </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> + <a href="/about.html">about</a> + <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + + <hr> + <div id="post"> +<h2>Organizing your application using Modules (require.js)</h2> +<p>Unfortunatly Backbone.js does not tell you how to organize your code leaving many developers in the dark regarding how to load scripts and lay out their development enviroments.</p> +<p>This was quite a different decision to other Javascript <span class="caps">MVC</span> frameworks who were more in favor of setting a development philosophy.</p> +<p>Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code.</p> +<p>This tutorial will get you started on combining Backbone.js with <a href="https://github.com/amdjs/amdjs-api/wiki/AMD"><span class="caps">AMD</span></a> (Asynchronous Module Definitions).</p> +<h3>What is <span class="caps">AMD</span>?</h3> +<p><a href="https://github.com/amdjs/amdjs-api/wiki/AMD">Asynchronous Module Definitions</a> designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around <span class="caps">AMD</span>, seeing it as the future of modular Javascript development.</p> +<p>This tutorial will use <a href="http://requirejs.org">Require.js</a> to implement a modular and organized Backbone.js.</p> +<p><b>I highly recommend using <span class="caps">AMD</span> for application development</b></p> +<p>Quick Overview</p> +<ul> + <li>Modular</li> + <li>Scalable</li> + <li>Compiles well(see <a href="http://requirejs.org/docs/optimization.html">r.js</a>)</li> + <li>Market Adoption( <a href="http://dojotoolkit.org/reference-guide/releasenotes/1.6.html">Dojo 1.6 converted fully to <span class="caps">AMD</span></a> )</li> +</ul> +<h3>Why Require.js?</h3> +<p>Require.js has a boastful community and is growing rapidly. <a href="http://tagneto.blogspot.com/">James Burke</a> the author is married to Require.js and responds to user feedback always. A leading expert in script loading, he is also a contributer to the <span class="caps">AMD</span> specification.</p> +<p><a href="https://twitter.com/jrburke" class="twitter-follow-button">Follow @jrburke</a><br /> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></p> +<h3>Getting started</h3> +<p>To easily understand this tutorial you should jump straight into the example code base.</p> +<h3><a href="https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/modular-backbone">Example Codebase</a></h3> +<h3><a href="http://backbonetutorials.com/examples/modular-backbone">Example Demo</a></h3> +<p>The tutorial is only loosely coupled with the example and you will find the example to be more comprehensive.</p> +<p>If you would like to see how a particuliar use case would be implemented please visit the Github page and create an issue.(Example Request: How to do nested views).</p> +<p>The example isn’t super fleshed out but should give you a vague idea.</p> +<h3>Example File Structure</h3> +<p>There are many different ways to lay out your files and I believe it is actually dependent on the size and type of the project. In the example below views and templates are mirroed in file structure. Collections and Models aren’t categorized into folders kind of like an <span class="caps">ORM</span>.</p> +<div class="highlight"><pre><code class="javascript"><span class="cm">/* File Structure</span> +<span class="cm">├── imgs</span> +<span class="cm">├── css</span> +<span class="cm">│ └── style.css</span> +<span class="cm">├── templates</span> +<span class="cm">│ ├── projects</span> +<span class="cm">│ │ ├── list.html</span> +<span class="cm">│ │ └── edit.html</span> +<span class="cm">│ └── users</span> +<span class="cm">│ ├── list.html</span> +<span class="cm">│ └── edit.html</span> +<span class="cm">├── js</span> +<span class="cm">│ ├── libs</span> +<span class="cm">│ │ ├── jquery</span> +<span class="cm">│ │ │ ├── jquery.min.js</span> +<span class="cm">│ │ │ └── jquery.js // jQuery Library Wrapper</span> +<span class="cm">│ │ ├── backbone</span> +<span class="cm">│ │ │ ├── backbone.min.js</span> +<span class="cm">│ │ │ └── backbone.js // Backbone Library Wrapper</span> +<span class="cm">│ │ └── underscore</span> +<span class="cm">│ │ │ ├── underscore.min.js</span> +<span class="cm">│ │ │ └── underscore.js // Underscore Library Wrapper</span> +<span class="cm">│ ├── models</span> +<span class="cm">│ │ ├── users.js</span> +<span class="cm">│ │ └── projects.js</span> +<span class="cm">│ ├── collections</span> +<span class="cm">│ │ ├── users.js</span> +<span class="cm">│ │ └── projects.js</span> +<span class="cm">│ ├── views</span> +<span class="cm">│ │ ├── projects</span> +<span class="cm">│ │ │ ├── list.js</span> +<span class="cm">│ │ │ └── edit.js</span> +<span class="cm">│ │ └── users</span> +<span class="cm">│ │ ├── list.js</span> +<span class="cm">│ │ └── edit.js</span> +<span class="cm">│ ├── router.js</span> +<span class="cm">│ ├── app.js</span> +<span class="cm">│ ├── main.js // Bootstrap</span> +<span class="cm">│ ├── order.js //Require.js plugin</span> +<span class="cm">│ └── text.js //Require.js plugin</span> +<span class="cm">└── index.html</span> + +<span class="cm">*/</span> +</code></pre> +</div> +<p>To continue you must really understand what we are aiming towards as described in the introduction.</p> +<h3>Bootstrapping your application</h3> +<p>Using Require.js we define a single entry point on our index page. <br /> +We should setup any useful containers that might be used by our Backbone views.</p> +<p><b>Note</b>: The data-main attribute on our single script tag tells Require.js to load the script located at “js/main.js”. It automatically appends the “.js”</p> +<div class="highlight"><pre><code class="html"><span class="cp"><!doctype html></span> +<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> +<span class="nt"><head></span> + <span class="nt"><title></span>Jackie Chan<span class="nt"></title></span> + <span class="c"><!-- Load the script "js/main.js" as our entry point --></span> + <span class="nt"><script </span><span class="na">data-main=</span><span class="s">"js/main"</span> <span class="na">src=</span><span class="s">"js/libs/require/require.js"</span><span class="nt">></script></span> +<span class="nt"></head></span> +<span class="nt"><body></span> + +<span class="nt"><div</span> <span class="na">id=</span><span class="s">"container"</span><span class="nt">></span> + <span class="nt"><div</span> <span class="na">id=</span><span class="s">"menu"</span><span class="nt">></div></span> + <span class="nt"><div</span> <span class="na">id=</span><span class="s">"content"</span><span class="nt">></div></span> +<span class="nt"></div></span> + +<span class="nt"></body></span> +<span class="nt"></html></span> +</code></pre> +</div> +<p>You should most always end up with quite a light weight index file. You can serve this off your server and then the rest of your site off a <span class="caps">CDN</span> ensuring that everything that can be cached, will be.</p> +<h4>What does the bootstrap look like?</h4> +<p>Our bootstrap file will be responsible for configuring Require.js and loading initially important dependencies.</p> +<p>In the below example we configure Require.js to create shortcut alias to commonly used scripts such as jQuery, Underscore and Backbone.</p> +<p>Due to the nature of these libraries implementations we actually have to load them in order because they each depend on each other existing in the global namespace(which is bad but is all we have to work with).</p> +<p>Hopefully if the <span class="caps">AMD</span> specification takes off these libraries will add code to allow themselves to be loaded asynchronously. Due to this inconvience the bootstrap is not as intuitive as it could be, I hope to solve this problem in the near future.</p> +<p>We also request a module called “app”, this will contain the entireity of our application logic.</p> +<p><b>Note:</b> Modules are loaded relativly to the boot strap and always append with “.js”. So the module “app” will load “app.js” which is in the same directory as the bootstrap.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: main.js</span> + +<span class="c1">// Require.js allows us to configure shortcut alias</span> +<span class="c1">// There usage will become more apparent futher along in the tutorial.</span> +<span class="nx">require</span><span class="p">.</span><span class="nx">config</span><span class="p">({</span> + <span class="nx">paths</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">jQuery</span><span class="o">:</span> <span class="s1">'libs/jquery/jquery'</span><span class="p">,</span> + <span class="nx">Underscore</span><span class="o">:</span> <span class="s1">'libs/underscore/underscore'</span><span class="p">,</span> + <span class="nx">Backbone</span><span class="o">:</span> <span class="s1">'libs/backbone/backbone'</span> + <span class="p">}</span> + +<span class="p">});</span> + +<span class="nx">require</span><span class="p">([</span> + + <span class="c1">// Load our app module and pass it to our definition function</span> + <span class="s1">'app'</span><span class="p">,</span> + + <span class="c1">// Some plugins have to be loaded in order due to there non AMD compliance</span> + <span class="c1">// Because these scripts are not "modules" they do not pass any values to the definition function below</span> + <span class="s1">'order!libs/jquery/jquery-min'</span><span class="p">,</span> + <span class="s1">'order!libs/underscore/underscore-min'</span><span class="p">,</span> + <span class="s1">'order!libs/backbone/backbone-min'</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">App</span><span class="p">){</span> + <span class="c1">// The "app" dependency is passed in as "App"</span> + <span class="c1">// Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function</span> + <span class="nx">App</span><span class="p">.</span><span class="nx">initialize</span><span class="p">();</span> +<span class="p">});</span> +</code></pre> +</div> +<h3>How should we lay out external scripts?</h3> +<p>Any modules we develop for our application using <span class="caps">AMD</span>/Require.js will be asynchronously loaded.</p> +<p>We have a heavy dependency on jQuery, Underscore and Backbone, unfortunatly this libraries are loaded synchronously and also depend on each other existing in the global namespace.</p> +<p>Below I propose a solution(until these libraries allow themselves to be loaded asynchronously) to allow these libraries to be loaded properly(synchronously) and also removing themselves from global scope.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: libs/jquery/jquery.js</span> + +<span class="nx">define</span><span class="p">([</span> +<span class="c1">// Load the original jQuery source file</span> + <span class="s1">'order!libs/jquery/jquery-min'</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Tell Require.js that this module returns a reference to jQuery</span> + <span class="k">return</span> <span class="nx">$</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: libs/underscore/underscore</span> +<span class="c1">// As above lets load the original underscore source code</span> +<span class="nx">define</span><span class="p">([</span><span class="s1">'order!libs/underscore/underscore-min'</span><span class="p">],</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Tell Require.js that this module returns a reference to Underscore</span> + <span class="k">return</span> <span class="nx">_</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<div class="highlight"><pre><code class="javascript"> <span class="c1">// Filename: libs/backbone/backbone</span> + <span class="c1">// Finally lets load the original backbone source code</span> +<span class="nx">define</span><span class="p">([</span><span class="s1">'order!libs/backbone/backbone-min'</span><span class="p">],</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Now that all the orignal source codes have ran and accessed each other</span> + <span class="c1">// We can call noConflict() to remove them from the global name space</span> + <span class="c1">// Require.js will keep a reference to them so we can use them in our modules</span> + <span class="nx">_</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">();</span> + <span class="nx">$</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">();</span> + <span class="k">return</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">();</span> +<span class="p">});</span> +</code></pre> +</div> +<h3>A boiler plate module</h3> +<p>So before we start developing our application, let’s quickly look over boiler plate code that will be reused quite often.</p> +<p>For convience sake I generally keep a “boilerplate.js” in my application root so I can copy it when I need to.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">//Filename: boilerplate.js</span> + +<span class="nx">define</span><span class="p">([</span> + <span class="c1">// These are path alias that we configured in our bootstrap</span> + <span class="s1">'jQuery'</span><span class="p">,</span> <span class="c1">// lib/jquery/jquery</span> + <span class="s1">'Underscore'</span><span class="p">,</span> <span class="c1">// lib/underscore/underscore</span> + <span class="s1">'Backbone'</span> <span class="c1">// lib/backbone/backbone</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">){</span> + <span class="c1">// Above we have passed in jQuery, Underscore and Backbone</span> + <span class="c1">// They will not be accesible in the global scope</span> + <span class="k">return</span> <span class="p">{};</span> + <span class="c1">// What we return here will be used by other modules </span> +<span class="p">});</span> +</code></pre> +</div> +<p>The first argument of the define function is our dependency array, we can pass in any modules we like in the future.</p> +<h3>App.js Building our applications main module</h3> +<p>Our applications main module should always remain quite light weight. This tutorial covers only setting up a Backbone Router and initializing it in our main module.</p> +<p>The router will then load the correct dependencies depending on the current <span class="caps">URL</span>.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: app.js</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">'jQuery'</span><span class="p">,</span> + <span class="s1">'Underscore'</span><span class="p">,</span> + <span class="s1">'Backbone'</span><span class="p">,</span> + <span class="s1">'router'</span><span class="p">,</span> <span class="c1">// Request router.js</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">Router</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">initialize</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Pass in our Router module and call it's initialize function</span> + <span class="nx">Router</span><span class="p">.</span><span class="nx">initialize</span><span class="p">();</span> + <span class="p">}</span> + + <span class="k">return</span> <span class="p">{</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="nx">initialize</span> + <span class="p">};</span> +<span class="p">});</span> +</code></pre> +</div> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: router.js</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">'jQuery'</span><span class="p">,</span> + <span class="s1">'Underscore'</span><span class="p">,</span> + <span class="s1">'Backbone'</span><span class="p">,</span> + <span class="s1">'views/projects/list'</span><span class="p">,</span> + <span class="s1">'views/users/list'</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">Session</span><span class="p">,</span> <span class="nx">projectListView</span><span class="p">,</span> <span class="nx">userListView</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + <span class="c1">// Define some URL routes</span> + <span class="s1">'/projects'</span><span class="o">:</span> <span class="s1">'showProjects'</span><span class="p">,</span> + <span class="s1">'/users'</span><span class="o">:</span> <span class="s1">'showUsers'</span><span class="p">,</span> + + <span class="c1">// Default</span> + <span class="s1">'*actions": "defaultAction'</span> + <span class="p">},</span> + <span class="nx">showProjects</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Call render on the module we loaded in via the dependency array</span> + <span class="c1">// 'views/projects/list'</span> + <span class="nx">projectListView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="c1">// As above, call render on our loaded module</span> + <span class="c1">// 'views/users/list'</span> + <span class="nx">showUsers</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">userListView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">defaultAction</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">actions</span><span class="p">){</span> + <span class="c1">// We have no matching route, lets just log what the URL was</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'No route:'</span><span class="p">,</span> <span class="nx">actions</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">initialize</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> + <span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span> + <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> + <span class="p">};</span> + <span class="k">return</span> <span class="p">{</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="nx">initialize</span> + <span class="p">};</span> +<span class="p">});</span> +</code></pre> +</div> +<h3>Modularizing a Backbone View</h3> +<p>Backbone views most usually always interact with the <span class="caps">DOM</span>, using our new modular system we can load in Javascript templates using Require.js text! plugin.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: views/project/list</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">'jQuery'</span><span class="p">,</span> + <span class="s1">'Underscore'</span><span class="p">,</span> + <span class="s1">'Backbone'</span><span class="p">,</span> + <span class="c1">// Using the Require.js text! plugin, we are loaded raw text</span> + <span class="c1">// which will be used as our views primary template</span> + <span class="s1">'text!templates/project/list.html'</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">projectListTemplate</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">projectListView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#container'</span><span class="p">),</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Using Underscore we can compile our template with data</span> + <span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{};</span> + <span class="kd">var</span> <span class="nx">compiledTemplate</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">projectListTemplate</span><span class="p">,</span> <span class="nx">data</span> <span class="p">);</span> + <span class="c1">// Append our compiled template to this Views "el"</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span> <span class="nx">compiledTemplate</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// Our module now returns an instantiated view</span> + <span class="c1">// Sometimes you might return an un-instantiated view e.g. return projectListView</span> + <span class="k">return</span> <span class="k">new</span> <span class="nx">projectListView</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<p>Javascript templating allows us to seperate the design from the application logic placing all our html in the templates folder.</p> +<h3>Modularizing a Collection, Model and View</h3> +<p>Now we put it altogether by chaining up a Model, Collection and View which is a typical scenairo when building a Backbone.js application.</p> +<p>First off we will define our model</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: models/project</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">'Underscore'</span><span class="p">,</span> + <span class="s1">'Backbone'</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">projectModel</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s2">"Harry Potter"</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// You usually don't return a model instantiated</span> + <span class="k">return</span> <span class="nx">projectModel</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<p>Now we have a model, our collection module can depend on it. We will set the “model” attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.</p> +<p>“Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.”</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: collections/projects</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">'Underscore'</span><span class="p">,</span> + <span class="s1">'Backbone'</span><span class="p">,</span> + <span class="c1">// Pull in the Model module from above</span> + <span class="s1">'models/project'</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">projectModel</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">projectCollection</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">model</span><span class="o">:</span> <span class="nx">projectModel</span> + <span class="p">});</span> + <span class="c1">// You don't usually return a collection instantiated</span> + <span class="k">return</span> <span class="k">new</span> <span class="nx">projectCollection</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<p>Now we can simply depend on our collection in our view and pass it to our Javascript template.</p> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Filename: views/projects/list</span> +<span class="nx">define</span><span class="p">([</span> + <span class="s1">'jQuery'</span><span class="p">,</span> + <span class="s1">'Underscore'</span><span class="p">,</span> + <span class="s1">'Backbone'</span><span class="p">,</span> + <span class="c1">// Pull in the Collection module from above</span> + <span class="s1">'collections/projects'</span><span class="p">,</span> + <span class="err">'</span><span class="nx">text</span><span class="o">!</span><span class="nx">templates</span><span class="o">/</span><span class="nx">projects</span><span class="o">/</span><span class="nx">list</span> +<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">projectsCollection</span><span class="p">,</span> <span class="nx">projectsListTemplate</span><span class="p">){</span> + <span class="kd">var</span> <span class="nx">projectListView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#container"</span><span class="p">),</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">collection</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">projectsCollection</span><span class="p">;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">add</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Ginger Kid"</span><span class="p">});</span> + <span class="c1">// Compile the template using Underscores micro-templating</span> + <span class="kd">var</span> <span class="nx">compiledTemplate</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">projectsListTemplate</span><span class="p">,</span> <span class="p">{</span> <span class="nx">projects</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">models</span> <span class="p">}</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">compiledTemplate</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// Returning instantiated views can be quite useful for having "state"</span> + <span class="k">return</span> <span class="k">new</span> <span class="nx">projectListView</span><span class="p">;</span> +<span class="p">});</span> +</code></pre> +</div> +<h3>Conclusion</h3> +<p>Looking forward to feedback so I can turn this post and example into quality references on building modular Javascript applications.</p> +<p>Get in touch with me on twitter, comments or github!</p> +<h3>Relevant Links</h3> +<p><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></p> +<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> +<!-- AddThis Button BEGIN --> +<div class="addthis_toolbox addthis_default_style "> +<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> +<a class="addthis_button_tweet"></a> +<a class="addthis_counter addthis_pill_style"></a> +</div> +<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script> +<!-- AddThis Button END --> +<script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id; +var idcomments_post_url = 'http://backbonetutorials.com/organizing-backbone-using-modules'; +</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/pygments/what-is-a-collection/index.html b/pygments/what-is-a-collection/index.html new file mode 100644 index 0000000..190807d --- /dev/null +++ b/pygments/what-is-a-collection/index.html @@ -0,0 +1,189 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>What is a collection? - Backbone.js Tutorials</title> +<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> + <meta name="author" content="Backbone Tutorials" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> + + <!-- Typekit --> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } + </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> +</head> +<body> + <div class="left ribbon-holder"> + <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> + <span class="text">Fork on GitHub</span> + </a> + </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> + <a href="/about.html">about</a> + <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + + <hr> + <div id="post"> +<h1>In progress</h1> +<h2>What is a collection?</h2> +<p>Backbone collections are simply an ordered set of <a href="/what-is-a-model">models</a>. Such that it can be used in situations such as;</p> +<ul> + <li>Model: Student, Collection: ClassStudents</li> + <li>Model: Todo Item, Collection: Todo List</li> + <li>Model: Animals, Collection: Zoo</li> +</ul> +<p>Typically your collection will only use one type of model but models themselves are not limited to a type of collection;</p> +<ul> + <li>Model: Student, Collection: Gym Class</li> + <li>Model: Student, Collection: Art Class</li> + <li>Model: Student, Collection: English Class</li> +</ul> +<p>Here is a generic Model/Collection example.</p> +<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Music is the answer"</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span> + <span class="p">});</span> +</code></pre> +</div> +<h3>Building a collection</h3> +<p>Now we are going to populate a creation with some useful data.</p> +<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s2">"Not specified"</span><span class="p">,</span> + <span class="nx">artist</span><span class="o">:</span> <span class="s2">"Not specified"</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Music is the answer"</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">song1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"How Bizarre"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"OMC"</span> <span class="p">});</span> + <span class="kd">var</span> <span class="nx">song2</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Sexual Healing"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"Marvin Gaye"</span> <span class="p">});</span> + <span class="kd">var</span> <span class="nx">song3</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Talk It Over In Bed"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"OMC"</span> <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">myAlbum</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Album</span><span class="p">([</span> <span class="nx">song1</span><span class="p">,</span> <span class="nx">song2</span><span class="p">,</span> <span class="nx">song3</span><span class="p">]);</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">myAlbum</span><span class="p">.</span><span class="nx">models</span> <span class="p">);</span> <span class="c1">// [song1, song2, song3]</span> + +</code></pre> +</div> +<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> +<!-- AddThis Button BEGIN --> +<div class="addthis_toolbox addthis_default_style "> +<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> +<a class="addthis_button_tweet"></a> +<a class="addthis_counter addthis_pill_style"></a> +</div> +<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script> +<!-- AddThis Button END --> +<script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id; +var idcomments_post_url = 'http://backbonetutorials.com/what-would-you-use-backbone'; +</script> +<span id="IDCommentsPostTitle" style="display:none"></span> +<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script> +</div> + + + + + </div> + + </div> +</div> +<script src="//static.getclicky.com/js" type="text/javascript"></script> +<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> +<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> +</body> +</html> diff --git a/pygments/what-is-a-model/index.html b/pygments/what-is-a-model/index.html index 8570c1a..b7a61ff 100644 --- a/pygments/what-is-a-model/index.html +++ b/pygments/what-is-a-model/index.html @@ -1,7 +1,8 @@ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>What is a model? - Backbone.js Tutorials</title> <link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> <meta name="author" content="Backbone Tutorials" /> @@ -33,7 +34,6 @@ margin-left: 40px; padding-top: 10px; padding-bottom: 10px; - position: relative; } .menu a { margin-right: 10px; @@ -42,7 +42,23 @@ width: 720px; margin: auto; } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> </head> <body> <div class="left ribbon-holder"> @@ -50,13 +66,19 @@ <span class="text">Fork on GitHub</span> </a> </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + <div class="container"> <div class="menu"> <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> </div> @@ -65,7 +87,11 @@ <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> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + <hr> <div id="post"> <h2>What is a model?</h2> @@ -82,7 +108,8 @@ <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> +</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> @@ -98,7 +125,8 @@ <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> +</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> @@ -114,7 +142,8 @@ <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> +</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> @@ -134,7 +163,8 @@ <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> +</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> @@ -157,9 +187,10 @@ <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> +</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> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our “person” changes we will alert their new name.</p> <div class="highlight"><pre><code class="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> @@ -168,23 +199,21 @@ <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="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"change:name"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> + <span class="kd">var</span> <span class="nx">name</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">"name"</span><span class="p">);</span> <span class="c1">// 'Stewie Griffin'</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">"Changed my name to "</span> <span class="o">+</span> <span class="nx">name</span> <span class="p">);</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="nx">replaceNameAttr</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">name</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">name</span><span class="o">:</span> <span class="nx">name</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> - + <span class="nx">person</span><span class="p">.</span><span class="nx">replaceNameAttr</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> +</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> @@ -197,7 +226,8 @@ <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> +<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> @@ -225,7 +255,8 @@ <span class="c1">// God have mercy on our souls</span> </code></pre> -</div><h3>Relevant Links</h3> +</div> +<h3>Relevant Links</h3> <ul> <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> </ul> @@ -238,6 +269,14 @@ <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> </ul> </div> +<!-- AddThis Button BEGIN --> +<div class="addthis_toolbox addthis_default_style "> +<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> +<a class="addthis_button_tweet"></a> +<a class="addthis_counter addthis_pill_style"></a> +</div> +<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script> +<!-- AddThis Button END --> <script> var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; var idcomments_post_id; diff --git a/pygments/what-is-a-router/index.html b/pygments/what-is-a-router/index.html new file mode 100644 index 0000000..c3cef84 --- /dev/null +++ b/pygments/what-is-a-router/index.html @@ -0,0 +1,227 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>What is a router? - Backbone.js Tutorials</title> +<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> + <meta name="author" content="Backbone Tutorials" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> + + <!-- Typekit --> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } + </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> +</head> +<body> + <div class="left ribbon-holder"> + <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> + <span class="text">Fork on GitHub</span> + </a> + </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> + <a href="/about.html">about</a> + <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + + <hr> + <div id="post"> +<h2>What is a router?</h2> +<p>Backbone routers are used for routing your applications URL’s when using hash tags(#). In the traditional <span class="caps">MVC</span> sense they don’t neccesarily fit the semantics and if you have read “<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>” it will elaborate on this point. Though a Backbone “router” is still very useful for any application/feature that needs <span class="caps">URL</span> routing/history capabilities.</p> +<p>Defined routers should always contain at least one route and a function to map the particular route to. In the example below we are going to define a route that is always called.</p> +<p>Also note that routes intepret anything after “#” tag in the url. All links in your application should target “#/action” or “#action”. (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help)</p> +<div class="highlight"><pre><code class="html"><span class="nt"><script></span> + <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">"*actions"</span><span class="o">:</span> <span class="s2">"defaultRoute"</span> <span class="c1">// matches http://example.com/#anything-here</span> + <span class="p">},</span> + <span class="nx">defaultRoute</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">){</span> + <span class="c1">// The variable passed in matches the variable in the route definition "actions"</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// Initiate the router</span> + <span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span> + <span class="c1">// Start Backbone history a neccesary step for bookmarkable URL's</span> + <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> + +<span class="nt"></script></span> + +<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#action"</span><span class="nt">></span>Activate route<span class="nt"></a></span> +<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#/route/action"</span><span class="nt">></span>Activate another route<span class="nt"></a></span> +<span class="c"><!-- Notice the change in the url --></span> +</code></pre> +</div> +<p><strong>Please note: * Prior to Backbone 0.5 (released 1. July 2011) a Router was called a Controller. To avoid confusion, the Backbone developers changed the name to Router. Hence, if you find yourself using an older version of Backbone you should write Backbone.Controller.extend({ *</strong> });</p> +<h4>Dynamic Routing</h4> +<p>Most conventional frameworks allow you to define routes that contain a mix of static and dynamic route parameters. For example you might want to retrieve a post with a variable id with a friendly <span class="caps">URL</span> string. Such that your <span class="caps">URL</span> would look like “http://example.com/#/posts/12”. Once this route was activated you would want to access the id given in the <span class="caps">URL</span> string. This example is implemented below.</p> +<div class="highlight"><pre><code class="html"><span class="nt"><script></span> + <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">"/posts/:id"</span><span class="o">:</span> <span class="s2">"getPost"</span><span class="p">,</span> + <span class="s2">"*actions"</span><span class="o">:</span> <span class="s2">"defaultRoute"</span> <span class="c1">// Backbone will try match the route above first</span> + <span class="p">},</span> + <span class="nx">getPost</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">id</span> <span class="p">)</span> <span class="p">{</span> + <span class="c1">// Note the variable in the route definition being passed in here</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">"Get post number "</span> <span class="o">+</span> <span class="nx">id</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">defaultRoute</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// Instantiate the router</span> + <span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span> + <span class="c1">// Start Backbone history a neccesary step for bookmarkable URL's</span> + <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> + +<span class="nt"></script></span> + +<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#/posts/120"</span><span class="nt">></span>Post 120<span class="nt"></a></span> +<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#/posts/130"</span><span class="nt">></span>Post 130<span class="nt"></a></span> +<span class="c"><!-- Notice the change in the url --></span> +</code></pre> +</div> +<h4>Dynamic Routing Cont. “:params” and “*splats”</h4> +<p>Backbone uses two styles of variables when implementing routes. First there are “:params” which match any <span class="caps">URL</span> components between slashes. Then there are “*splats” which match any number of <span class="caps">URL</span> components. Note that due to the nature of a “*splat” it will always be the last variable in your <span class="caps">URL</span> as it will match any and all components.</p> +<p>Any “*splats” or “:params” in route definitions are passed as arguments (in respective order) to the associated function. A route defined as “/:route/:action” will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)</p> +<p>Here are some examples of using “:params” and “*splats”</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + + <span class="s2">"/posts/:id"</span><span class="o">:</span> <span class="s2">"getPost"</span><span class="p">,</span> + <span class="c1">// <a href="http://example.com/#/posts/121">Example</a></span> + + <span class="s2">"/download/*path"</span><span class="o">:</span> <span class="s2">"downloadFile"</span><span class="p">,</span> + <span class="c1">// <a href="http://example.com/#/download/user/images/hey.gif">Download</a></span> + + <span class="s2">"/:route/:action"</span><span class="o">:</span> <span class="s2">"loadView"</span><span class="p">,</span> + <span class="c1">// <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a></span> + + <span class="p">},</span> + + <span class="nx">getPost</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">id</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span> <span class="c1">// 121 </span> + <span class="p">},</span> + <span class="nx">downloadFile</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">path</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span><span class="nx">path</span><span class="p">);</span> <span class="c1">// user/images/hey.gif </span> + <span class="p">},</span> + <span class="nx">loadView</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">route</span><span class="p">,</span> <span class="nx">action</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span><span class="nx">route</span> <span class="o">+</span> <span class="s2">"_"</span> <span class="o">+</span> <span class="nx">action</span><span class="p">);</span> <span class="c1">// dashboard_graph </span> + <span class="p">}</span> +</code></pre> +</div> +<p>Routes are quite powerful and in an ideal world your application should never contain too many. If you need to implement hash tags with <span class="caps">SEO</span> in mind, do a google search for “google seo hashbangs”.</p> +<p>Remember to do a pull request for any errors you come across.</p> +<h4>Tips and Tricks</h4> +<p>No Tips and Tricks</p> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li> + <li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="http://schistad.info">Herman Schistad</a> (Backbone 0.5 rename from Controller to Router)</li> + <li><a href="http://paulirish.com">Paul Irish</a></li> +</ul> +</div> +<!-- AddThis Button BEGIN --> +<div class="addthis_toolbox addthis_default_style "> +<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> +<a class="addthis_button_tweet"></a> +<a class="addthis_counter addthis_pill_style"></a> +</div> +<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script> +<!-- AddThis Button END --> +<script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id; +var idcomments_post_url = 'http://backbonetutorials.com/what-is-a-router'; +</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/pygments/what-is-a-view/index.html b/pygments/what-is-a-view/index.html index 0cd2f72..88d2a14 100644 --- a/pygments/what-is-a-view/index.html +++ b/pygments/what-is-a-view/index.html @@ -1,7 +1,8 @@ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>What is a view? - Backbone.js Tutorials</title> <link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> <meta name="author" content="Backbone Tutorials" /> @@ -41,7 +42,23 @@ width: 720px; margin: auto; } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> </head> <body> <div class="left ribbon-holder"> @@ -49,13 +66,19 @@ <span class="text">Fork on GitHub</span> </a> </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + <div class="container"> <div class="menu"> <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> </div> @@ -64,166 +87,150 @@ <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> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + <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> +<p>Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically <a href="http://documentcloud.github.com/underscore/#template">Underscore.js’s _.template</a>.</p> +<p>We will be using <a href="http://jquery.com/">jQuery 1.5</a> as our <span class="caps">DOM</span> manipulator. It’s possible to use other libraries such as <a href="http://mootools.net/">MooTools</a> or <a href="http://sizzlejs.com/">Sizzle</a>, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.</p> +<p>For the purposes of this demonstration, we will be implementing a search box. <a href="http://jsfiddle.net/thomas/C9wew/6">A live example</a> can be found on jsFiddle.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"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="nx">alert</span><span class="p">(</span><span class="s2">"Alerts suck."</span><span class="p">);</span> <span class="p">}</span> <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">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> - + + <span class="c1">// The initialize function is always called when instantiating a Backbone View.</span> + <span class="c1">// Consider it the constructor of the class.</span> + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">;</span> </code></pre> -</div><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> - +</div> +<h4>The “el” property</h4> +<p>The “el” property references the <span class="caps">DOM</span> object created in the browser. Every Backbone.js view has an “el” property, and if it not defined, Backbone.js will construct its own, which is an empty div element.</p> +<p>Let us set our view’s “el” property to div#search_container, effectively making Backbone.View the owner of the <span class="caps">DOM</span> element.</p> +<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"search_container"</span><span class="nt">></div></span> + +<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">"Alerts suck."</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_container"</span><span class="p">)</span> <span class="p">});</span> +<span class="nt"></script></span> </code></pre> -</div><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> - +</div> +<p><strong>Note</strong>: Keep in mind that this binds the container element. Any events we trigger must be in this element.</p> +<h4>Loading a template</h4> +<p>Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to <a href="http://documentcloud.github.com/underscore/">Underscore.js’s documentation</a> for more information.</p> +<p>Let us implement a “render()” function and call it when the view is initialized. The “render()” function will load our template into the view’s “el” property using jQuery.</p> +<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"search_container"</span><span class="nt">></div></span> + +<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_template"</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone "el"</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_container"</span><span class="p">)</span> <span class="p">});</span> +<span class="nt"></script></span> + +<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"search_template"</span><span class="nt">></span> + <span class="o"><</span><span class="nx">label</span><span class="o">></span><span class="nx">Search</span><span class="o"><</span><span class="err">/label></span> + <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_input"</span> <span class="o">/></span> + <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_button"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Search"</span> <span class="o">/></span> +<span class="nt"></script></span> </code></pre> -</div><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> +</div> +<p><strong>Tip</strong>: Place all your templates in a file and serve them from a <span class="caps">CDN</span>. This ensures your users will always have your application cached.</p> +<h4>Listening for events</h4> +<p>To attach a listener to our view, we use the “events” attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the “el” property. Let us attach a “click” listener to our button.</p> +<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"search_container"</span><span class="nt">></div></span> + +<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="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">render</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="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_template"</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> <span class="p">},</span> - <span class="nx">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="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">"click input[type=button]"</span><span class="o">:</span> <span class="s2">"doSearch"</span> <span class="p">},</span> - <span class="nx">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="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> + <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">"Search for "</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_input"</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> <span class="p">}</span> <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">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> - + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_container"</span><span class="p">)</span> <span class="p">});</span> +<span class="nt"></script></span> + +<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"search_template"</span><span class="nt">></span> + <span class="o"><</span><span class="nx">label</span><span class="o">></span><span class="nx">Search</span><span class="o"><</span><span class="err">/label></span> + <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_input"</span> <span class="o">/></span> + <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_button"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Search"</span> <span class="o">/></span> +<span class="nt"></script></span> </code></pre> -</div><p>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> +</div> <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> - +<p><strong>Using template variables</strong></p> +<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"search_container"</span><span class="nt">></div></span> + +<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">//Pass variables in using Underscore.js Template</span> + <span class="kd">var</span> <span class="nx">variables</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">search_label</span><span class="o">:</span> <span class="s2">"My Search"</span> <span class="p">};</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_template"</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="nx">variables</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone "el"</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">"click input[type=button]"</span><span class="o">:</span> <span class="s2">"doSearch"</span> + <span class="p">},</span> + <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> + <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">"Search for "</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_input"</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search_container"</span><span class="p">)</span> <span class="p">});</span> +<span class="nt"></script></span> + +<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"search_template"</span><span class="nt">></span> + <span class="c"><!--</span> <span class="nx">Access</span> <span class="nx">template</span> <span class="nx">variables</span> <span class="kd">with</span> <span class="o"><%=</span> <span class="o">%></span> <span class="o">--></span> + <span class="o"><</span><span class="nx">label</span><span class="o">><%=</span> <span class="nx">search_label</span> <span class="o">%><</span><span class="err">/label></span> + <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_input"</span> <span class="o">/></span> + <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"search_button"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Search"</span> <span class="o">/></span> +<span class="nt"></script></span> </code></pre> -</div><h3>Relevant Links</h3> +</div> +<p>If you have any questions, leave a comment below.</p> +<h3>Relevant Links</h3> <ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> + <li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li> + <li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google <span class="caps">API</span></a></li> + <li><a href="http://jsfiddle.net/thomas/C9wew/4/">This examples exact code on jsfiddle.net</a></li> + <li><a href="http://jsfiddle.net/thomas/dKK9Y/6/">Another semi-complete example on jsFiddle</a></li> </ul> <h3>Author</h3> <ul> @@ -231,9 +238,17 @@ </ul> <h3>Contributors</h3> <ul> - <li>None</li> + <li><a href="https://github.com/zaeleus">Michael Macias</a></li> </ul> </div> +<!-- AddThis Button BEGIN --> +<div class="addthis_toolbox addthis_default_style "> +<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> +<a class="addthis_button_tweet"></a> +<a class="addthis_counter addthis_pill_style"></a> +</div> +<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script> +<!-- AddThis Button END --> <script> var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; var idcomments_post_id; diff --git a/pygments/why-would-you-use-backbone/index.html b/pygments/why-would-you-use-backbone/index.html index 73a5b4a..07ccd0a 100644 --- a/pygments/why-would-you-use-backbone/index.html +++ b/pygments/why-would-you-use-backbone/index.html @@ -1,8 +1,9 @@ <!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> +<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Why would you use Backbone.js? - Backbone.js Tutorials</title> <link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> <meta name="author" content="Backbone Tutorials" /> @@ -41,7 +42,23 @@ width: 720px; margin: auto; } + .FlattrButton { + position: absolute; + top: 15px; + right: 15px; + } </style> + <script type="text/javascript"> +/* <![CDATA[ */ + (function() { + var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; + s.type = 'text/javascript'; + s.async = true; + s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; + t.parentNode.insertBefore(s, t); + })(); +/* ]]> */ +</script> </head> <body> <div class="left ribbon-holder"> @@ -49,13 +66,19 @@ <span class="text">Fork on GitHub</span> </a> </div> + + <a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a> +<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank"> +<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> + <div class="container"> <div class="menu"> <a href="/">home</a> + <a href="/examples.html">examples</a> + <!-- <a href="/contribute.html">contribute</a>--> <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> + <a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a> </div> @@ -64,20 +87,40 @@ <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> + <p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p> + +<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a> +<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> + <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> +<h2>Why do you need Backbone.js?</h2> +<p>Building single-page web apps or complicated user interfaces will get extremely difficult by simply using <a href="http://jquery.com">jQuery</a> or <a href="http://mootools.net">MooTools</a>. The problem is standard JavaScript libraries are great at what they do – and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete <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>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://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> +<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/FND"><span class="caps">FND</span></a></li> +</ul> +</div> +<!-- AddThis Button BEGIN --> +<div class="addthis_toolbox addthis_default_style "> +<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> +<a class="addthis_button_tweet"></a> +<a class="addthis_counter addthis_pill_style"></a> </div> +<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script> +<!-- AddThis Button END --> <script> var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; var idcomments_post_id; |