[#183,demos/search][s]: improve commenting in search demo js and produced docco'd version.
This commit is contained in:
Rufus Pollock
Daniel Beilinson
parent
da1da60942
commit
3362083db6
@ -1,25 +1,43 @@
|
||||
// (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)!
|
||||
|
||||
|
||||
// ## Our main loop - on document ready
|
||||
jQuery(function($) {
|
||||
var $el = $('.search-here');
|
||||
|
||||
// ### Overview
|
||||
//
|
||||
// We have a slightly more complex setup than is needed to allow for using
|
||||
// this demo with different backends
|
||||
//
|
||||
// There are 2 alternatives: more complex and a simpler one
|
||||
//
|
||||
// If you just want to see how this work skip to the simple case ...
|
||||
|
||||
// ### 1. More complex - use data from a backend configured in query string
|
||||
|
||||
// Check for config from url query string
|
||||
// (this allows us to point to specific data sources backends)
|
||||
var config = recline.View.parseQueryString(decodeURIComponent(window.location.search));
|
||||
if (config.backend) {
|
||||
// If we had it hand off to our more complex example setup
|
||||
setupMoreComplexExample(config);
|
||||
return;
|
||||
}
|
||||
|
||||
// the simple example case
|
||||
// ### 2. The simple example case
|
||||
//
|
||||
// We will just set up from some example local data (at the bottom of thile file)
|
||||
|
||||
// Create our Recline Dataset
|
||||
// We'll just use some sample local data (see end of this file)
|
||||
// #### Create our Recline Dataset from sample local data
|
||||
var dataset = new recline.Model.Dataset({
|
||||
records: sampleData
|
||||
});
|
||||
|
||||
// Set up the search View
|
||||
|
||||
// We give it a custom template for rendering the example records
|
||||
// #### Custom template
|
||||
//
|
||||
// Create a custom template for rendering the records
|
||||
var template = ' \
|
||||
<div class="record"> \
|
||||
<h3> \
|
||||
@ -29,6 +47,8 @@ jQuery(function($) {
|
||||
<p><code>${{price}}</code></p> \
|
||||
</div> \
|
||||
';
|
||||
|
||||
// #### Set up the search View (using custom template)
|
||||
var searchView = new SearchView({
|
||||
el: $el,
|
||||
model: dataset,
|
||||
@ -36,40 +56,48 @@ jQuery(function($) {
|
||||
});
|
||||
searchView.render();
|
||||
|
||||
// Optional - we configure the initial query a bit and set up facets
|
||||
// #### Optional - we configure the initial query a bit and set up facets
|
||||
dataset.queryState.set({
|
||||
size: 10
|
||||
},
|
||||
{silent: true}
|
||||
);
|
||||
dataset.queryState.addFacet('Author');
|
||||
// Now do the first query
|
||||
// After this point the Search View will take over handling queries
|
||||
|
||||
// #### Finally - now do the first query
|
||||
//
|
||||
// After this point the Search View will take over handling queries!
|
||||
dataset.query();
|
||||
});
|
||||
|
||||
|
||||
// Simple Search View
|
||||
// ## Simple Search View
|
||||
//
|
||||
// Pulls together various Recline UI components and the central Dataset and Query (state) object
|
||||
//
|
||||
// Plus support for customization e.g. of template for list of results
|
||||
// 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
|
||||
//
|
||||
// It also provides simple support for customization e.g. of template for list of results
|
||||
//
|
||||
// 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
|
||||
// });
|
||||
var SearchView = Backbone.View.extend({
|
||||
initialize: function(options) {
|
||||
this.el = $(this.el);
|
||||
_.bindAll(this, 'render');
|
||||
this.recordTemplate = options.template || this.defaultTemplate;
|
||||
this.recordTemplate = options.template;
|
||||
// Every time we do a search the recline.Dataset.records Backbone
|
||||
// collection will get reset. We want to re-render each time!
|
||||
this.model.records.bind('reset', this.render);
|
||||
this.templateResults = options.template;
|
||||
},
|
||||
|
||||
// overall template for this view
|
||||
template: ' \
|
||||
<div class="controls"> \
|
||||
<div class="query-here"></div> \
|
||||
@ -84,6 +112,7 @@ var SearchView = Backbone.View.extend({
|
||||
<div class="pager-here"></div> \
|
||||
',
|
||||
|
||||
// render the view
|
||||
render: function() {
|
||||
var results = '';
|
||||
if (_.isFunction(this.templateResults)) {
|
||||
@ -100,8 +129,13 @@ var SearchView = Backbone.View.extend({
|
||||
});
|
||||
this.el.html(html);
|
||||
|
||||
// Set the total records found info
|
||||
this.el.find('.total span').text(this.model.recordCount);
|
||||
|
||||
// ### Now setup all the extra mini-widgets
|
||||
//
|
||||
// Facets, Pager, QueryEditor etc
|
||||
|
||||
var view = new recline.View.FacetViewer({
|
||||
model: this.model
|
||||
});
|
||||
@ -121,8 +155,14 @@ var SearchView = Backbone.View.extend({
|
||||
});
|
||||
|
||||
// --------------------------------------------------------
|
||||
// Stuff very specific to this demo
|
||||
// ## Custom code very specific to this demo
|
||||
|
||||
// e.g. to provide custom templates for the google doc and openspending examples
|
||||
|
||||
|
||||
// ### Handle case where we get data from a specific backend
|
||||
//
|
||||
// Includes providing custom templates
|
||||
function setupMoreComplexExample(config) {
|
||||
var $el = $('.search-here');
|
||||
var dataset = new recline.Model.Dataset(config);
|
||||
|
||||
@ -85,7 +85,7 @@ ul.facet-items {
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>This demo shows how Recline can be used to build a search app. It includes faceting as well as search. You can find the <a href="demo.search.app.js">source javascript here</a> – please feel free to reuse!</p>
|
||||
<p>This demo shows how Recline can be used to build a search app. It includes faceting as well as search. You can find the <a href="demo.search.app.js">source javascript here</a> (plus <a href="{{page.root}}/docs/src/demo.search.app.html">prettified version of source for readability</a>) – please feel free to reuse!</p>
|
||||
<p>The default setup uses local example data but you can also connect directly to any other <a href="{{page.root}}/docs/backends.html">backend supported by Recline</a>, for example SOLR, ElasticSearch or even a google docs spreadsheet. As an example: here's an <a href="?backend=solr&url=http://openspending.org/api/search">example running against the SOLR-style OpenSpending API</a> and here's an example <a href="?backend=gdocs&url=https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdExXSTl2Y01xZEszOTBFZjVzcGtzVVE">running against a GDocs spreadsheet (Oil spills in the Niger Delta)</a>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
236
docs/src/demo.search.app.html
Normal file
236
docs/src/demo.search.app.html
Normal file
@ -0,0 +1,236 @@
|
||||
<!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">¶</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">¶</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">'.search-here'</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>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">¶</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">¶</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">¶</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">¶</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">¶</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">¶</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">' \</span>
|
||||
<span class="s1"> <div class="record"> \</span>
|
||||
<span class="s1"> <h3> \</span>
|
||||
<span class="s1"> {{title}} <em>by {{Author}}</em> \</span>
|
||||
<span class="s1"> </h3> \</span>
|
||||
<span class="s1"> <p>{{description}}</p> \</span>
|
||||
<span class="s1"> <p><code>${{price}}</code></p> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</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">¶</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">¶</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">'Author'</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">¶</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">¶</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">'render'</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">¶</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">'reset'</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">¶</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">' \</span>
|
||||
<span class="s1"> <div class="controls"> \</span>
|
||||
<span class="s1"> <div class="query-here"></div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="total"><h2><span></span> records found</h2></div> \</span>
|
||||
<span class="s1"> <div class="body"> \</span>
|
||||
<span class="s1"> <div class="sidebar"></div> \</span>
|
||||
<span class="s1"> <div class="results"> \</span>
|
||||
<span class="s1"> {{{results}}} \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="pager-here"></div> \</span>
|
||||
<span class="s1"> '</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">¶</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">''</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">'\n'</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">¶</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">'{{#records}}'</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">'{{/records}}'</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">¶</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">'.total span'</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">¶</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">'.sidebar'</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">'.pager-here'</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">'.query-here'</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">¶</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">¶</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">¶</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">'.search-here'</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">¶</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">'url'</span><span class="p">)]</span> <span class="o">||</span> <span class="nx">templates</span><span class="p">[</span><span class="s1">'generic'</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">'url'</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">¶</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">'cause'</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">¶</a> </div> <p>generic template function</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s1">'generic'</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">'<div class="record"> \</span>
|
||||
<span class="s1"> <ul> \</span>
|
||||
<span class="s1"> {{#data}} \</span>
|
||||
<span class="s1"> <li>{{key}}: {{value}}</li> \</span>
|
||||
<span class="s1"> {{/data}} \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</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">'http://openspending.org/api/search'</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">'time'</span><span class="p">]</span> <span class="o">=</span> <span class="nx">record</span><span class="p">[</span><span class="s1">'time.label_facet'</span><span class="p">]</span>
|
||||
<span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="s1">'<div class="record"> \</span>
|
||||
<span class="s1"> <h3> \</span>
|
||||
<span class="s1"> <a href="http://openspending.org/{{record.dataset}}/entries/{{record.id}}">{{record.dataset}} {{record.time}}</a> \</span>
|
||||
<span class="s1"> &ndash; <img src="http://openspending.org/static/img/icons/cd_16x16.png" /> {{amount_formatted}} \</span>
|
||||
<span class="s1"> </h3> \</span>
|
||||
<span class="s1"> <ul> \</span>
|
||||
<span class="s1"> {{#data}} \</span>
|
||||
<span class="s1"> <li>{{key}}: {{value}}</li> \</span>
|
||||
<span class="s1"> {{/data}} \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</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">'_id'</span> <span class="o">&&</span> <span class="nx">key</span> <span class="o">!=</span> <span class="s1">'id'</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">'amount'</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">'https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdExXSTl2Y01xZEszOTBFZjVzcGtzVVE'</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">'<div class="record"> \</span>
|
||||
<span class="s1"> <h3> \</span>
|
||||
<span class="s1"> {{record.incidentsite}} &ndash; {{record.datereported}} &ndash; {{record.estimatedspillvolumebbl}} barrels \</span>
|
||||
<span class="s1"> </h3> \</span>
|
||||
<span class="s1"> <ul> \</span>
|
||||
<span class="s1"> {{#data}} \</span>
|
||||
<span class="s1"> <li>{{key}}: {{value}}</li> \</span>
|
||||
<span class="s1"> {{/data}} \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</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">'War and Peace'</span><span class="p">,</span>
|
||||
<span class="nx">description</span><span class="o">:</span> <span class="s1">'The epic tale of love, war and history'</span><span class="p">,</span>
|
||||
<span class="nx">Author</span><span class="o">:</span> <span class="s1">'Tolstoy'</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">'Anna Karenina'</span><span class="p">,</span>
|
||||
<span class="nx">description</span><span class="o">:</span> <span class="s1">'How things go wrong in love and ultimately lead to suicide. This is why you should not have affairs, girls!'</span><span class="p">,</span>
|
||||
<span class="nx">Author</span><span class="o">:</span> <span class="s1">'Tolstoy'</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">"Fathers and Sons"</span><span class="p">,</span>
|
||||
<span class="nx">description</span><span class="o">:</span> <span class="s2">"Another 19th century Russian novel"</span><span class="p">,</span>
|
||||
<span class="nx">Author</span><span class="o">:</span> <span class="s2">"Turgenev"</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">></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">'bn'</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">></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">'m'</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">></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">'k'</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>
|
||||
Loading…
x
Reference in New Issue
Block a user