Skip to content
Browse files

updating docs

  • Loading branch information...
1 parent 321f42e commit 39ce43f4f2004bb27a761f7b9eb2dc10df07b9db @derickbailey committed May 26, 2012
Showing with 116 additions and 86 deletions.
  1. +116 −86 docs/backbone.picky.html
View
202 docs/backbone.picky.html
@@ -1,108 +1,138 @@
-<!DOCTYPE html> <html> <head> <title>backbone.picky.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backbone.picky.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <p>Backbone.Picky, v0.0.1
+<!DOCTYPE html> <html> <head> <title>backbone.picky.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backbone.picky.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <p>Backbone.Picky, v0.1.0
Copyright (c)2012 Derick Bailey, Muted Solutions, LLC.
Distributed under MIT license
http://github.com/derickbailey/backbone.picky</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">Backbone</span><span class="p">.</span><span class="nx">Picky</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">Backbone</span><span class="p">,</span> <span class="nx">_</span><span class="p">)</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">Picky</span> <span class="o">=</span> <span class="p">{};</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>Picky.SingleSelect</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>Coming Soon!</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <h2>Picky.MultiSelect</h2>
+ <span class="kd">var</span> <span class="nx">Picky</span> <span class="o">=</span> <span class="p">{};</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>Picky.SingleSelect</h2>
+
+<p>A single-select mixin for Backbone.Collection, allowing a single
+model to be selected within a collection. Selection of another
+model within the collection causes the previous model to be
+deselected.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Picky</span><span class="p">.</span><span class="nx">SingleSelect</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">collection</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="nx">collection</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">Picky</span><span class="p">.</span><span class="nx">SingleSelect</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>Select a model, deselecting any previously
+select model</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">select</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="k">if</span> <span class="p">(</span><span class="nx">model</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">selected</span> <span class="o">===</span> <span class="nx">model</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">deselect</span><span class="p">();</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">selected</span> <span class="o">=</span> <span class="nx">model</span><span class="p">;</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;selected&quot;</span><span class="p">,</span> <span class="nx">model</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>Deselect a model, resulting in no model
+being selected</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">deselect</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="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">){</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
+
+ <span class="nx">model</span> <span class="o">=</span> <span class="nx">model</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">;</span>
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selected</span> <span class="o">!==</span> <span class="nx">model</span><span class="p">){</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">.</span><span class="nx">deselect</span><span class="p">();</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;deselected&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">);</span>
+ <span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">;</span>
+ <span class="p">}</span>
+
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <h2>Picky.MultiSelect</h2>
<p>A mult-select mixin for Backbone.Collection, allowing a collection to
have multiple items selected, including <code>selectAll</code> and <code>selectNone</code>
-capabilities.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Picky</span><span class="p">.</span><span class="nx">MultiSelect</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">collection</span><span class="p">)</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="nx">collection</span><span class="p">;</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">selected</span> <span class="o">=</span> <span class="p">{};</span>
- <span class="p">};</span>
+capabilities.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Picky</span><span class="p">.</span><span class="nx">MultiSelect</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">collection</span><span class="p">)</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="nx">collection</span><span class="p">;</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">selected</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">Picky</span><span class="p">.</span><span class="nx">MultiSelect</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>Select a specified model, make sure the
+ <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Picky</span><span class="p">.</span><span class="nx">MultiSelect</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Select a specified model, make sure the
model knows it's selected, and hold on to
-the selected model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">select</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="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">])</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
+the selected model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">select</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="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">])</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">]</span> <span class="o">=</span> <span class="nx">model</span><span class="p">;</span>
- <span class="nx">model</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span>
- <span class="nx">calculateSelectedLength</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Deselect a specified model, make sure the
+ <span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">]</span> <span class="o">=</span> <span class="nx">model</span><span class="p">;</span>
+ <span class="nx">model</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span>
+ <span class="nx">calculateSelectedLength</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Deselect a specified model, make sure the
model knows it has been deselected, and remove
-the model from the selected list.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">deselect</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="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">])</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
-
- <span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">];</span>
- <span class="nx">model</span><span class="p">.</span><span class="nx">deselect</span><span class="p">();</span>
- <span class="nx">calculateSelectedLength</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Select all models in this collection</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">selectAll</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">each</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="p">{</span> <span class="nx">model</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span> <span class="p">});</span>
- <span class="nx">calculateSelectedLength</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Deselect all models in this collection</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">selectNone</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
- <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selectedLength</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">each</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="p">{</span> <span class="nx">model</span><span class="p">.</span><span class="nx">deselect</span><span class="p">();</span> <span class="p">});</span>
- <span class="nx">calculateSelectedLength</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Toggle select all / none. If some are selected, it
+the model from the selected list.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">deselect</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="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">])</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
+
+ <span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">];</span>
+ <span class="nx">model</span><span class="p">.</span><span class="nx">deselect</span><span class="p">();</span>
+ <span class="nx">calculateSelectedLength</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Select all models in this collection</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">selectAll</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">each</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="p">{</span> <span class="nx">model</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span> <span class="p">});</span>
+ <span class="nx">calculateSelectedLength</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Deselect all models in this collection</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">selectNone</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selectedLength</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">each</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="p">{</span> <span class="nx">model</span><span class="p">.</span><span class="nx">deselect</span><span class="p">();</span> <span class="p">});</span>
+ <span class="nx">calculateSelectedLength</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>Toggle select all / none. If some are selected, it
will select all. If all are selected, it will select
-none. If none are selected, it will select all.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleSelectAll</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
- <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selectedLength</span> <span class="o">===</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">selectNone</span><span class="p">();</span>
- <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">selectAll</span><span class="p">();</span>
- <span class="p">}</span>
- <span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <h2>Picky.Selectable</h2>
+none. If none are selected, it will select all.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleSelectAll</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selectedLength</span> <span class="o">===</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">selectNone</span><span class="p">();</span>
+ <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">selectAll</span><span class="p">();</span>
+ <span class="p">}</span>
+ <span class="p">}</span>
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <h2>Picky.Selectable</h2>
<p>A selectable mixin for Backbone.Model, allowing a model to be selected,
-enabling it to work with Picky.MultiSelect or on it's own</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Picky</span><span class="p">.</span><span class="nx">Selectable</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">model</span> <span class="o">=</span> <span class="nx">model</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">Picky</span><span class="p">.</span><span class="nx">Selectable</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Select this model, and tell our
-collection that we're selected</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">select</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
- <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
-
- <span class="k">this</span><span class="p">.</span><span class="nx">selected</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;selected&quot;</span><span class="p">);</span>
-
- <span class="k">if</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="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
- <span class="p">}</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>Deselect this model, and tell our
-collection that we're deselected</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">deselect</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
-
- <span class="k">this</span><span class="p">.</span><span class="nx">selected</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;deselected&quot;</span><span class="p">);</span>
-
- <span class="k">if</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="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">deselect</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
- <span class="p">}</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Change selected to the opposite of what
-it currently is</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleSelected</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
- <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">deselect</span><span class="p">();</span>
- <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span>
- <span class="p">}</span>
- <span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h2>Helper Methods</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>Calculate the number of selected items in a collection
+enabling it to work with Picky.MultiSelect or on it's own</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Picky</span><span class="p">.</span><span class="nx">Selectable</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">model</span> <span class="o">=</span> <span class="nx">model</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">Picky</span><span class="p">.</span><span class="nx">Selectable</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>Select this model, and tell our
+collection that we're selected</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">select</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">selected</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;selected&quot;</span><span class="p">);</span>
+
+ <span class="k">if</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="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
+ <span class="p">}</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Deselect this model, and tell our
+collection that we're deselected</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">deselect</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">selected</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;deselected&quot;</span><span class="p">);</span>
+
+ <span class="k">if</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="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">deselect</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
+ <span class="p">}</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>Change selected to the opposite of what
+it currently is</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleSelected</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selected</span><span class="p">)</span> <span class="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">deselect</span><span class="p">();</span>
+ <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span>
+ <span class="p">}</span>
+ <span class="p">}</span>
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <h2>Helper Methods</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Calculate the number of selected items in a collection
and update the collection with that length. Trigger events
-from the collection based on the number of selected items.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">calculateSelectedLength</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">collection</span><span class="p">)</span> <span class="p">{</span>
- <span class="nx">collection</span><span class="p">.</span><span class="nx">selectedLength</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">size</span><span class="p">(</span><span class="nx">collection</span><span class="p">.</span><span class="nx">selected</span><span class="p">);</span>
+from the collection based on the number of selected items.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">calculateSelectedLength</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">collection</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">collection</span><span class="p">.</span><span class="nx">selectedLength</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">size</span><span class="p">(</span><span class="nx">collection</span><span class="p">.</span><span class="nx">selected</span><span class="p">);</span>
- <span class="kd">var</span> <span class="nx">selectedLength</span> <span class="o">=</span> <span class="nx">collection</span><span class="p">.</span><span class="nx">selectedLength</span><span class="p">;</span>
- <span class="kd">var</span> <span class="nx">length</span> <span class="o">=</span> <span class="nx">collection</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
+ <span class="kd">var</span> <span class="nx">selectedLength</span> <span class="o">=</span> <span class="nx">collection</span><span class="p">.</span><span class="nx">selectedLength</span><span class="p">;</span>
+ <span class="kd">var</span> <span class="nx">length</span> <span class="o">=</span> <span class="nx">collection</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
- <span class="k">if</span> <span class="p">(</span><span class="nx">selectedLength</span> <span class="o">===</span> <span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
- <span class="nx">collection</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;select:all&quot;</span><span class="p">,</span> <span class="nx">collection</span><span class="p">);</span>
- <span class="k">return</span><span class="p">;</span>
- <span class="p">}</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">selectedLength</span> <span class="o">===</span> <span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">collection</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;select:all&quot;</span><span class="p">,</span> <span class="nx">collection</span><span class="p">);</span>
+ <span class="k">return</span><span class="p">;</span>
+ <span class="p">}</span>
- <span class="k">if</span> <span class="p">(</span><span class="nx">selectedLength</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
- <span class="nx">collection</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;select:none&quot;</span><span class="p">,</span> <span class="nx">collection</span><span class="p">);</span>
- <span class="k">return</span><span class="p">;</span>
- <span class="p">}</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">selectedLength</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">collection</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;select:none&quot;</span><span class="p">,</span> <span class="nx">collection</span><span class="p">);</span>
+ <span class="k">return</span><span class="p">;</span>
+ <span class="p">}</span>
- <span class="k">if</span> <span class="p">(</span><span class="nx">selectedLength</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">selectedLength</span> <span class="o">&lt;</span> <span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
- <span class="nx">collection</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;select:some&quot;</span><span class="p">,</span> <span class="nx">collection</span><span class="p">);</span>
- <span class="k">return</span><span class="p">;</span>
- <span class="p">}</span>
- <span class="p">};</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">selectedLength</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">selectedLength</span> <span class="o">&lt;</span> <span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">collection</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;select:some&quot;</span><span class="p">,</span> <span class="nx">collection</span><span class="p">);</span>
+ <span class="k">return</span><span class="p">;</span>
+ <span class="p">}</span>
+ <span class="p">};</span>
- <span class="k">return</span> <span class="nx">Picky</span><span class="p">;</span>
+ <span class="k">return</span> <span class="nx">Picky</span><span class="p">;</span>
<span class="p">})(</span><span class="nx">Backbone</span><span class="p">,</span> <span class="nx">_</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

0 comments on commit 39ce43f

Please sign in to comment.
Something went wrong with that request. Please try again.