UNPKG

104 kBHTMLView Raw
1<!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>
2namespace. 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>
3 <span class="nx">server</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span>
4 <span class="nx">Backbone</span><span class="p">,</span>
5 <span class="nx">_</span><span class="p">,</span>
6 <span class="nx">uuid</span><span class="p">;</span>
7
8 <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">exports</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
9 <span class="nx">Backbone</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;backbone&#39;</span><span class="p">);</span>
10 <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>
11 <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>
12 <span class="nx">Capsule</span> <span class="o">=</span> <span class="nx">exports</span><span class="p">;</span>
13 <span class="nx">server</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
14 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
15 <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>
16 <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>
17
18 <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>
19 <span class="p">}</span>
20 </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>
21 </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>
22
23<p>Register ourselves. This means generate a uuid if we're on the server
24and listen for changes to ID (which you shouldn't really change) this just handles the
25case where our root model is initted on the client, before it has any data. Once it gets
26its <code>id</code> you shouldn't ever change it.</p>
27
28<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>
29 <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
30 <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>
31 <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>
32 <span class="p">}</span>
33 <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>
34 <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change:id&#39;</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>
35 <span class="k">if</span> <span class="p">(</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="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">self</span><span class="p">;</span>
36 <span class="p">});</span>
37 <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>
38 <span class="p">},</span>
39 </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>
40
41<p>We use this to build our nested model structure. This will ensure
42that <code>publish</code>, <code>add</code>, and <code>remove</code> events will bubble up to our root
43model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addChildCollection</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>
44 <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>
45 <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>
46 <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;remove&#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">publishRemove</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
47 <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;add&#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">publishAdd</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
48 <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>
49 <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>
50 <span class="p">},</span>
51 </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>
52
53<p>Adds a child model and ensures that various publish events will be proxied up
54and 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>
55 <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>
56 <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>
57 <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>
58 <span class="p">},</span>
59 </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>
60
61<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>
62 <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>
63 <span class="p">},</span>
64 </pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <h3>toggle</h3>
65
66<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>
67 <span class="kd">var</span> <span class="nx">change</span> <span class="o">=</span> <span class="p">{};</span>
68 <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>
69 <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>
70 <span class="p">},</span>
71 </pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <h3>toggleServer</h3>
72
73<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>
74 <span class="kd">var</span> <span class="nx">change</span> <span class="o">=</span> <span class="p">{};</span>
75 <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>
76 <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>
77 <span class="p">},</span>
78 </pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <h3>deleteServer</h3>
79
80<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>
81 <span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
82 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;delete&#39;</span><span class="p">,</span>
83 <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span>
84 <span class="p">});</span>
85 <span class="p">},</span>
86 </pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h3>callServerMethod</h3>
87
88<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>
89 <span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
90 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;method&#39;</span><span class="p">,</span>
91 <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>
92 <span class="nx">method</span><span class="o">:</span> <span class="nx">method</span>
93 <span class="p">});</span>
94 <span class="p">},</span>
95 </pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <h3>toTemplate</h3>
96
97<p>This is a replacement for simply sending Backbone's <code>toJSON</code> data to the template.
98Since we're using <a href="http://icanhazjs.com">ICanHaz.js</a> which uses Mustache, using
99this function lets us send function to the template. Useful for formatting, and other
100calculated values.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toTemplate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
101 <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span>
102 <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
103
104 <span class="nx">result</span><span class="p">.</span><span class="nx">htmlId</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">cid</span><span class="p">;</span>
105 <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>
106 <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>
107 <span class="nx">result</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>
108 <span class="p">});</span>
109 <span class="p">}</span>
110 <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
111 <span class="p">},</span>
112 </pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <h3>xport</h3>
113
114<p>Our serializer. Builds and returns a simple object ready to be JSON stringified
115By default it recurses through child models/collections unless you pass it <code>{recurse: false}</code>.
116The recursion also includes protections from creating circular references.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">xport</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">opt</span><span class="p">)</span> <span class="p">{</span>
117 <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">{},</span>
118 <span class="nx">settings</span> <span class="o">=</span> <span class="nx">_</span><span class="p">({</span>
119 <span class="nx">recurse</span><span class="o">:</span> <span class="kc">true</span>
120 <span class="p">}).</span><span class="nx">extend</span><span class="p">(</span><span class="nx">opt</span> <span class="o">||</span> <span class="p">{});</span>
121
122 <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">source</span><span class="p">)</span> <span class="p">{</span>
123 <span class="nx">targetObj</span><span class="p">.</span><span class="nx">attrs</span> <span class="o">=</span> <span class="nx">source</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
124 <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">source</span><span class="p">,</span> <span class="kd">function</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>
125 <span class="k">if</span> <span class="p">(</span><span class="nx">settings</span><span class="p">.</span><span class="nx">recurse</span><span class="p">)</span> <span class="p">{</span>
126 <span class="k">if</span> <span class="p">(</span><span class="nx">key</span> <span class="o">!==</span> <span class="s1">&#39;collection&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">source</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="k">instanceof</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">)</span> <span class="p">{</span>
127 <span class="nx">targetObj</span><span class="p">.</span><span class="nx">collections</span> <span class="o">=</span> <span class="nx">targetObj</span><span class="p">.</span><span class="nx">collections</span> <span class="o">||</span> <span class="p">{};</span>
128 <span class="nx">targetObj</span><span class="p">.</span><span class="nx">collections</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="p">{};</span>
129 <span class="nx">targetObj</span><span class="p">.</span><span class="nx">collections</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">models</span> <span class="o">=</span> <span class="p">[];</span>
130 <span class="nx">targetObj</span><span class="p">.</span><span class="nx">collections</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">source</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">id</span> <span class="o">||</span> <span class="kc">null</span><span class="p">;</span>
131 <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">source</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
132 <span class="nx">process</span><span class="p">(</span><span class="nx">targetObj</span><span class="p">.</span><span class="nx">collections</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">models</span><span class="p">[</span><span class="nx">index</span><span class="p">]</span> <span class="o">=</span> <span class="p">{},</span> <span class="nx">value</span><span class="p">);</span>
133 <span class="p">});</span>
134 <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">key</span> <span class="o">!==</span> <span class="s1">&#39;parent&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">source</span><span class="p">[</span><span class="nx">key</span><span class="p">]</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>
135 <span class="nx">targetObj</span><span class="p">.</span><span class="nx">models</span> <span class="o">=</span> <span class="nx">targetObj</span><span class="p">.</span><span class="nx">models</span> <span class="o">||</span> <span class="p">{};</span>
136 <span class="nx">process</span><span class="p">(</span><span class="nx">targetObj</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="p">{},</span> <span class="nx">value</span><span class="p">);</span>
137 <span class="p">}</span>
138 <span class="p">}</span>
139 <span class="p">});</span>
140 <span class="p">}</span>
141 <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>
142 <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
143 <span class="p">},</span>
144 </pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <h3>mport</h3>
145
146<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>
147 <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>
148 <span class="nx">targetObj</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">attrs</span><span class="p">,</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="nx">silent</span><span class="p">});</span>
149 <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">collections</span><span class="p">)</span> <span class="p">{</span>
150 <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">collections</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">collection</span><span class="p">,</span> <span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
151 <span class="nx">targetObj</span><span class="p">[</span><span class="nx">name</span><span class="p">].</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">collection</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
152 <span class="nx">Capsule</span><span class="p">.</span><span class="nx">models</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="o">=</span> <span class="nx">targetObj</span><span class="p">[</span><span class="nx">name</span><span class="p">];</span>
153 <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">collection</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">modelData</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
154 <span class="kd">var</span> <span class="nx">nextObject</span> <span class="o">=</span> <span class="nx">targetObj</span><span class="p">[</span><span class="nx">name</span><span class="p">].</span><span class="nx">get</span><span class="p">(</span><span class="nx">modelData</span><span class="p">.</span><span class="nx">attrs</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">||</span> <span class="nx">targetObj</span><span class="p">[</span><span class="nx">name</span><span class="p">].</span><span class="nx">_add</span><span class="p">({},</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="nx">silent</span><span class="p">});</span>
155 <span class="nx">process</span><span class="p">(</span><span class="nx">nextObject</span><span class="p">,</span> <span class="nx">modelData</span><span class="p">);</span>
156 <span class="p">});</span>
157 <span class="p">});</span>
158 <span class="p">}</span>
159 <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">models</span><span class="p">)</span> <span class="p">{</span>
160 <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">modelData</span><span class="p">,</span> <span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
161 <span class="nx">process</span><span class="p">(</span><span class="nx">targetObj</span><span class="p">[</span><span class="nx">name</span><span class="p">],</span> <span class="nx">modelData</span><span class="p">);</span>
162 <span class="p">});</span>
163 <span class="p">}</span>
164 <span class="p">}</span>
165 <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>
166 <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
167 <span class="p">},</span>
168 </pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <h3>publishProxy</h3>
169
170<p>Primarily an internal method that just passes publish events up
171through 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>
172 <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>
173 <span class="p">},</span>
174 </pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <h3>publishChange</h3>
175
176<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>
177 <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>
178 <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>
179 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;change&#39;</span><span class="p">,</span>
180 <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>
181 <span class="nx">data</span><span class="o">:</span> <span class="nx">model</span><span class="p">.</span><span class="nx">attributes</span>
182 <span class="p">});</span>
183 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
184 <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>
185 <span class="p">}</span>
186 <span class="p">},</span>
187 </pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h3>publishAdd</h3>
188
189<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>
190 <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>
191 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;add&#39;</span><span class="p">,</span>
192 <span class="nx">data</span><span class="o">:</span> <span class="nx">model</span><span class="p">.</span><span class="nx">xport</span><span class="p">(),</span>
193 <span class="nx">collection</span><span class="o">:</span> <span class="nx">collection</span><span class="p">.</span><span class="nx">id</span>
194 <span class="p">});</span>
195 <span class="p">},</span>
196 </pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <h3>publishRemove</h3>
197
198<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>
199 <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>
200 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;remove&#39;</span><span class="p">,</span>
201 <span class="nx">id</span><span class="o">:</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span>
202 <span class="p">});</span>
203 <span class="p">},</span>
204 </pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <h3>publishMove</h3>
205
206<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>
207 <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>
208 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;move&#39;</span><span class="p">,</span>
209 <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>
210 <span class="nx">id</span><span class="o">:</span> <span class="nx">id</span><span class="p">,</span>
211 <span class="nx">newPosition</span><span class="o">:</span> <span class="nx">newPosition</span>
212 <span class="p">});</span>
213 <span class="p">},</span>
214 </pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <h3>ensureRequired</h3>
215
216<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>
217 <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
218 <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">required</span><span class="p">)</span> <span class="p">{</span>
219 <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">required</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
220 <span class="nx">self</span><span class="p">.</span><span class="nx">checkType</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">key</span><span class="p">),</span> <span class="nx">key</span><span class="p">);</span>
221 <span class="p">});</span>
222 <span class="p">}</span>
223 <span class="p">},</span>
224 </pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <h3>validate</h3>
225
226<p>Convenient default for Backbone's <code>validate</code> convention. It lets you do simple typechecking
227on 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>
228 <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
229 <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">attr</span><span class="p">,</span> <span class="kd">function</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>
230 <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">required</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">required</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
231 <span class="kd">var</span> <span class="nx">type</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">required</span><span class="p">[</span><span class="nx">key</span><span class="p">];</span>
232 <span class="nx">self</span><span class="p">.</span><span class="nx">checkType</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>
233 <span class="p">}</span>
234 <span class="p">});</span>
235 <span class="p">},</span>
236 </pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <h3>checkType</h3>
237
238<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>
239 <span class="kd">var</span> <span class="nx">validator</span><span class="p">;</span>
240 <span class="nx">type</span> <span class="o">=</span> <span class="nx">type</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">();</span>
241 <span class="k">switch</span> <span class="p">(</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
242 <span class="k">case</span> <span class="s1">&#39;string&#39;</span><span class="o">:</span> <span class="nx">validator</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isString</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
243 <span class="k">case</span> <span class="s1">&#39;boolean&#39;</span><span class="o">:</span> <span class="nx">validator</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isBoolean</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
244 <span class="k">case</span> <span class="s1">&#39;date&#39;</span><span class="o">:</span> <span class="nx">validator</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isDate</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
245 <span class="k">case</span> <span class="s1">&#39;array&#39;</span><span class="o">:</span> <span class="nx">validator</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isArray</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
246 <span class="k">case</span> <span class="s1">&#39;number&#39;</span><span class="o">:</span> <span class="nx">validator</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isNumber</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
247 <span class="p">}</span>
248 <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">validator</span><span class="p">(</span><span class="nx">value</span><span class="p">))</span> <span class="p">{</span>
249 <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>
250 <span class="p">}</span>
251 <span class="p">},</span>
252 </pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <h3>setServer</h3>
253
254<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>
255 <span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
256 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;set&#39;</span><span class="p">,</span>
257 <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>
258 <span class="nx">change</span><span class="o">:</span> <span class="nx">attrs</span>
259 <span class="p">});</span>
260 <span class="p">},</span>
261 </pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <h3>unsetServer</h3>
262
263<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>
264 <span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
265 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;unset&#39;</span><span class="p">,</span>
266 <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>
267 <span class="nx">property</span><span class="o">:</span> <span class="nx">property</span>
268 <span class="p">});</span>
269 <span class="p">}</span>
270 <span class="p">});</span>
271
272 </pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <h2>Capsule.Collection</h2> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#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>
273 </pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <h3>register</h3>
274
275<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>
276 <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>
277 <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>
278 <span class="p">},</span>
279 </pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <h3>addServer</h3>
280
281<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>
282 <span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
283 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;add&#39;</span><span class="p">,</span>
284 <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>
285 <span class="nx">data</span><span class="o">:</span> <span class="nx">data</span>
286 <span class="p">});</span>
287 <span class="p">},</span>
288 </pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <h3>moveServer</h3>
289
290<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>
291 <span class="nx">socket</span><span class="p">.</span><span class="nx">send</span><span class="p">({</span>
292 <span class="nx">event</span><span class="o">:</span> <span class="s1">&#39;move&#39;</span><span class="p">,</span>
293 <span class="nx">collection</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span>
294 <span class="nx">id</span><span class="o">:</span> <span class="nx">id</span><span class="p">,</span>
295 <span class="nx">newPosition</span><span class="o">:</span> <span class="nx">newPosition</span>
296 <span class="p">});</span>
297 <span class="p">},</span>
298 </pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <h3>registerRadioProperties</h3>
299
300<p>A convenience for creating <code>radio</code> properties where you can specify an
301Array of properties in a collection and ensure that only model can have that
302property set to <code>true</code>.
303If we're adding stuff we need to make sure the added items don't violate the
304radio property rule if it's already set.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">registerRadioProperties</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
305 <span class="kd">var</span> <span class="nx">collection</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
306 <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">radioProperties</span><span class="p">)</span> <span class="p">{</span>
307 <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">radioProperties</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">property</span><span class="p">)</span> <span class="p">{</span>
308 <span class="nx">collection</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change:&#39;</span> <span class="o">+</span> <span class="nx">property</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">changedModel</span><span class="p">)</span> <span class="p">{</span>
309 <span class="k">if</span> <span class="p">(</span><span class="nx">changedModel</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">property</span><span class="p">))</span> <span class="p">{</span>
310 <span class="nx">collection</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>
311 <span class="kd">var</span> <span class="nx">tempObj</span> <span class="o">=</span> <span class="p">{};</span>
312 <span class="k">if</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">property</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">model</span><span class="p">.</span><span class="nx">cid</span> <span class="o">!==</span> <span class="nx">changedModel</span><span class="p">.</span><span class="nx">cid</span><span class="p">)</span> <span class="p">{</span>
313 <span class="nx">tempObj</span><span class="p">[</span><span class="nx">property</span><span class="p">]</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
314 <span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">tempObj</span><span class="p">);</span>
315 <span class="p">}</span>
316 <span class="p">});</span>
317 <span class="p">}</span>
318 <span class="p">});</span>
319 <span class="nx">collection</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">addedModel</span><span class="p">)</span> <span class="p">{</span>
320 <span class="kd">var</span> <span class="nx">tempObj</span> <span class="o">=</span> <span class="p">{};</span>
321 <span class="k">if</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="kd">function</span> <span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
322 <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">property</span><span class="p">);</span>
323 <span class="p">}).</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
324 <span class="nx">tempObj</span><span class="p">[</span><span class="nx">property</span><span class="p">]</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
325 <span class="nx">addedModel</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">tempObj</span><span class="p">);</span>
326 <span class="p">}</span>
327 <span class="p">});</span>
328 <span class="p">});</span>
329 <span class="p">}</span>
330 <span class="p">},</span>
331 </pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <h3>filterByProperty</h3>
332
333<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>
334 <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>
335 <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>
336 <span class="p">});</span>
337 <span class="p">},</span>
338 </pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <h3>findByProperty</h3>
339
340<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>
341 <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>
342 <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>
343 <span class="p">});</span>
344 <span class="p">},</span>
345 </pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <h3>setAll</h3>
346
347<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>
348 <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>
349 <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>
350 <span class="p">});</span>
351 <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
352 <span class="p">},</span>
353 </pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <h3>moveItem</h3>
354
355<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>
356 <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>
357 <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>
358 <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>
359 <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>
360 <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>
361 <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>
362 <span class="p">}</span>
363 <span class="p">}</span>
364 <span class="p">});</span>
365 </pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">&#182;</a> </div> <h1>Capsule.View</h1>
366
367<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-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">&#182;</a> </div> <h3>handleBindings</h3>
368
369<p>This makes it simple to bind model attributes to the view.
370To use it, add a <code>classBindings</code> and/or a <code>contentBindings</code> attribute
371to your view and call <code>this.handleBindings()</code> at the end of your view's
372<code>render</code> function. It's also used by <code>basicRender</code> which lets you do
373a complete attribute-bound views with just this:</p>
374
375<pre><code>var ProfileView = Capsule.View.extend({
376 template: 'profile',
377 contentBindings: {
378 'name': '.name'
379 },
380 classBindings: {
381 'active': ''
382 },
383 render: function () {
384 this.basicRender();
385 return this;
386 }
387});
388</code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">handleBindings</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
389 <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
390 <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">contentBindings</span><span class="p">)</span> <span class="p">{</span>
391 <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">contentBindings</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
392 <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change:&#39;</span> <span class="o">+</span> <span class="nx">key</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
393 <span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="nx">selector</span><span class="p">)</span> <span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
394 <span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">key</span><span class="p">));</span>
395 <span class="p">});</span>
396 <span class="p">});</span>
397 <span class="p">}</span>
398 <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">classBindings</span><span class="p">)</span> <span class="p">{</span>
399 <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">classBindings</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
400 <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change:&#39;</span> <span class="o">+</span> <span class="nx">key</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
401 <span class="kd">var</span> <span class="nx">newValue</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">key</span><span class="p">),</span>
402 <span class="nx">el</span> <span class="o">=</span> <span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="nx">selector</span><span class="p">)</span> <span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
403 <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isBoolean</span><span class="p">(</span><span class="nx">newValue</span><span class="p">))</span> <span class="p">{</span>
404 <span class="k">if</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">)</span> <span class="p">{</span>
405 <span class="nx">el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
406 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
407 <span class="nx">el</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
408 <span class="p">}</span>
409 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
410 <span class="nx">el</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">previous</span><span class="p">(</span><span class="nx">key</span><span class="p">)).</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">newValue</span><span class="p">);</span>
411 <span class="p">}</span>
412 <span class="p">});</span>
413 <span class="p">});</span>
414 <span class="p">}</span>
415 <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
416 <span class="p">},</span>
417 </pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <h3>desist</h3>
418
419<p>This is method we used to remove/unbind/destroy the view.
420By default we fade it out this seemed like a reasonable default for realtime apps.
421So things to just magically disappear and to give some visual indication that
422it's going away. You can also pass an options hash <code>{quick: true}</code> to remove immediately.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">desist</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">opts</span><span class="p">)</span> <span class="p">{</span>
423 <span class="nx">opts</span> <span class="o">||</span> <span class="p">(</span><span class="nx">opts</span> <span class="o">=</span> <span class="p">{});</span>
424 <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
425 <span class="nx">clearInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">interval</span><span class="p">);</span>
426 <span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">interval</span><span class="p">;</span>
427 <span class="p">}</span>
428 <span class="k">if</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">quick</span><span class="p">)</span> <span class="p">{</span>
429 <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">unbind</span><span class="p">().</span><span class="nx">remove</span><span class="p">();</span>
430 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
431 <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">animate</span><span class="p">({</span>
432 <span class="nx">height</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
433 <span class="nx">opacity</span><span class="o">:</span> <span class="mi">0</span>
434 <span class="p">},</span>
435 <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
436 <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">unbind</span><span class="p">().</span><span class="nx">remove</span><span class="p">();</span>
437 <span class="p">}</span>
438 <span class="p">);</span>
439 <span class="p">}</span>
440 <span class="p">},</span>
441 </pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <h3>addReferences</h3>
442
443<p>This is a shortcut for adding reference to specific elements within your view for
444access later. This is avoids excessive DOM queries and gives makes it easier to update
445your view if your template changes. You could argue whether this is worth doing or not,
446but I like it.
447In your <code>render</code> method. Use it like so:</p>
448
449<pre><code>render: function () {
450 this.basicRender();
451 this.addReferences({
452 pages: '#pages',
453 chat: '#teamChat',
454 nav: 'nav#views ul',
455 me: '#me',
456 cheatSheet: '#cheatSheet',
457 omniBox: '#awesomeSauce'
458 });
459}
460</code></pre>
461
462<p>Then later you can access elements by reference like so: <code>this.$pages</code>, or <code>this.$chat</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addReferences</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span>
463 <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">item</span> <span class="k">in</span> <span class="nx">hash</span><span class="p">)</span> <span class="p">{</span>
464 <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>
465 <span class="p">}</span>
466 <span class="p">},</span>
467 </pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <h3>autoSetInputs</h3>
468
469<p>Convenience for automagically setting all input values on the server
470as-you-type. This is letter-by-letter syncing. You have to be careful with this
471but it's very cool for some use-cases.
472To use, just add a <code>data-type</code> attribute in your html in your template that
473tells us which property the input corresponds to. For example:</p>
474
475<pre><code>&lt;input data-type="title"/&gt;
476</code></pre>
477
478<p>Then if you call <code>this.autoSetInputs()</code> in your <code>render</code> function the values
479will 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>
480 <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>
481 <span class="p">},</span>
482 </pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <h3>genericKeyUp</h3>
483
484<p>This is handy if you want to add any sort of as-you-type syncing
485this 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>
486 <span class="kd">var</span> <span class="nx">res</span> <span class="o">=</span> <span class="p">{},</span>
487 <span class="nx">target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">),</span>
488 <span class="nx">type</span><span class="p">;</span>
489 <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">===</span> <span class="mi">13</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">tagName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">===</span> <span class="s1">&#39;input&#39;</span><span class="p">)</span> <span class="nx">target</span><span class="p">.</span><span class="nx">blur</span><span class="p">();</span>
490 <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>
491 <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>
492 <span class="p">},</span>
493 </pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <h3>basicRender</h3>
494
495<p>All the usual stuff when I render a view. It assumes that the view has a <code>template</code> property
496that is the name of the ICanHaz template. You can also specify the template name by passing
497it an options hash like so: <code>{templateKey: 'profile'}</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">basicRender</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">opts</span><span class="p">)</span> <span class="p">{</span>
498 <span class="nx">opts</span> <span class="o">||</span> <span class="p">(</span><span class="nx">opts</span> <span class="o">=</span> <span class="p">{});</span>
499 <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>
500 <span class="nx">templateKey</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">template</span>
501 <span class="p">});</span>
502 <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>
503 <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>
504 <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>
505 <span class="k">this</span><span class="p">.</span><span class="nx">handleBindings</span><span class="p">();</span>
506 <span class="k">this</span><span class="p">.</span><span class="nx">delegateEvents</span><span class="p">();</span>
507 <span class="p">},</span>
508 </pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <h3>subViewRender</h3>
509
510<p>This is handy for views within collections when you use <code>collectomatic</code>. Just like <code>basicRender</code> it assumes
511that the view either has a <code>template</code> property or that you pass it an options object with the name of the
512<code>templateKey</code> name of the ICanHaz template.
513Additionally, it handles appending or prepending the view to its parent container.
514It takes an options arg where you can optionally specify the <code>templateKey</code> and <code>placement</code> of the element.
515If your collections is stacked newest first, just use <code>{plaement: 'prepend'}</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">subViewRender</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">opts</span><span class="p">)</span> <span class="p">{</span>
516 <span class="nx">opts</span> <span class="o">||</span> <span class="p">(</span><span class="nx">opts</span> <span class="o">=</span> <span class="p">{});</span>
517 <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>
518 <span class="nx">placement</span><span class="o">:</span> <span class="s1">&#39;append&#39;</span><span class="p">,</span>
519 <span class="nx">templateKey</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">template</span>
520 <span class="p">});</span>
521 <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>
522 <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>
523 <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>
524 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
525 <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>
526 <span class="p">}</span>
527 <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>
528 <span class="k">this</span><span class="p">.</span><span class="nx">handleBindings</span><span class="p">();</span>
529 <span class="k">this</span><span class="p">.</span><span class="nx">delegateEvents</span><span class="p">();</span>
530 <span class="p">},</span>
531 </pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#182;</a> </div> <h2>Binding Utilities (thanks to <a href="http://andyet.net/team/nate/">@natevw</a>)</h2>
532
533<h3>bindomatic</h3>
534
535<p>You send it your model, an event (or array of events) and options.
536It will bind the event (or events) and set the proper context for the handler
537so you don't have to bind the handler to the instance.
538It also adds the function to an array of functions to unbind if the view is destroyed.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">bindomatic</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">ev</span><span class="p">,</span> <span class="nx">handler</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
539 <span class="kd">var</span> <span class="nx">boundHandler</span> <span class="o">=</span> <span class="nx">_</span><span class="p">(</span><span class="nx">handler</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
540 <span class="nx">evs</span> <span class="o">=</span> <span class="p">(</span><span class="nx">ev</span> <span class="k">instanceof</span> <span class="nb">Array</span><span class="p">)</span> <span class="o">?</span> <span class="nx">ev</span> <span class="o">:</span> <span class="p">[</span><span class="nx">ev</span><span class="p">];</span>
541 <span class="nx">_</span><span class="p">(</span><span class="nx">evs</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">ev</span><span class="p">)</span> <span class="p">{</span>
542 <span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">ev</span><span class="p">,</span> <span class="nx">boundHandler</span><span class="p">);</span>
543 <span class="p">});</span>
544 <span class="k">if</span> <span class="p">(</span><span class="nx">options</span> <span class="o">&amp;&amp;</span> <span class="nx">options</span><span class="p">.</span><span class="nx">trigger</span><span class="p">)</span> <span class="nx">boundHandler</span><span class="p">();</span>
545 <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="k">this</span><span class="p">.</span><span class="nx">unbindomatic_list</span> <span class="o">||</span> <span class="p">[]).</span><span class="nx">push</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
546 <span class="nx">_</span><span class="p">(</span><span class="nx">evs</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">ev</span><span class="p">)</span> <span class="p">{</span>
547 <span class="nx">model</span><span class="p">.</span><span class="nx">unbind</span><span class="p">(</span><span class="nx">ev</span><span class="p">,</span> <span class="nx">boundHandler</span><span class="p">);</span>
548 <span class="p">});</span>
549 <span class="p">});</span>
550 <span class="p">},</span>
551 </pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">&#182;</a> </div> <h3>unbindomatic</h3>
552
553<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>
554 <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>
555 <span class="nx">unbind</span><span class="p">();</span>
556 <span class="p">});</span>
557 <span class="p">},</span>
558 </pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">&#182;</a> </div> <h3>collectomatic</h3>
559
560<p>Shorthand for rendering collections and their invividual views.
561Just pass it the collection, and the view to use for the items in the
562collection. (anything in the <code>options</code> arg just gets passed through to
563view. Again, props to @natevw for this.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">collectomatic</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">ViewClass</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
564 <span class="kd">var</span> <span class="nx">views</span> <span class="o">=</span> <span class="p">{};</span>
565 <span class="k">this</span><span class="p">.</span><span class="nx">bindomatic</span><span class="p">(</span><span class="nx">collection</span><span class="p">,</span> <span class="s1">&#39;add&#39;</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>
566 <span class="nx">views</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="k">new</span> <span class="nx">ViewClass</span><span class="p">(</span><span class="nx">_</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="nx">extend</span><span class="p">(</span><span class="nx">options</span><span class="p">));</span>
567 <span class="p">});</span>
568 <span class="k">this</span><span class="p">.</span><span class="nx">bindomatic</span><span class="p">(</span><span class="nx">collection</span><span class="p">,</span> <span class="s1">&#39;remove&#39;</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>
569 <span class="nx">views</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">desist</span><span class="p">();</span>
570 <span class="k">delete</span> <span class="nx">views</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">];</span>
571 <span class="p">});</span>
572 <span class="k">this</span><span class="p">.</span><span class="nx">bindomatic</span><span class="p">(</span><span class="nx">collection</span><span class="p">,</span> <span class="s1">&#39;refresh&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
573 <span class="nx">_</span><span class="p">(</span><span class="nx">views</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">view</span><span class="p">)</span> <span class="p">{</span>
574 <span class="nx">view</span><span class="p">.</span><span class="nx">desist</span><span class="p">();</span>
575 <span class="p">});</span>
576 <span class="nx">views</span> <span class="o">=</span> <span class="p">{};</span>
577 <span class="nx">collection</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>
578 <span class="nx">views</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="k">new</span> <span class="nx">ViewClass</span><span class="p">(</span><span class="nx">_</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="nx">extend</span><span class="p">(</span><span class="nx">options</span><span class="p">));</span>
579 <span class="p">});</span>
580 <span class="p">},</span> <span class="p">{</span><span class="nx">trigger</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
581 <span class="k">this</span><span class="p">.</span><span class="nx">bindomatic</span><span class="p">(</span><span class="nx">collection</span><span class="p">,</span> <span class="s1">&#39;move&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
582 <span class="nx">_</span><span class="p">(</span><span class="nx">views</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">view</span><span class="p">)</span> <span class="p">{</span>
583 <span class="nx">view</span><span class="p">.</span><span class="nx">desist</span><span class="p">({</span><span class="nx">quick</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
584 <span class="p">});</span>
585 <span class="nx">views</span> <span class="o">=</span> <span class="p">{};</span>
586 <span class="nx">collection</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>
587 <span class="nx">views</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="k">new</span> <span class="nx">ViewClass</span><span class="p">(</span><span class="nx">_</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="nx">extend</span><span class="p">(</span><span class="nx">options</span><span class="p">));</span>
588 <span class="p">});</span>
589 <span class="p">});</span>
590 <span class="p">}</span>
591 <span class="p">});</span>
592
593<span class="p">})();</span>
594
595</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
\No newline at end of file