60 lines
11 KiB
HTML
60 lines
11 KiB
HTML
<!DOCTYPE html> <html> <head> <title>model.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> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> model.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> <h1>Recline Backbone Models</h1> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span> <span class="o">||</span> <span class="p">{};</span>
|
|
|
|
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</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>A Dataset model</h2>
|
|
|
|
<p>Other than standard list of Backbone methods it has two important attributes:</p>
|
|
|
|
<ul>
|
|
<li>currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)</li>
|
|
<li>docCount: total number of documents in this dataset (obtained on a fetch for this Dataset)</li>
|
|
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Dataset</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>
|
|
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Dataset'</span><span class="p">,</span>
|
|
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">currentDocuments</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span><span class="p">();</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h3>getDocuments</h3>
|
|
|
|
<p>AJAX method with promise API to get rows (documents) from the backend.</p>
|
|
|
|
<p>Resulting DocumentList are used to reset this.currentDocuments and are
|
|
also returned.</p>
|
|
|
|
<p>:param numRows: passed onto backend getDocuments.
|
|
:param start: passed onto backend getDocuments.</p>
|
|
|
|
<p>this does not fit very well with Backbone setup. Backbone really expects you to know the ids of objects your are fetching (which you do in classic RESTful ajax-y world). But this paradigm does not fill well with data set up we have here.
|
|
This also illustrates the limitations of separating the Dataset and the Backend</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getDocuments</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">numRows</span><span class="p">,</span> <span class="nx">start</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
|
<span class="kd">var</span> <span class="nx">backend</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">backends</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">backendConfig</span><span class="p">.</span><span class="nx">type</span><span class="p">];</span>
|
|
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
|
<span class="nx">backend</span><span class="p">.</span><span class="nx">getDocuments</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">numRows</span><span class="p">,</span> <span class="nx">start</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">rows</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">docs</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">rows</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">row</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">_doc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
|
|
<span class="nx">_doc</span><span class="p">.</span><span class="nx">backendConfig</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">backendConfig</span><span class="p">;</span>
|
|
<span class="nx">_doc</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">backend</span><span class="p">;</span>
|
|
<span class="k">return</span> <span class="nx">_doc</span><span class="p">;</span>
|
|
<span class="p">});</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">docs</span><span class="p">);</span>
|
|
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">);</span>
|
|
<span class="p">});</span>
|
|
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">toTemplateJSON</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
|
<span class="nx">data</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">docCount</span><span class="p">;</span>
|
|
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h2>A Document (aka Row)</h2>
|
|
|
|
<p>A single entry or row in the dataset</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</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>
|
|
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Document'</span>
|
|
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</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>
|
|
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'DocumentList'</span><span class="p">,</span>
|
|
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span>
|
|
<span class="p">});</span>
|
|
<span class="p">}(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">));</span>
|
|
|
|
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html> |