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">¶</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">¶</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">¶</a> </div> <p>All public Capsule classes and modules will be attached to the <code>Capsule</code>
|
2 | namespace. Exported for both CommonJS and the browser.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Capsule</span><span class="p">,</span>
|
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">'undefined'</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">'backbone'</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">'underscore'</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">'node-uuid'</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">¶</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">¶</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">¶</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">¶</a> </div> <h3>register</h3>
|
22 |
|
23 | <p>Register ourselves. This means generate a uuid if we're on the server
|
24 | and listen for changes to ID (which you shouldn't really change) this just handles the
|
25 | case where our root model is initted on the client, before it has any data. Once it gets
|
26 | its <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">&&</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">'id'</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">&&</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">'change:id'</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">'change'</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">¶</a> </div> <h3>addChildCollection</h3>
|
40 |
|
41 | <p>We use this to build our nested model structure. This will ensure
|
42 | that <code>publish</code>, <code>add</code>, and <code>remove</code> events will bubble up to our root
|
43 | model.</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">'publish'</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">'remove'</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">'add'</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">'move'</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">¶</a> </div> <h3>addChildModel</h3>
|
52 |
|
53 | <p>Adds a child model and ensures that various publish events will be proxied up
|
54 | and that we store a reference to the parent.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addChildModel</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">label</span><span class="p">,</span> <span class="nx">constructor</span><span class="p">)</span> <span class="p">{</span>
|
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">'publish'</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">¶</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">¶</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">¶</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">¶</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">'delete'</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">¶</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">'method'</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">¶</a> </div> <h3>toTemplate</h3>
|
96 |
|
97 | <p>This is a replacement for simply sending Backbone's <code>toJSON</code> data to the template.
|
98 | Since we're using <a href="http://icanhazjs.com">ICanHaz.js</a> which uses Mustache, using
|
99 | this function lets us send function to the template. Useful for formatting, and other
|
100 | calculated 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">¶</a> </div> <h3>xport</h3>
|
113 |
|
114 | <p>Our serializer. Builds and returns a simple object ready to be JSON stringified
|
115 | By default it recurses through child models/collections unless you pass it <code>{recurse: false}</code>.
|
116 | The 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">'collection'</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="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">'parent'</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="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">¶</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">¶</a> </div> <h3>publishProxy</h3>
|
169 |
|
170 | <p>Primarily an internal method that just passes publish events up
|
171 | through the model structure so those events can bubble.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">publishProxy</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
172 | <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'publish'</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">¶</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">'publish'</span><span class="p">,</span> <span class="p">{</span>
|
179 | <span class="nx">event</span><span class="o">:</span> <span class="s1">'change'</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">'event was not a model'</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">¶</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">'publish'</span><span class="p">,</span> <span class="p">{</span>
|
191 | <span class="nx">event</span><span class="o">:</span> <span class="s1">'add'</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">¶</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">'publish'</span><span class="p">,</span> <span class="p">{</span>
|
200 | <span class="nx">event</span><span class="o">:</span> <span class="s1">'remove'</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">¶</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">'publish'</span><span class="p">,</span> <span class="p">{</span>
|
208 | <span class="nx">event</span><span class="o">:</span> <span class="s1">'move'</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">¶</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">¶</a> </div> <h3>validate</h3>
|
225 |
|
226 | <p>Convenient default for Backbone's <code>validate</code> convention. It lets you do simple typechecking
|
227 | on properties by supplying a <code>required</code> hash with property names and types </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
|
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">&&</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">¶</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">'string'</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">'boolean'</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">'date'</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">'array'</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">'number'</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">"The '"</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s2">"' property of a '"</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">"' must be a '"</span> <span class="o">+</span> <span class="nx">type</span> <span class="o">+</span> <span class="s2">"'. You gave me '"</span> <span class="o">+</span> <span class="nx">value</span> <span class="o">+</span> <span class="s2">"'."</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">¶</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">'set'</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">¶</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">'unset'</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">¶</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">¶</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">¶</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">&&</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">¶</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">'add'</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">¶</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">'move'</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">¶</a> </div> <h3>registerRadioProperties</h3>
|
299 |
|
300 | <p>A convenience for creating <code>radio</code> properties where you can specify an
|
301 | Array of properties in a collection and ensure that only model can have that
|
302 | property set to <code>true</code>.
|
303 | If we're adding stuff we need to make sure the added items don't violate the
|
304 | radio 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">'change:'</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">&&</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">'add'</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">></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">¶</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">¶</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">¶</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">¶</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">'move'</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">¶</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">¶</a> </div> <h3>handleBindings</h3>
|
368 |
|
369 | <p>This makes it simple to bind model attributes to the view.
|
370 | To use it, add a <code>classBindings</code> and/or a <code>contentBindings</code> attribute
|
371 | to 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
|
373 | a 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">'change:'</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">></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">'change:'</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">></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">¶</a> </div> <h3>desist</h3>
|
418 |
|
419 | <p>This is method we used to remove/unbind/destroy the view.
|
420 | By default we fade it out this seemed like a reasonable default for realtime apps.
|
421 | So things to just magically disappear and to give some visual indication that
|
422 | it'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">¶</a> </div> <h3>addReferences</h3>
|
442 |
|
443 | <p>This is a shortcut for adding reference to specific elements within your view for
|
444 | access later. This is avoids excessive DOM queries and gives makes it easier to update
|
445 | your view if your template changes. You could argue whether this is worth doing or not,
|
446 | but I like it.
|
447 | In 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">'$'</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">¶</a> </div> <h3>autoSetInputs</h3>
|
468 |
|
469 | <p>Convenience for automagically setting all input values on the server
|
470 | as-you-type. This is letter-by-letter syncing. You have to be careful with this
|
471 | but it's very cool for some use-cases.
|
472 | To use, just add a <code>data-type</code> attribute in your html in your template that
|
473 | tells us which property the input corresponds to. For example:</p>
|
474 |
|
475 | <pre><code><input data-type="title"/>
|
476 | </code></pre>
|
477 |
|
478 | <p>Then if you call <code>this.autoSetInputs()</code> in your <code>render</code> function the values
|
479 | will be sent to the server as you type.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">autoSetInputs</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
480 | <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">':input'</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'input'</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">¶</a> </div> <h3>genericKeyUp</h3>
|
483 |
|
484 | <p>This is handy if you want to add any sort of as-you-type syncing
|
485 | this is obviously traffic heavy, use wth caution.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">genericKeyUp</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
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">&&</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">'input'</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">'type'</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">¶</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
|
496 | that is the name of the ICanHaz template. You can also specify the template name by passing
|
497 | it 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">¶</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
|
511 | that 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.
|
513 | Additionally, it handles appending or prepending the view to its parent container.
|
514 | It takes an options arg where you can optionally specify the <code>templateKey</code> and <code>placement</code> of the element.
|
515 | If 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">'append'</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">¶</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.
|
536 | It will bind the event (or events) and set the proper context for the handler
|
537 | so you don't have to bind the handler to the instance.
|
538 | It 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">&&</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">¶</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">¶</a> </div> <h3>collectomatic</h3>
|
559 |
|
560 | <p>Shorthand for rendering collections and their invividual views.
|
561 | Just pass it the collection, and the view to use for the items in the
|
562 | collection. (anything in the <code>options</code> arg just gets passed through to
|
563 | view. 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">'add'</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">'remove'</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">'refresh'</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">'move'</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 |