Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

move backbone.localstorage.html -> backbone.localStorage.html. Fixes #…

  • Loading branch information...
commit 2acf7a7eaa7ba9883d903964970c7b8ff96ed0b0 1 parent ffbd58d
@akre54 akre54 authored
View
284 docs/backbone-localstorage.html
@@ -1,284 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-<head>
- <title>backbone-localstorage.js</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
- <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
- <link rel="stylesheet" media="all" href="docco.css" />
-</head>
-<body>
- <div class="container">
- <div class="page">
-
- <div class="header">
-
- <h1>backbone-localstorage.js</h1>
-
-
-
- <div class="toc">
- <h3>Table of Contents</h3>
- <ol>
-
-
- <li>
- <a class="source" href="backbone-localstorage.html">
- backbone-localstorage.js
- </a>
- </li>
-
-
- <li>
- <a class="source" href="todos.html">
- todos.js
- </a>
- </li>
-
- </ol>
- </div>
-
- </div>
-
-
-
-
-
- <div class="highlight"><pre><span class="cm">/**</span>
-<span class="cm"> * Backbone localStorage Adapter</span>
-<span class="cm"> * https://github.com/jeromegn/Backbone.localStorage</span>
-<span class="cm"> */</span>
-
-<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
-
-
-
-
-<p>A simple module to replace <code>Backbone.sync</code> with <em>localStorage</em>-based
-persistence. Models are given GUIDS, and saved into a JSON object. Simple
-as that.
-
-</p>
-<p>Hold reference to Underscore.js and Backbone.js in the closure in order
-to make things work even if they are removed from the global namespace
-
-</p>
-
-
- <div class="highlight"><pre><span class="kd">var</span> <span class="nx">_</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_</span><span class="p">;</span>
-<span class="kd">var</span> <span class="nx">Backbone</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">Backbone</span><span class="p">;</span></pre></div>
-
-
-
-
-<p>Generate four random hex digits.
-
-</p>
-
-
- <div class="highlight"><pre><span class="kd">function</span> <span class="nx">S4</span><span class="p">()</span> <span class="p">{</span>
- <span class="k">return</span> <span class="p">(((</span><span class="mi">1</span><span class="o">+</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">())</span><span class="o">*</span><span class="mh">0x10000</span><span class="p">)</span><span class="o">|</span><span class="mi">0</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">).</span><span class="nx">substring</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
-<span class="p">};</span></pre></div>
-
-
-
-
-<p>Generate a pseudo-GUID by concatenating random hexadecimal.
-
-</p>
-
-
- <div class="highlight"><pre><span class="kd">function</span> <span class="nx">guid</span><span class="p">()</span> <span class="p">{</span>
- <span class="k">return</span> <span class="p">(</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="s2">&quot;-&quot;</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="s2">&quot;-&quot;</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="s2">&quot;-&quot;</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="s2">&quot;-&quot;</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="nx">S4</span><span class="p">());</span>
-<span class="p">};</span></pre></div>
-
-
-
-
-<p>Our Store is represented by a single JS object in <em>localStorage</em>. Create it
-with a meaningful name, like the name you&#39;d give a table.
-window.Store is deprectated, use Backbone.LocalStorage instead
-
-</p>
-
-
- <div class="highlight"><pre><span class="nx">Backbone</span><span class="p">.</span><span class="nx">LocalStorage</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Store</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="p">{</span>
- <span class="k">this</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="kd">var</span> <span class="nx">store</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">getItem</span><span class="p">(</span><span class="k">this</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">records</span> <span class="o">=</span> <span class="p">(</span><span class="nx">store</span> <span class="o">&amp;&amp;</span> <span class="nx">store</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">))</span> <span class="o">||</span> <span class="p">[];</span>
-<span class="p">};</span>
-
-<span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Backbone</span><span class="p">.</span><span class="nx">LocalStorage</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div>
-
-
-
-
-<p>Save the current state of the <strong>Store</strong> to <em>localStorage</em>.
-
-</p>
-
-
- <div class="highlight"><pre> <span class="nx">save</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">setItem</span><span class="p">(</span><span class="k">this</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">records</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">));</span>
- <span class="p">},</span></pre></div>
-
-
-
-
-<p>Add a model, giving it a (hopefully)-unique GUID, if it doesn&#39;t already
-have an id of it&#39;s own.
-
-</p>
-
-
- <div class="highlight"><pre> <span class="nx">create</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
- <span class="nx">model</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">guid</span><span class="p">();</span>
- <span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">idAttribute</span><span class="p">,</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
- <span class="p">}</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">setItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">&quot;-&quot;</span><span class="o">+</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">model</span><span class="p">));</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">();</span>
- <span class="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
- <span class="p">},</span></pre></div>
-
-
-
-
-<p>Update a model by replacing its copy in <code>this.data</code>.
-
-</p>
-
-
- <div class="highlight"><pre> <span class="nx">update</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">setItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">&quot;-&quot;</span><span class="o">+</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">model</span><span class="p">));</span>
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">include</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">toString</span><span class="p">()))</span> <span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span> <span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">();</span>
- <span class="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
- <span class="p">},</span></pre></div>
-
-
-
-
-<p>Retrieve a model from <code>this.data</code> by id.
-
-</p>
-
-
- <div class="highlight"><pre> <span class="nx">find</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">getItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">&quot;-&quot;</span><span class="o">+</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">));</span>
- <span class="p">},</span></pre></div>
-
-
-
-
-<p>Return the array of all models currently in storage.
-
-</p>
-
-
- <div class="highlight"><pre> <span class="nx">findAll</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="k">return</span> <span class="nx">_</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">).</span><span class="nx">chain</span><span class="p">()</span>
- <span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">){</span><span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">getItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">&quot;-&quot;</span><span class="o">+</span><span class="nx">id</span><span class="p">));},</span> <span class="k">this</span><span class="p">)</span>
- <span class="p">.</span><span class="nx">compact</span><span class="p">()</span>
- <span class="p">.</span><span class="nx">value</span><span class="p">();</span>
- <span class="p">},</span></pre></div>
-
-
-
-
-<p>Delete a model from <code>this.data</code>, returning it.
-
-</p>
-
-
- <div class="highlight"><pre> <span class="nx">destroy</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">removeItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">&quot;-&quot;</span><span class="o">+</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">records</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record_id</span><span class="p">){</span><span class="k">return</span> <span class="nx">record_id</span> <span class="o">==</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">toString</span><span class="p">();});</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">();</span>
- <span class="k">return</span> <span class="nx">model</span><span class="p">;</span>
- <span class="p">},</span>
-
- <span class="nx">localStorage</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="k">return</span> <span class="nx">localStorage</span><span class="p">;</span>
- <span class="p">}</span>
-
-<span class="p">});</span></pre></div>
-
-
-
-
-<p>localSync delegate to the model or collection&#39;s
-<em>localStorage</em> property, which should be an instance of <code>Store</code>.
-window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead
-
-</p>
-
-
- <div class="highlight"><pre><span class="nx">Backbone</span><span class="p">.</span><span class="nx">LocalStorage</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Store</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">localSync</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">store</span> <span class="o">=</span> <span class="nx">model</span><span class="p">.</span><span class="nx">localStorage</span> <span class="o">||</span> <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">;</span></pre></div>
-
-
-
-
-<p>Backwards compatibility with Backbone &lt;= 0.3.3
-
-</p>
-
-
- <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">options</span> <span class="o">==</span> <span class="s1">&#39;function&#39;</span><span class="p">)</span> <span class="p">{</span>
- <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span>
- <span class="nx">success</span><span class="o">:</span> <span class="nx">options</span><span class="p">,</span>
- <span class="nx">error</span><span class="o">:</span> <span class="nx">error</span>
- <span class="p">};</span>
- <span class="p">}</span>
-
- <span class="kd">var</span> <span class="nx">resp</span><span class="p">;</span>
-
- <span class="k">switch</span> <span class="p">(</span><span class="nx">method</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">case</span> <span class="s2">&quot;read&quot;</span><span class="o">:</span> <span class="nx">resp</span> <span class="o">=</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span> <span class="o">!=</span> <span class="kc">undefined</span> <span class="o">?</span> <span class="nx">store</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="o">:</span> <span class="nx">store</span><span class="p">.</span><span class="nx">findAll</span><span class="p">();</span> <span class="k">break</span><span class="p">;</span>
- <span class="k">case</span> <span class="s2">&quot;create&quot;</span><span class="o">:</span> <span class="nx">resp</span> <span class="o">=</span> <span class="nx">store</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
- <span class="k">case</span> <span class="s2">&quot;update&quot;</span><span class="o">:</span> <span class="nx">resp</span> <span class="o">=</span> <span class="nx">store</span><span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
- <span class="k">case</span> <span class="s2">&quot;delete&quot;</span><span class="o">:</span> <span class="nx">resp</span> <span class="o">=</span> <span class="nx">store</span><span class="p">.</span><span class="nx">destroy</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
- <span class="p">}</span>
-
- <span class="k">if</span> <span class="p">(</span><span class="nx">resp</span><span class="p">)</span> <span class="p">{</span>
- <span class="nx">options</span><span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="nx">resp</span><span class="p">);</span>
- <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
- <span class="nx">options</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Record not found.&#39;</span><span class="p">);</span>
- <span class="p">}</span>
-<span class="p">};</span>
-
-<span class="nx">Backbone</span><span class="p">.</span><span class="nx">ajaxSync</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span><span class="p">;</span>
-
-<span class="nx">Backbone</span><span class="p">.</span><span class="nx">getSyncMethod</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">if</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">localStorage</span> <span class="o">||</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">collection</span> <span class="o">&amp;&amp;</span> <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">))</span>
- <span class="p">{</span>
- <span class="k">return</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">localSync</span><span class="p">;</span>
- <span class="p">}</span>
-
- <span class="k">return</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">ajaxSync</span><span class="p">;</span>
-<span class="p">};</span></pre></div>
-
-
-
-
-<p>Override &#39;Backbone.sync&#39; to default to localSync,
-the original &#39;Backbone.sync&#39; is still available in &#39;Backbone.ajaxSync&#39;
-</p>
-
-
- <div class="highlight"><pre><span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">return</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">getSyncMethod</span><span class="p">(</span><span class="nx">model</span><span class="p">).</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="p">[</span><span class="nx">method</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">error</span><span class="p">]);</span>
-<span class="p">};</span>
-
-<span class="p">})();</span>
-
-</pre></div>
-
-
- <div class="fleur">h</div>
- </div>
- </div>
-</body>
-</html>
View
0  docs/backbone.localstorage.html → docs/backbone.localStorage.html
File renamed without changes
View
442 docs/todos.html
@@ -10,7 +10,7 @@
<body>
<div id="container">
<div id="background"></div>
-
+
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To &hellip;</a>
@@ -18,113 +18,113 @@
<div id="jump_wrapper">
<div id="jump_page_wrapper">
<div id="jump_page">
-
-
+
+
<a class="source" href="backbone.localStorage.html">
backbone.localStorage.js
</a>
-
-
+
+
<a class="source" href="todos.html">
todos.js
</a>
-
+
</div>
</div>
</li>
</ul>
-
+
<ul class="sections">
-
+
<li id="title">
<div class="annotation">
<h1>todos.js</h1>
</div>
</li>
-
-
-
+
+
+
<li id="section-1">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">&#182;</a>
</div>
<p>An example Backbone application contributed by
<a href="http://jgn.me/">Jérôme Gravel-Niquet</a>. This demo uses a simple
-<a href="backbone-localstorage.html">LocalStorage adapter</a>
+<a href="backbone.localstorage.html">LocalStorage adapter</a>
to persist Backbone models within your browser.</p>
</div>
-
+
</li>
-
-
+
+
<li id="section-2">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">&#182;</a>
</div>
<p>Load the application once the DOM is ready, using <code>jQuery.ready</code>:</p>
</div>
-
+
<div class="content"><div class='highlight'><pre>$(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-3">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">&#182;</a>
</div>
<h2 id="todo-model">Todo Model</h2>
</div>
-
+
</li>
-
-
+
+
<li id="section-4">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">&#182;</a>
</div>
-
+
</div>
-
+
</li>
-
-
+
+
<li id="section-5">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">&#182;</a>
</div>
<p>Our basic <strong>Todo</strong> model has <code>title</code>, <code>order</code>, and <code>done</code> attributes.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> Todo = Backbone.Model.extend({</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-6">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">&#182;</a>
</div>
<p>Default attributes for the todo item.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> defaults: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> {
title: <span class="hljs-string">"empty todo..."</span>,
@@ -132,57 +132,57 @@ <h2 id="todo-model">Todo Model</h2>
done: <span class="hljs-literal">false</span>
};
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-7">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">&#182;</a>
</div>
<p>Toggle the <code>done</code> state of this todo item.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> toggle: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">this</span>.save({done: !<span class="hljs-keyword">this</span>.get(<span class="hljs-string">"done"</span>)});
}
});</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-8">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">&#182;</a>
</div>
<h2 id="todo-collection">Todo Collection</h2>
</div>
-
+
</li>
-
-
+
+
<li id="section-9">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">&#182;</a>
</div>
-
+
</div>
-
+
</li>
-
-
+
+
<li id="section-10">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-10">&#182;</a>
</div>
@@ -190,79 +190,79 @@ <h2 id="todo-collection">Todo Collection</h2>
server.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> TodoList = Backbone.Collection.extend({</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-11">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-11">&#182;</a>
</div>
<p>Reference to this collection’s model.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> model: Todo,</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-12">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-12">&#182;</a>
</div>
<p>Save all of the todo items under the <code>&quot;todos-backbone&quot;</code> namespace.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> localStorage: <span class="hljs-keyword">new</span> Backbone.LocalStorage(<span class="hljs-string">"todos-backbone"</span>),</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-13">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-13">&#182;</a>
</div>
<p>Filter down the list of all todo items that are finished.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> done: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.where({done: <span class="hljs-literal">true</span>});
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-14">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-14">&#182;</a>
</div>
<p>Filter down the list to only todo items that are still not finished.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> remaining: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.where({done: <span class="hljs-literal">false</span>});
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-15">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-15">&#182;</a>
</div>
@@ -270,127 +270,127 @@ <h2 id="todo-collection">Todo Collection</h2>
GUID in the database. This generates the next order number for new items.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> nextOrder: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.length) <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.last().get(<span class="hljs-string">'order'</span>) + <span class="hljs-number">1</span>;
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-16">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-16">&#182;</a>
</div>
<p>Todos are sorted by their original insertion order.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> comparator: <span class="hljs-string">'order'</span>
});</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-17">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-17">&#182;</a>
</div>
<p>Create our global collection of <strong>Todos</strong>.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> Todos = <span class="hljs-keyword">new</span> TodoList;</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-18">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">&#182;</a>
</div>
<h2 id="todo-item-view">Todo Item View</h2>
</div>
-
+
</li>
-
-
+
+
<li id="section-19">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-19">&#182;</a>
</div>
-
+
</div>
-
+
</li>
-
-
+
+
<li id="section-20">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-20">&#182;</a>
</div>
<p>The DOM element for a todo item…</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> TodoView = Backbone.View.extend({</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-21">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-21">&#182;</a>
</div>
<p>… is a list tag.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> tagName: <span class="hljs-string">"li"</span>,</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-22">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-22">&#182;</a>
</div>
<p>Cache the template function for a single item.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> template: _.template($(<span class="hljs-string">'#item-template'</span>).html()),</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-23">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-23">&#182;</a>
</div>
<p>The DOM events specific to an item.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> events: {
<span class="hljs-string">"click .toggle"</span> : <span class="hljs-string">"toggleDone"</span>,
<span class="hljs-string">"dblclick .view"</span> : <span class="hljs-string">"edit"</span>,
@@ -398,13 +398,13 @@ <h2 id="todo-item-view">Todo Item View</h2>
<span class="hljs-string">"keypress .edit"</span> : <span class="hljs-string">"updateOnEnter"</span>,
<span class="hljs-string">"blur .edit"</span> : <span class="hljs-string">"close"</span>
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-24">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-24">&#182;</a>
</div>
@@ -413,80 +413,80 @@ <h2 id="todo-item-view">Todo Item View</h2>
app, we set a direct reference on the model for convenience.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model, <span class="hljs-string">'change'</span>, <span class="hljs-keyword">this</span>.render);
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model, <span class="hljs-string">'destroy'</span>, <span class="hljs-keyword">this</span>.remove);
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-25">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-25">&#182;</a>
</div>
<p>Re-render the titles of the todo item.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">this</span>.$el.html(<span class="hljs-keyword">this</span>.template(<span class="hljs-keyword">this</span>.model.toJSON()));
<span class="hljs-keyword">this</span>.$el.toggleClass(<span class="hljs-string">'done'</span>, <span class="hljs-keyword">this</span>.model.get(<span class="hljs-string">'done'</span>));
<span class="hljs-keyword">this</span>.input = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'.edit'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-26">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-26">&#182;</a>
</div>
<p>Toggle the <code>&quot;done&quot;</code> state of the model.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> toggleDone: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">this</span>.model.toggle();
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-27">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-27">&#182;</a>
</div>
<p>Switch this view into <code>&quot;editing&quot;</code> mode, displaying the input field.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> edit: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">this</span>.$el.addClass(<span class="hljs-string">"editing"</span>);
<span class="hljs-keyword">this</span>.input.focus();
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-28">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-28">&#182;</a>
</div>
<p>Close the <code>&quot;editing&quot;</code> mode, saving changes to the todo.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> close: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> value = <span class="hljs-keyword">this</span>.input.val();
<span class="hljs-keyword">if</span> (!value) {
@@ -496,89 +496,89 @@ <h2 id="todo-item-view">Todo Item View</h2>
<span class="hljs-keyword">this</span>.$el.removeClass(<span class="hljs-string">"editing"</span>);
}
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-29">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-29">&#182;</a>
</div>
<p>If you hit <code>enter</code>, we’re through editing the item.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> updateOnEnter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
<span class="hljs-keyword">if</span> (e.keyCode == <span class="hljs-number">13</span>) <span class="hljs-keyword">this</span>.close();
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-30">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-30">&#182;</a>
</div>
<p>Remove the item, destroy the model.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> clear: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">this</span>.model.destroy();
}
});</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-31">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-31">&#182;</a>
</div>
<h2 id="the-application">The Application</h2>
</div>
-
+
</li>
-
-
+
+
<li id="section-32">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-32">&#182;</a>
</div>
-
+
</div>
-
+
</li>
-
-
+
+
<li id="section-33">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-33">&#182;</a>
</div>
<p>Our overall <strong>AppView</strong> is the top-level piece of UI.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> AppView = Backbone.View.extend({</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-34">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-34">&#182;</a>
</div>
@@ -586,49 +586,49 @@ <h2 id="the-application">The Application</h2>
the App already present in the HTML.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> el: $(<span class="hljs-string">"#todoapp"</span>),</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-35">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-35">&#182;</a>
</div>
<p>Our template for the line of statistics at the bottom of the app.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> statsTemplate: _.template($(<span class="hljs-string">'#stats-template'</span>).html()),</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-36">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-36">&#182;</a>
</div>
<p>Delegated events for creating new items, and clearing completed ones.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> events: {
<span class="hljs-string">"keypress #new-todo"</span>: <span class="hljs-string">"createOnEnter"</span>,
<span class="hljs-string">"click #clear-completed"</span>: <span class="hljs-string">"clearCompleted"</span>,
<span class="hljs-string">"click #toggle-all"</span>: <span class="hljs-string">"toggleAllComplete"</span>
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-37">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-37">&#182;</a>
</div>
@@ -637,7 +637,7 @@ <h2 id="the-application">The Application</h2>
loading any preexisting todos that might be saved in <em>localStorage</em>.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">this</span>.input = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">"#new-todo"</span>);
@@ -652,13 +652,13 @@ <h2 id="the-application">The Application</h2>
Todos.fetch();
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-38">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-38">&#182;</a>
</div>
@@ -666,7 +666,7 @@ <h2 id="the-application">The Application</h2>
of the app doesn’t change.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> done = Todos.done().length;
<span class="hljs-keyword">var</span> remaining = Todos.remaining().length;
@@ -682,13 +682,13 @@ <h2 id="the-application">The Application</h2>
<span class="hljs-keyword">this</span>.allCheckbox.checked = !remaining;
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-39">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-39">&#182;</a>
</div>
@@ -696,35 +696,35 @@ <h2 id="the-application">The Application</h2>
appending its element to the <code>&lt;ul&gt;</code>.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> addOne: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(todo)</span> </span>{
<span class="hljs-keyword">var</span> view = <span class="hljs-keyword">new</span> TodoView({model: todo});
<span class="hljs-keyword">this</span>.$(<span class="hljs-string">"#todo-list"</span>).append(view.render().el);
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-40">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-40">&#182;</a>
</div>
<p>Add all items in the <strong>Todos</strong> collection at once.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> addAll: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
Todos.each(<span class="hljs-keyword">this</span>.addOne, <span class="hljs-keyword">this</span>);
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-41">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-41">&#182;</a>
</div>
@@ -732,7 +732,7 @@ <h2 id="the-application">The Application</h2>
persisting it to <em>localStorage</em>.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> createOnEnter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
<span class="hljs-keyword">if</span> (e.keyCode != <span class="hljs-number">13</span>) <span class="hljs-keyword">return</span>;
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.input.val()) <span class="hljs-keyword">return</span>;
@@ -740,20 +740,20 @@ <h2 id="the-application">The Application</h2>
Todos.create({title: <span class="hljs-keyword">this</span>.input.val()});
<span class="hljs-keyword">this</span>.input.val(<span class="hljs-string">''</span>);
},</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-42">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-42">&#182;</a>
</div>
<p>Clear all done todo items, destroying their models.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> clearCompleted: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
_.invoke(Todos.done(), <span class="hljs-string">'destroy'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
@@ -765,26 +765,26 @@ <h2 id="the-application">The Application</h2>
}
});</pre></div></div>
-
+
</li>
-
-
+
+
<li id="section-43">
<div class="annotation">
-
+
<div class="pilwrap ">
<a class="pilcrow" href="#section-43">&#182;</a>
</div>
<p>Finally, we kick things off by creating the <strong>App</strong>.</p>
</div>
-
+
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> App = <span class="hljs-keyword">new</span> AppView;
});</pre></div></div>
-
+
</li>
-
+
</ul>
</div>
</body>
View
2  examples/todos/todos.js
@@ -1,6 +1,6 @@
// An example Backbone application contributed by
// [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses a simple
-// [LocalStorage adapter](backbone-localstorage.html)
+// [LocalStorage adapter](backbone.localstorage.html)
// to persist Backbone models within your browser.
// Load the application once the DOM is ready, using `jQuery.ready`:
Please sign in to comment.
Something went wrong with that request. Please try again.