knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
datahub/docs/src/demo.search.app.html

236 lines
40 KiB
HTML
Raw Blame History

<!DOCTYPE html> <html> <head> <title>demo.search.app.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> demo.search.app.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <p>(c) Open Knowledge Foundation 2012. Dedicated to the public domain. Please
use and reuse freely - you don't even need to credit (though a link back to
ReclineJS.com is always appreciated)!</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>Our main loop - on document ready</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">jQuery</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.search-here&#39;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h3>Overview</h3>
<p>We have a slightly more complex setup than is needed to allow for using
this demo with different backends</p>
<p>There are 2 alternatives: more complex and a simpler one</p>
<p>If you just want to see how this work skip to the simple case ...</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <h3>1. More complex - use data from a backend configured in query string</h3> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>Check for config from url query string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">parseQueryString</span><span class="p">(</span><span class="nb">decodeURIComponent</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">search</span><span class="p">));</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">backend</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>If we had it hand off to our more complex example setup</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setupMoreComplexExample</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <h3>2. The simple example case</h3>
<p>We will just set up from some example local data (at the bottom of thile file)</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <h4>Create our Recline Dataset from sample local data</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">dataset</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">Dataset</span><span class="p">({</span>
<span class="nx">records</span><span class="o">:</span> <span class="nx">sampleData</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <h4>Custom template</h4>
<p>Create a custom template for rendering the records</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;record&quot;&gt; \</span>
<span class="s1"> &lt;h3&gt; \</span>
<span class="s1"> {{title}} &lt;em&gt;by {{Author}}&lt;/em&gt; \</span>
<span class="s1"> &lt;/h3&gt; \</span>
<span class="s1"> &lt;p&gt;{{description}}&lt;/p&gt; \</span>
<span class="s1"> &lt;p&gt;&lt;code&gt;${{price}}&lt;/code&gt;&lt;/p&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <h4>Set up the search View (using custom template)</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">searchView</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span>
<span class="nx">el</span><span class="o">:</span> <span class="nx">$el</span><span class="p">,</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">,</span>
<span class="nx">template</span><span class="o">:</span> <span class="nx">template</span>
<span class="p">});</span>
<span class="nx">searchView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <h4>Optional - we configure the initial query a bit and set up facets</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dataset</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span>
<span class="nx">size</span><span class="o">:</span> <span class="mi">10</span>
<span class="p">},</span>
<span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">}</span>
<span class="p">);</span>
<span class="nx">dataset</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFacet</span><span class="p">(</span><span class="s1">&#39;Author&#39;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <h4>Finally - now do the first query</h4>
<p>After this point the Search View will take over handling queries!</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dataset</span><span class="p">.</span><span class="nx">query</span><span class="p">();</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <h2>Simple Search View</h2>
<p>This is a simple bespoke Backbone view for the Search. It Pulls together
various Recline UI components and the central Dataset and Query (state)
object</p>
<p>It also provides simple support for customization e.g. of template for list of results</p>
<pre><code> var view = new SearchView({
el: $('some-element'),
model: dataset
// EITHER a mustache template (passed a JSON version of recline.Model.Record
// OR a function which receives a record in JSON form and returns html
template: mustache-template-or-function
});
</code></pre> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">SearchView</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>
<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">el</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">el</span><span class="p">);</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recordTemplate</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">template</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>Every time we do a search the recline.Dataset.records Backbone
collection will get reset. We want to re-render each time!</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;reset&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">templateResults</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">template</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>overall template for this view</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;controls&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;query-here&quot;&gt;&lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;total&quot;&gt;&lt;h2&gt;&lt;span&gt;&lt;/span&gt; records found&lt;/h2&gt;&lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;body&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;sidebar&quot;&gt;&lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;results&quot;&gt; \</span>
<span class="s1"> {{{results}}} \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;pager-here&quot;&gt;&lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
</pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>render the view</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</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">results</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">templateResults</span><span class="p">))</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</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">records</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span> <span class="k">this</span><span class="p">.</span><span class="nx">templateResults</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;\n&#39;</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>templateResults is just for one result ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">tmpl</span> <span class="o">=</span> <span class="s1">&#39;{{#records}}&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">templateResults</span> <span class="o">+</span> <span class="s1">&#39;{{/records}}&#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">tmpl</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">records</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">results</span><span class="o">:</span> <span class="nx">results</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">html</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Set the total records found info</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.total span&#39;</span><span class="p">).</span><span class="nx">text</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">recordCount</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <h3>Now setup all the extra mini-widgets</h3>
<p>Facets, Pager, QueryEditor etc</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">FacetViewer</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">model</span>
<span class="p">});</span>
<span class="nx">view</span><span class="p">.</span><span class="nx">render</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">find</span><span class="p">(</span><span class="s1">&#39;.sidebar&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">pager</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">Pager</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">model</span><span class="p">.</span><span class="nx">queryState</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">find</span><span class="p">(</span><span class="s1">&#39;.pager-here&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">pager</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">queryEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">QueryEditor</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">model</span><span class="p">.</span><span class="nx">queryState</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">find</span><span class="p">(</span><span class="s1">&#39;.query-here&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">queryEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <hr />
<h2>Custom code very specific to this demo</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>e.g. to provide custom templates for the google doc and openspending examples</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <h3>Handle case where we get data from a specific backend</h3>
<p>Includes providing custom templates</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">setupMoreComplexExample</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.search-here&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">dataset</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">Dataset</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>async as may be fetching remote</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dataset</span><span class="p">.</span><span class="nx">fetch</span><span class="p">().</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">templates</span><span class="p">[</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;url&#39;</span><span class="p">)]</span> <span class="o">||</span> <span class="nx">templates</span><span class="p">[</span><span class="s1">&#39;generic&#39;</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">searchView</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span>
<span class="nx">el</span><span class="o">:</span> <span class="nx">$el</span><span class="p">,</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">,</span>
<span class="nx">template</span><span class="o">:</span> <span class="nx">template</span>
<span class="p">});</span>
<span class="nx">searchView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="nx">dataset</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span>
<span class="nx">size</span><span class="o">:</span> <span class="mi">5</span>
<span class="p">},</span>
<span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">}</span>
<span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;url&#39;</span><span class="p">)</span> <span class="k">in</span> <span class="nx">templates</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>for gdocs example</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dataset</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFacet</span><span class="p">(</span><span class="s1">&#39;cause&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">dataset</span><span class="p">.</span><span class="nx">query</span><span class="p">();</span>
<span class="p">});</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">templates</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>generic template function</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s1">&#39;generic&#39;</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="s1">&#39;&lt;div class=&quot;record&quot;&gt; \</span>
<span class="s1"> &lt;ul&gt; \</span>
<span class="s1"> {{#data}} \</span>
<span class="s1"> &lt;li&gt;{{key}}: {{value}}&lt;/li&gt; \</span>
<span class="s1"> {{/data}} \</span>
<span class="s1"> &lt;/ul&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">data</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">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">record</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">key</span><span class="o">:</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">record</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="p">};</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">template</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">data</span><span class="o">:</span> <span class="nx">data</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="s1">&#39;http://openspending.org/api/search&#39;</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">record</span><span class="p">[</span><span class="s1">&#39;time&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">record</span><span class="p">[</span><span class="s1">&#39;time.label_facet&#39;</span><span class="p">]</span>
<span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="s1">&#39;&lt;div class=&quot;record&quot;&gt; \</span>
<span class="s1"> &lt;h3&gt; \</span>
<span class="s1"> &lt;a href=&quot;http://openspending.org/{{record.dataset}}/entries/{{record.id}}&quot;&gt;{{record.dataset}} {{record.time}}&lt;/a&gt; \</span>
<span class="s1"> &amp;ndash; &lt;img src=&quot;http://openspending.org/static/img/icons/cd_16x16.png&quot; /&gt; {{amount_formatted}} \</span>
<span class="s1"> &lt;/h3&gt; \</span>
<span class="s1"> &lt;ul&gt; \</span>
<span class="s1"> {{#data}} \</span>
<span class="s1"> &lt;li&gt;{{key}}: {{value}}&lt;/li&gt; \</span>
<span class="s1"> {{/data}} \</span>
<span class="s1"> &lt;/ul&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">record</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">key</span> <span class="o">!=</span><span class="s1">&#39;_id&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">key</span> <span class="o">!=</span> <span class="s1">&#39;id&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">data</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">key</span><span class="o">:</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">record</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">template</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">record</span><span class="o">:</span> <span class="nx">record</span><span class="p">,</span>
<span class="nx">amount_formatted</span><span class="o">:</span> <span class="nx">formatAmount</span><span class="p">(</span><span class="nx">record</span><span class="p">[</span><span class="s1">&#39;amount&#39;</span><span class="p">]),</span>
<span class="nx">data</span><span class="o">:</span> <span class="nx">data</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="s1">&#39;https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdExXSTl2Y01xZEszOTBFZjVzcGtzVVE&#39;</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="s1">&#39;&lt;div class=&quot;record&quot;&gt; \</span>
<span class="s1"> &lt;h3&gt; \</span>
<span class="s1"> {{record.incidentsite}} &amp;ndash; {{record.datereported}} &amp;ndash; {{record.estimatedspillvolumebbl}} barrels \</span>
<span class="s1"> &lt;/h3&gt; \</span>
<span class="s1"> &lt;ul&gt; \</span>
<span class="s1"> {{#data}} \</span>
<span class="s1"> &lt;li&gt;{{key}}: {{value}}&lt;/li&gt; \</span>
<span class="s1"> {{/data}} \</span>
<span class="s1"> &lt;/ul&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">record</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">data</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">key</span><span class="o">:</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">record</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="p">});</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">template</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">record</span><span class="o">:</span> <span class="nx">record</span><span class="p">,</span>
<span class="nx">data</span><span class="o">:</span> <span class="nx">data</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">sampleData</span> <span class="o">=</span> <span class="p">[</span>
<span class="p">{</span>
<span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;War and Peace&#39;</span><span class="p">,</span>
<span class="nx">description</span><span class="o">:</span> <span class="s1">&#39;The epic tale of love, war and history&#39;</span><span class="p">,</span>
<span class="nx">Author</span><span class="o">:</span> <span class="s1">&#39;Tolstoy&#39;</span><span class="p">,</span>
<span class="nx">price</span><span class="o">:</span> <span class="mf">7.99</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Anna Karenina&#39;</span><span class="p">,</span>
<span class="nx">description</span><span class="o">:</span> <span class="s1">&#39;How things go wrong in love and ultimately lead to suicide. This is why you should not have affairs, girls!&#39;</span><span class="p">,</span>
<span class="nx">Author</span><span class="o">:</span> <span class="s1">&#39;Tolstoy&#39;</span><span class="p">,</span>
<span class="nx">price</span><span class="o">:</span> <span class="mf">8.50</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="nx">title</span><span class="o">:</span> <span class="s2">&quot;Fathers and Sons&quot;</span><span class="p">,</span>
<span class="nx">description</span><span class="o">:</span> <span class="s2">&quot;Another 19th century Russian novel&quot;</span><span class="p">,</span>
<span class="nx">Author</span><span class="o">:</span> <span class="s2">&quot;Turgenev&quot;</span><span class="p">,</span>
<span class="nx">price</span><span class="o">:</span> <span class="mi">11</span>
<span class="p">}</span>
<span class="p">];</span>
<span class="kd">var</span> <span class="nx">formatAmount</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">num</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">billion</span> <span class="o">=</span> <span class="mi">1000000000</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">million</span> <span class="o">=</span> <span class="mi">1000000</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">thousand</span> <span class="o">=</span> <span class="mi">1000</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">numabs</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">numabs</span> <span class="o">&gt;</span> <span class="nx">billion</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">num</span> <span class="o">/</span> <span class="nx">billion</span><span class="p">).</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;bn&#39;</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">numabs</span> <span class="o">&gt;</span> <span class="p">(</span><span class="nx">million</span> <span class="o">/</span> <span class="mi">2</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">num</span> <span class="o">/</span> <span class="nx">million</span><span class="p">).</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;m&#39;</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">numabs</span> <span class="o">&gt;</span> <span class="nx">thousand</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">num</span> <span class="o">/</span> <span class="nx">thousand</span><span class="p">).</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;k&#39;</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">num</span><span class="p">.</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
Reference in New Issue View Git Blame Copy Permalink