[demos/search][m]: basic working search demo (more work needed!).

demos/search/app.js

@@ -0,0 +1,111 @@
+jQuery(function($) {
+  window.dataExplorer = null;
+  window.explorerDiv = $('.search-here');
+
+  // var url = 'http://openspending.org/api/search';
+  // var url = 'http://localhost:9200/tmp/sfpd-last-month';
+  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}} \
+        </h3> \
+        <p>{{description}} \
+      </div> \
+    {{/records}} \
+  ';
+
+  window.dataExplorer = new SearchView({
+    el: $el,
+    model: dataset,
+    template: template 
+  });
+
+  dataset.queryState.set({
+      size: 10
+    },
+    {silent: true}
+  );
+  dataset.queryState.addFacet('author');
+  dataset.query();
+}
+
+// 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
+var SearchView = Backbone.View.extend({
+  initialize: function(options) {
+    this.el = $(this.el);
+    _.bindAll(this, 'render');
+    this.recordTemplate = options.template || this.defaultTemplate;
+    this.model.records.bind('reset', this.render);
+    this.templateResults = options.template;
+  },
+
+  template: ' \
+    <div class="controls"> \
+      <div class="query-here"></div> \
+    </div> \
+    <div class="body"> \
+      <div class="sidebar"></div> \
+      <div class="results"> \
+        {{{results}}} \
+      </div> \
+    </div> \
+    <div class="pager-here"></div> \
+  ',
+
+  render: function() {
+    var results = Mustache.render(this.templateResults, {
+      records: this.model.records.toJSON()
+    });
+    var html = Mustache.render(this.template, {
+      results: results
+    });
+    this.el.html(html);
+
+    var view = new recline.View.FacetViewer({
+      model: this.model
+    });
+    view.render();
+    this.el.find('.sidebar').append(view.el);
+
+    var pager = new recline.View.Pager({
+      model: this.model.queryState
+    });
+    this.el.find('.pager-here').append(pager.el);
+
+    var queryEditor = new recline.View.QueryEditor({
+      model: this.model.queryState
+    });
+    this.el.find('.query-here').append(queryEditor.el);
+  }
+});
+
+var simpleData = [
+  {
+    title: 'War and Peace',
+    description: 'The epic tale ...',
+    author: 'Tolstoy',
+    price: 7.99
+  },
+  {
+    title: 'Anna Karenina',
+    description: 'How things go wrong in love and ultimately lead to suicide. This is why you should not have affairs, girls!',
+    author: 'Tolstoy',
+    price: 8.50
+  }
+];
+

demos/search/index.html

@@ -0,0 +1,82 @@
+---
+layout: container
+title: Demos - Search
+recline-deps: true
+root: ../../
+---
+
+<style type="text/css">
+.info {
+  margin-bottom: 40px;
+}
+
+/***************** Search Section ****************/
+.record {
+  border-bottom: #eee 1px solid;
+  padding: 5px;
+}
+
+.controls .query-here {
+  width: 500px;
+  margin: auto;
+}
+
+.controls .query-here .text-query input {
+  width: 400px;
+  /* fix offset bug ...*/
+  margin-left: -4px;
+}
+
+.pager-here {
+  width: 200px;
+  margin: auto;
+}
+
+.recline-pager {
+  float: left;
+  margin: auto;
+  display: block;
+  margin-left: 20px;
+}
+
+.recline-pager .pagination input {
+  width: 30px;
+  height: 18px;
+  padding: 2px 4px;
+  margin: 0;
+  margin-top: -4px;
+}
+
+.recline-pager .pagination a {
+  line-height: 26px;
+  padding: 0 6px;
+}
+
+.body {
+  clear: both;
+}
+
+.results {
+  margin-right: 300px;
+}
+
+.sidebar {
+  width: 250px;
+  float: right;
+}
+</style>
+
+<div class="page-header">
+  <h1>Recline Search Demo</h1>
+</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>
+</div>
+
+<div class="search-here"></div>
+
+<div style="clear: both;"></div>
+
+<script type="text/javascript" src="app.js"></script>
+