Skip to content
Browse files

updating docs

  • Loading branch information...
1 parent 0ad11d8 commit 278c8a6c94ca0e9ed331ce355298431583b5e07e @HenrikJoreteg committed Jun 26, 2011
Showing with 68 additions and 55 deletions.
  1. +68 −55 index.html
View
123 index.html
@@ -1,6 +1,5 @@
<!DOCTYPE html> <html> <head> <title>capsule.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> capsule.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> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</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>Module Setup</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>All public Capsule classes and modules will be attached to the <code>Capsule</code>
namespace. Exported for both CommonJS and the browser.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Capsule</span><span class="p">,</span>
- <span class="nx">server</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">Backbone</span><span class="p">,</span>
<span class="nx">_</span><span class="p">,</span>
<span class="nx">uuid</span><span class="p">;</span>
@@ -10,15 +9,15 @@
<span class="nx">_</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;underscore&#39;</span><span class="p">).</span><span class="nx">_</span><span class="p">;</span>
<span class="nx">uuid</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;node-uuid&#39;</span><span class="p">);</span>
<span class="nx">Capsule</span> <span class="o">=</span> <span class="nx">exports</span><span class="p">;</span>
- <span class="nx">server</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</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>
<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="nx">Capsule</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">Capsule</span> <span class="o">||</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">Capsule</span> <span class="o">=</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>Our model hash, this is where all instantiated models are stored by id</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">models</span> <span class="o">=</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>Capsule.Model</h2> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Extend the Backbone model with Capsule functionality</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">Model</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></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <h3>register</h3>
+ </pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>Flag so we know if we're on the server or not</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">server</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span> <span class="o">==</span> <span class="s1">&#39;undefined&#39;</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>Our model hash, this is where all instantiated models are stored by id</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">models</span> <span class="o">=</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> <h2>Capsule.Model</h2> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Extend the Backbone model with Capsule functionality</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">Model</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></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <h3>register</h3>
<p>Register ourselves. This means generate a uuid if we're on the server
and listen for changes to ID (which you shouldn't really change) this just handles the
@@ -27,7 +26,7 @@
<p>We also bind change so to our <code>publishChange</code> method.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">register</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
- <span class="k">if</span> <span class="p">(</span><span class="nx">server</span> <span class="o">&amp;&amp;</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="s1">&#39;id&#39;</span><span class="p">))</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">Capsule</span><span class="p">.</span><span class="nx">server</span> <span class="o">&amp;&amp;</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="s1">&#39;id&#39;</span><span class="p">))</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">id</span><span class="o">:</span> <span class="nx">uuid</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">id</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">Capsule</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">])</span> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
@@ -36,7 +35,7 @@
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">publishChange</span><span class="p">).</span><span class="nx">bind</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> <h3>addChildCollection</h3>
+ </pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <h3>addChildCollection</h3>
<p>We use this to build our nested model structure. This will ensure
that <code>publish</code>, <code>add</code>, and <code>remove</code> events will bubble up to our root
@@ -48,20 +47,20 @@
<span class="k">this</span><span class="p">[</span><span class="nx">label</span><span class="p">].</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;move&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">publishMove</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
<span class="k">this</span><span class="p">[</span><span class="nx">label</span><span class="p">].</span><span class="nx">parent</span> <span class="o">=</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> <h3>addChildModel</h3>
+ </pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <h3>addChildModel</h3>
<p>Adds a child model and ensures that various publish events will be proxied up
and that we store a reference to the parent.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addChildModel</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">label</span><span class="p">,</span> <span class="nx">constructor</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">[</span><span class="nx">label</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">constructor</span><span class="p">();</span>
<span class="k">this</span><span class="p">[</span><span class="nx">label</span><span class="p">].</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;publish&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">publishProxy</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
<span class="k">this</span><span class="p">[</span><span class="nx">label</span><span class="p">].</span><span class="nx">parent</span> <span class="o">=</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> <h3>modelGetter</h3>
+ </pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <h3>modelGetter</h3>
<p>Convenience method for retrieving any model, no matter where, by id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelGetter</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="k">return</span> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">id</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> <h3>safeSet</h3>
+ </pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <h3>safeSet</h3>
<p>This should be used whenever getting changes from the browser since we
can't trust the source. This checks to see if the properties being set
@@ -76,7 +75,7 @@
<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> <h3>safeDelete</h3>
+ </pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <h3>safeDelete</h3>
<p>This should be used whenever getting a delete command from the browser since we
can't trust the source. This checks for <code>immutable</code> properties in your models
@@ -87,29 +86,29 @@
<span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">errorCallback</span><span class="p">))</span> <span class="nx">errorCallback</span><span class="p">(</span><span class="s1">&#39;delete&#39;</span><span class="p">,</span> <span class="nx">user</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> <h3>toggle</h3>
+ </pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h3>toggle</h3>
<p>checks and toggles boolean properties.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">attrName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">change</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">change</span><span class="p">[</span><span class="nx">attrName</span><span class="p">]</span> <span class="o">=</span> <span class="o">!</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">attrName</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">change</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> <h3>toggleServer</h3>
+ </pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <h3>toggleServer</h3>
<p>checks and toggles boolean properties on the server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleServer</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">attrName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">change</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">change</span><span class="p">[</span><span class="nx">attrName</span><span class="p">]</span> <span class="o">=</span> <span class="o">!</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">attrName</span><span class="p">));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setServer</span><span class="p">(</span><span class="nx">change</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> <h3>deleteServer</h3>
+ </pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <h3>deleteServer</h3>
<p>Sends delete event for <code>id</code> to server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">deleteServer</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
<span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;delete&#39;</span><span class="p">,</span>
<span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <h3>callServerMethod</h3>
+ </pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <h3>callServerMethod</h3>
<p>Send a method call event. To trigger a model method on the server (if allowed).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">callServerMethod</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="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
@@ -118,7 +117,7 @@
<span class="nx">method</span><span class="o">:</span> <span class="nx">method</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <h3>toTemplate</h3>
+ </pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <h3>toTemplate</h3>
<p>This is a replacement for simply sending Backbone's <code>toJSON</code> data to the template.
Since we're using <a href="http://icanhazjs.com">ICanHaz.js</a> which uses Mustache, using
@@ -135,7 +134,7 @@
<span class="p">}</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <h3>xport</h3>
+ </pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <h3>xport</h3>
<p>Our serializer. Builds and returns a simple object ready to be JSON stringified
By default it recurses through child models/collections unless you pass it <code>{recurse: false}</code>.
@@ -167,7 +166,7 @@
<span class="nx">process</span><span class="p">(</span><span class="nx">result</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <h3>mport</h3>
+ </pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h3>mport</h3>
<p>Our deserializer. Reinflates the model structure with data created by the <code>xport</code> function above.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">mport</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">silent</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">process</span><span class="p">(</span><span class="nx">targetObj</span><span class="p">,</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
@@ -191,13 +190,13 @@
<span class="nx">process</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h3>publishProxy</h3>
+ </pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <h3>publishProxy</h3>
<p>Primarily an internal method that just passes publish events up
through the model structure so those events can bubble.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">publishProxy</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</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="s1">&#39;publish&#39;</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <h3>publishChange</h3>
+ </pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <h3>publishChange</h3>
<p>Creates a publish event of type <code>change</code> for bubbling up the tree.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">publishChange</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="k">instanceof</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">)</span> <span class="p">{</span>
@@ -210,7 +209,7 @@
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;event was not a model&#39;</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <h3>publishAdd</h3>
+ </pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <h3>publishAdd</h3>
<p>Convert <code>add</code> events to <code>publish</code> events for bubbling.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">publishAdd</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="nx">collection</span><span class="p">)</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="s1">&#39;publish&#39;</span><span class="p">,</span> <span class="p">{</span>
@@ -219,15 +218,15 @@
<span class="nx">collection</span><span class="o">:</span> <span class="nx">collection</span><span class="p">.</span><span class="nx">id</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <h3>publishRemove</h3>
+ </pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <h3>publishRemove</h3>
<p>Convert <code>remove</code> events to <code>publish</code> events for bubbling.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">publishRemove</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="nx">collection</span><span class="p">)</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="s1">&#39;publish&#39;</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;remove&#39;</span><span class="p">,</span>
<span class="nx">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="p">},</span>
- </pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <h3>publishMove</h3>
+ </pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <h3>publishMove</h3>
<p>Publishes a <code>move</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">publishMove</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="nx">id</span><span class="p">,</span> <span class="nx">newPosition</span><span class="p">)</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="s1">&#39;publish&#39;</span><span class="p">,</span> <span class="p">{</span>
@@ -237,7 +236,7 @@
<span class="nx">newPosition</span><span class="o">:</span> <span class="nx">newPosition</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <h3>ensureRequired</h3>
+ </pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <h3>ensureRequired</h3>
<p>Convenience for making sure a model has certain required attributes.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ensureRequired</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
@@ -247,7 +246,7 @@
<span class="p">});</span>
<span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <h3>validate</h3>
+ </pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <h3>validate</h3>
<p>Convenient default for Backbone's <code>validate</code> convention. It lets you do simple typechecking
on properties by supplying a <code>required</code> hash with property names and types </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
@@ -259,7 +258,7 @@
<span class="p">}</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <h3>checkType</h3>
+ </pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <h3>checkType</h3>
<p>Our simple typechecker, that just uses underscore's type checkers.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">checkType</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">validator</span><span class="p">;</span>
@@ -275,7 +274,7 @@
<span class="k">throw</span> <span class="s2">&quot;The &#39;&quot;</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s2">&quot;&#39; property of a &#39;&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">type</span> <span class="o">+</span> <span class="s2">&quot;&#39; must be a &#39;&quot;</span> <span class="o">+</span> <span class="nx">type</span> <span class="o">+</span> <span class="s2">&quot;&#39;. You gave me &#39;&quot;</span> <span class="o">+</span> <span class="nx">value</span> <span class="o">+</span> <span class="s2">&quot;&#39;.&quot;</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <h3>setServer</h3>
+ </pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <h3>setServer</h3>
<p>Our server version of the normal <code>set</code> method. Takes a hash of attributes</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">attrs</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
@@ -284,7 +283,7 @@
<span class="nx">change</span><span class="o">:</span> <span class="nx">attrs</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <h3>unsetServer</h3>
+ </pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <h3>unsetServer</h3>
<p>Unsets a given property</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">unsetServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">property</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
@@ -293,7 +292,7 @@
<span class="nx">property</span><span class="o">:</span> <span class="nx">property</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <h3>safeCall</h3>
+ </pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <h3>safeCall</h3>
<p>Checks to make sure a method is explicitly exposed and that the user canEdit the object
and the executes the method.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">safeCall</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">user</span><span class="p">,</span> <span class="nx">errorCallback</span><span class="p">)</span> <span class="p">{</span>
@@ -305,14 +304,14 @@
<span class="p">}</span>
<span class="p">});</span>
- </pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <h2>Capsule.Collection</h2> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Extend Backbone collection with Capsule functionality</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">Collection</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>
- </pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <h3>register</h3>
+ </pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <h2>Capsule.Collection</h2> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Extend Backbone collection with Capsule functionality</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">Collection</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>
+ </pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <h3>register</h3>
<p>Generates an <code>id</code> if on server and sets it in our reference hash.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">register</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="nx">server</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">uuid</span><span class="p">();</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">Capsule</span><span class="p">.</span><span class="nx">server</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">uuid</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">id</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">Capsule</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">])</span> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <h3>safeAdd</h3>
+ </pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <h3>safeAdd</h3>
<p>Is used to add items to the collection from an untrusted source (the client)
it inits the collection's model type. Sets the supplied properties on that new
@@ -323,10 +322,10 @@
<span class="nx">newObj</span><span class="p">.</span><span class="nx">safeSet</span><span class="p">(</span><span class="nx">attrs</span><span class="p">,</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">errorCallback</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">newObj</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
- <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">errorCallback</span><span class="p">))</span> <span class="nx">errorCallback</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">objectProperties</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">errorCallback</span><span class="p">))</span> <span class="nx">errorCallback</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">attrs</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-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <h3>addServer</h3>
+ </pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <h3>addServer</h3>
<p>The server version of backbone's <code>add</code> method.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addServer</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
@@ -335,7 +334,7 @@
<span class="nx">data</span><span class="o">:</span> <span class="nx">data</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <h3>moveServer</h3>
+ </pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <h3>moveServer</h3>
<p>Send the <code>move</code> event</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">moveServer</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">newPosition</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
@@ -345,7 +344,7 @@
<span class="nx">newPosition</span><span class="o">:</span> <span class="nx">newPosition</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <h3>registerRadioProperties</h3>
+ </pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">&#182;</a> </div> <h3>registerRadioProperties</h3>
<p>A convenience for creating <code>radio</code> properties where you can specify an
Array of properties in a collection and ensure that only model can have that
@@ -378,29 +377,29 @@
<span class="p">});</span>
<span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">&#182;</a> </div> <h3>filterByProperty</h3>
+ </pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">&#182;</a> </div> <h3>filterByProperty</h3>
<p>Shortcut for returning an array of models in the collection that have a certain <code>name</code> / <code>value</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">filterByProperty</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">prop</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">filter</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="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">prop</span><span class="p">)</span> <span class="o">===</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">&#182;</a> </div> <h3>findByProperty</h3>
+ </pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <h3>findByProperty</h3>
<p>Shortcut for finding first model in the collection with a certain <code>name</code> / <code>value</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">findByProperty</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">prop</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">find</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="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">prop</span><span class="p">)</span> <span class="o">===</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <h3>setAll</h3>
+ </pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <h3>setAll</h3>
<p>Convenience for setting an attribute on all items in collection</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setAll</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">obj</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">set</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <h3>safeMove</h3>
+ </pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <h3>safeMove</h3>
<p>the "I don't trust you" version of the move command which takes an error callback
so we can track who's messing with the system... and boot 'em :)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">safeMove</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">newPosition</span><span class="p">,</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">errorCallback</span><span class="p">)</span> <span class="p">{</span>
@@ -410,21 +409,21 @@
<span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">errorCallback</span><span class="p">))</span> <span class="nx">errorCallback</span><span class="p">(</span><span class="s1">&#39;move&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">id</span><span class="p">,</span> <span class="nx">newPosition</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <h3>moveItem</h3>
+ </pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <h3>moveItem</h3>
<p>Calculate position and move to new position if not in right spot.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">moveItem</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">newPosition</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">model</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="nx">id</span><span class="p">),</span>
<span class="nx">currPosition</span> <span class="o">=</span> <span class="nx">_</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">).</span><span class="nx">indexOf</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">currPosition</span> <span class="o">!==</span> <span class="nx">newPosition</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">currPosition</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">newPosition</span><span class="p">,</span> <span class="mi">0</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">trigger</span><span class="p">(</span><span class="s1">&#39;move&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">id</span><span class="p">,</span> <span class="nx">newPosition</span><span class="p">);</span>
+ <span class="nx">model</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;move&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">id</span><span class="p">,</span> <span class="nx">newPosition</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>
- </pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <h1>Capsule.View</h1>
+ </pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <h1>Capsule.View</h1>
-<p>Adding some conveniences to the Backbone view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">View</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></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <h3>handleBindings</h3>
+<p>Adding some conveniences to the Backbone view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Capsule</span><span class="p">.</span><span class="nx">View</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></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <h3>handleBindings</h3>
<p>This makes it simple to bind model attributes to the view.
To use it, add a <code>classBindings</code> and/or a <code>contentBindings</code> attribute
@@ -474,7 +473,7 @@
<span class="p">}</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <h3>desist</h3>
+ </pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#182;</a> </div> <h3>desist</h3>
<p>This is method we used to remove/unbind/destroy the view.
By default we fade it out this seemed like a reasonable default for realtime apps.
@@ -498,7 +497,7 @@
<span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#182;</a> </div> <h3>addReferences</h3>
+ </pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">&#182;</a> </div> <h3>addReferences</h3>
<p>This is a shortcut for adding reference to specific elements within your view for
access later. This is avoids excessive DOM queries and gives makes it easier to update
@@ -524,7 +523,7 @@
<span class="k">this</span><span class="p">[</span><span class="s1">&#39;$&#39;</span> <span class="o">+</span> <span class="nx">item</span><span class="p">]</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">hash</span><span class="p">[</span><span class="nx">item</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="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">&#182;</a> </div> <h3>autoSetInputs</h3>
+ </pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">&#182;</a> </div> <h3>autoSetInputs</h3>
<p>Convenience for automagically setting all input values on the server
as-you-type. This is letter-by-letter syncing. You have to be careful with this
@@ -539,7 +538,7 @@
will be sent to the server as you type.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">autoSetInputs</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">$</span><span class="p">(</span><span class="s1">&#39;:input&#39;</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">genericKeyUp</span><span class="p">).</span><span class="nx">bind</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-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">&#182;</a> </div> <h3>genericKeyUp</h3>
+ </pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">&#182;</a> </div> <h3>genericKeyUp</h3>
<p>This is handy if you want to add any sort of as-you-type syncing
this is obviously traffic heavy, use wth caution.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">genericKeyUp</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
@@ -550,7 +549,7 @@
<span class="nx">res</span><span class="p">[</span><span class="nx">type</span> <span class="o">=</span> <span class="nx">target</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">)]</span> <span class="o">=</span> <span class="nx">target</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">setServer</span><span class="p">(</span><span class="nx">res</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">&#182;</a> </div> <h3>basicRender</h3>
+ </pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <h3>basicRender</h3>
<p>All the usual stuff when I render a view. It assumes that the view has a <code>template</code> property
that is the name of the ICanHaz template. You can also specify the template name by passing
@@ -559,13 +558,27 @@
<span class="nx">_</span><span class="p">.</span><span class="nx">defaults</span><span class="p">(</span><span class="nx">opts</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">templateKey</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">template</span>
<span class="p">});</span>
- <span class="kd">var</span> <span class="nx">newEl</span> <span class="o">=</span> <span class="nx">ich</span><span class="p">[</span><span class="nx">opts</span><span class="p">.</span><span class="nx">templateKey</span><span class="p">](</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toTemplate</span><span class="p">());</span>
+ <span class="kd">var</span> <span class="nx">newEl</span> <span class="o">=</span> <span class="nx">ich</span><span class="p">[</span><span class="nx">opts</span><span class="p">.</span><span class="nx">templateKey</span><span class="p">](</span><span class="k">this</span><span class="p">.</span><span class="nx">addViewMixins</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toTemplate</span><span class="p">()));</span>
<span class="nx">$</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">replaceWith</span><span class="p">(</span><span class="nx">newEl</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">newEl</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleBindings</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">delegateEvents</span><span class="p">();</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <h3>subViewRender</h3>
+ </pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#182;</a> </div> <h3>addViewMixins</h3>
+
+<p>Makes it possible for the view to definte <code>templateHelpers</code> array of functions
+that will be sent to the mustache template for rendering. Great for formatting etc
+especially when it's specific to that view and doesn't really belong in your model code.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addViewMixins</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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">templateHelpers</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">templateHelpers</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">obj</span><span class="p">[</span><span class="nx">val</span><span class="p">]</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">self</span><span class="p">[</span><span class="nx">val</span><span class="p">],</span> <span class="nx">self</span><span class="p">);</span>
+ <span class="p">});</span>
+ <span class="nx">obj</span><span class="p">.</span><span class="nx">team</span><span class="p">();</span>
+ <span class="p">}</span>
+ <span class="k">return</span> <span class="nx">obj</span><span class="p">;</span>
+ <span class="p">},</span>
+ </pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#182;</a> </div> <h3>subViewRender</h3>
<p>This is handy for views within collections when you use <code>collectomatic</code>. Just like <code>basicRender</code> it assumes
that the view either has a <code>template</code> property or that you pass it an options object with the name of the
@@ -578,7 +591,7 @@
<span class="nx">placement</span><span class="o">:</span> <span class="s1">&#39;append&#39;</span><span class="p">,</span>
<span class="nx">templateKey</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">template</span>
<span class="p">});</span>
- <span class="kd">var</span> <span class="nx">newEl</span> <span class="o">=</span> <span class="nx">ich</span><span class="p">[</span><span class="nx">opts</span><span class="p">.</span><span class="nx">templateKey</span><span class="p">](</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toTemplate</span><span class="p">())[</span><span class="mi">0</span><span class="p">];</span>
+ <span class="kd">var</span> <span class="nx">newEl</span> <span class="o">=</span> <span class="nx">ich</span><span class="p">[</span><span class="nx">opts</span><span class="p">.</span><span class="nx">templateKey</span><span class="p">](</span><span class="k">this</span><span class="p">.</span><span class="nx">addViewMixins</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toTemplate</span><span class="p">()))[</span><span class="mi">0</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">el</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">containerEl</span><span class="p">)[</span><span class="nx">opts</span><span class="p">.</span><span class="nx">placement</span><span class="p">](</span><span class="nx">newEl</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
@@ -588,7 +601,7 @@
<span class="k">this</span><span class="p">.</span><span class="nx">handleBindings</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">delegateEvents</span><span class="p">();</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#182;</a> </div> <h2>Binding Utilities (thanks to <a href="http://andyet.net/team/nate/">@natevw</a>)</h2>
+ </pre></div> </td> </tr> <tr id="section-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">&#182;</a> </div> <h2>Binding Utilities (thanks to <a href="http://andyet.net/team/nate/">@natevw</a>)</h2>
<h3>bindomatic</h3>
@@ -608,14 +621,14 @@
<span class="p">});</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#182;</a> </div> <h3>unbindomatic</h3>
+ </pre></div> </td> </tr> <tr id="section-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">&#182;</a> </div> <h3>unbindomatic</h3>
<p>Unbinds all the handlers in the unbindomatic list from the model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">unbindomatic</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">unbindomatic_list</span> <span class="o">||</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">unbind</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">unbind</span><span class="p">();</span>
<span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">&#182;</a> </div> <h3>collectomatic</h3>
+ </pre></div> </td> </tr> <tr id="section-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">&#182;</a> </div> <h3>collectomatic</h3>
<p>Shorthand for rendering collections and their invividual views.
Just pass it the collection, and the view to use for the items in the

0 comments on commit 278c8a6

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