diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html index 718b3197..2316cee3 100644 --- a/_includes/recline-deps.html +++ b/_includes/recline-deps.html @@ -21,8 +21,8 @@ - - + + @@ -50,6 +50,7 @@ + diff --git a/demos/search/app.js b/demos/search/app.js index 1a9929ea..343bbb6b 100644 --- a/demos/search/app.js +++ b/demos/search/app.js @@ -1,51 +1,66 @@ 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'; + // 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) { + setupMoreComplexExample(config); + return; + } + + // the simple example case + + // Create our Recline Dataset + // We'll just use some sample local data (see end of this file) var dataset = new recline.Model.Dataset({ - records: simpleData + records: sampleData }); - createSearch(dataset); -}); -var createSearch = function(dataset, state) { - // remove existing data explorer view - var $el = $('
'); - $el.appendTo(window.explorerDiv); + // Set up the search View + + // We give it a custom template for rendering the example records var template = ' \ - {{#records}} \ -
\ -

\ - {{title}} by {{Author}} \ -

\ -

{{description}}

\ -

${{price}}

\ -
\ - {{/records}} \ +
\ +

\ + {{title}} by {{Author}} \ +

\ +

{{description}}

\ +

${{price}}

\ +
\ '; - - window.dataExplorer = new SearchView({ + var searchView = new SearchView({ el: $el, model: dataset, template: template }); + searchView.render(); + // 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 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 +// Plus support for customization e.g. of template for list of results +// +// +// var view = new SearchView({ +// el: $('some-element'), +// model: dataset +// template: mustache-template-or-function +// }); var SearchView = Backbone.View.extend({ initialize: function(options) { this.el = $(this.el); @@ -67,11 +82,18 @@ var SearchView = Backbone.View.extend({
\
\ ', - + render: function() { - var results = Mustache.render(this.templateResults, { - records: this.model.records.toJSON() - }); + var results = ''; + if (_.isFunction(this.templateResults)) { + var results = _.map(this.model.records.toJSON(), this.templateResults).join('\n'); + } else { + // templateResults is just for one result ... + var tmpl = '{{#records}}' + this.templateResults + '{{/records}}'; + var results = Mustache.render(tmpl, { + records: this.model.records.toJSON() + }); + } var html = Mustache.render(this.template, { results: results }); @@ -95,7 +117,80 @@ var SearchView = Backbone.View.extend({ } }); -var simpleData = [ +// -------------------------------------------------------- +// Stuff very specific to this demo + +function setupMoreComplexExample(config) { + var $el = $('.search-here'); + var dataset = new recline.Model.Dataset(config); + // async as may be fetching remote + dataset.fetch().done(function() { + if (dataset.get('url').indexOf('openspending') === -1) { + // generic template function + var template = function(record) { + var template = '
\ +
\ + '; + var data = _.map(_.keys(record), function(key) { + return { key: key, value: record[key] }; + }); + return Mustache.render(template, { + data: data + }); + } + } else { + // generic template function + var template = function(record) { + record['time'] = record['time.label_facet'] + var template = '
\ +

\ + {{record.dataset}} {{record.time}} \ + – {{amount_formatted}} \ +

\ +
\ + '; + var data = []; + _.each(_.keys(record), function(key) { + if (key !='_id' && key != 'id') { + data.push({ key: key, value: record[key] }); + } + }); + return Mustache.render(template, { + record: record, + amount_formatted: formatAmount(record['amount']), + data: data + }); + } + } + + var searchView = new SearchView({ + el: $el, + model: dataset, + template: template + }); + searchView.render(); + + dataset.queryState.set({ + size: 10 + }, + {silent: true} + ); + if (dataset.get('url').indexOf('openspending') != -1) { + dataset.queryState.addFacet('dataset'); + } + dataset.query(); + }); +}; + +var sampleData = [ { title: 'War and Peace', description: 'The epic tale of love, war and history', @@ -116,3 +211,20 @@ var simpleData = [ } ]; +var formatAmount = function (num) { + var billion = 1000000000; + var million = 1000000; + var thousand = 1000; + var numabs = Math.abs(num); + if (numabs > billion) { + return (num / billion).toFixed(0) + 'bn'; + } + if (numabs > (million / 2)) { + return (num / million).toFixed(0) + 'm'; + } + if (numabs > thousand) { + return (num / thousand).toFixed(0) + 'k'; + } else { + return num.toFixed(0); + } +}; diff --git a/demos/search/index.html b/demos/search/index.html index e7fc1138..aa94911c 100644 --- a/demos/search/index.html +++ b/demos/search/index.html @@ -7,7 +7,7 @@ root: ../../