diff --git a/demos/search/app.js b/demos/search/app.js index 8e176330..f7e434ea 100644 --- a/demos/search/app.js +++ b/demos/search/app.js @@ -1,41 +1,66 @@ jQuery(function($) { 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; + } - // Crate our Recline Dataset - // Here we are just using the local data + // 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 }); - // Optional - // Let's configure the initial query a bit and set up facets - dataset.queryState.set({ - size: 10 - }, - {silent: true} - ); - 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(); + // Set up the search View + + // We give it a custom template for rendering the example records + var template = ' \ +
\ +

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

\ +

{{description}}

\ +

${{price}}

\ +
\ + '; 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 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); @@ -59,7 +84,9 @@ var SearchView = Backbone.View.extend({ ', render: function() { - var results = Mustache.render(this.templateResults, { + // 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, { @@ -86,24 +113,12 @@ var SearchView = Backbone.View.extend({ }); // -------------------------------------------------------- -// Stuff specific to this demo +// Stuff very specific to this demo -function getTemplate() { - template = ' \ - {{#records}} \ -
\ -

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

\ -

{{description}}

\ -

${{price}}

\ -
\ - {{/records}} \ - '; - return template; -} +function setupMoreComplexExample(config) { +}; -var simpleData = [ +var sampleData = [ { title: 'War and Peace', description: 'The epic tale of love, war and history',