[#180,demos/search][s]: tweak text and refactor js and document it.

demos/search/app.js

@@ -1,37 +1,17 @@
 jQuery(function($) {
-  window.dataExplorer = null;
-  window.explorerDiv = $('.search-here');
+  var $el = $('.search-here');
 
   // var url = 'http://openspending.org/api/search';
   // var url = 'http://localhost:9200/tmp/sfpd-last-month';
+
+  // Crate our Recline Dataset
+  // Here we are just using the local data
   var dataset = new recline.Model.Dataset({
     records: simpleData
   });
-  createSearch(dataset);
-});
-
-var createSearch = function(dataset, state) {
-  // remove existing data explorer view
-  var $el = $('<div />');
-  $el.appendTo(window.explorerDiv);
-  var template = ' \
-    {{#records}} \
-      <div class="record"> \
-        <h3> \
-          {{title}} <em>by {{Author}}</em> \
-        </h3> \
-        <p>{{description}}</p> \
-        <p><code>${{price}}</code></p> \
-      </div> \
-    {{/records}} \
-  ';
-
-  window.dataExplorer = new SearchView({
-    el: $el,
-    model: dataset,
-    template: template 
-  });
 
+  // Optional
+  // Let's configure the initial query a bit and set up facets
   dataset.queryState.set({
       size: 10
     },
@@ -39,13 +19,23 @@ var createSearch = function(dataset, state) {
   );
   dataset.queryState.addFacet('Author');
   dataset.query();
-}
+
+  // The search view allows us to customize the template used to render the
+  // list of results
+  var template = getTemplate();
+  var searchView = new SearchView({
+    el: $el,
+    model: dataset,
+    template: template 
+  });
+  searchView.render();
+});
 
 // Simple Search View
 //
 // Pulls together various Recline UI components and the central Dataset and Query (state) object
 //
-// Plus support for customization e.g. of item template
+// Plus support for customization e.g. of template for list of results
 var SearchView = Backbone.View.extend({
   initialize: function(options) {
     this.el = $(this.el);
@@ -95,6 +85,24 @@ var SearchView = Backbone.View.extend({
   }
 });
 
+// --------------------------------------------------------
+// Stuff specific to this demo
+
+function getTemplate() {
+  template = ' \
+    {{#records}} \
+      <div class="record"> \
+        <h3> \
+          {{title}} <em>by {{Author}}</em> \
+        </h3> \
+        <p>{{description}}</p> \
+        <p><code>${{price}}</code></p> \
+      </div> \
+    {{/records}} \
+  ';
+  return template;
+}
+
 var simpleData = [
   {
     title: 'War and Peace',

demos/search/index.html

@@ -7,7 +7,7 @@ root: ../../
 
 <style type="text/css">
 .info {
-  margin-bottom: 40px;
+  margin-bottom: 10px;
 }
 
 /***************** Search Section ****************/
@@ -80,9 +80,12 @@ ul.facet-items {
 </div>
 
 <div class="info">
-  <p>This demo shows how Recline can be used to build a search app (<a href="app.js">source JS</a>). The default version uses local example data but you can also connect directly to a SOLR or ElasticSearch endpoint for example.</p>
+  <p>This demo shows how Recline can be used to build a search app. It includes faceting as well as seearch. You can find the <a href="app.js">source javascript here</a> &ndash; please feel free to reuse!</p>
+  <p>The default version uses some local example data but you can also connect directly to any other backend supported by Recline, in particular SOLR or ElasticSearch.</p>
 </div>
 
+<hr />
+
 <div class="search-here"></div>
 
 <div style="clear: both;"></div>