127 lines
3.1 KiB
JavaScript
127 lines
3.1 KiB
JavaScript
jQuery(function($) {
|
|
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
|
|
});
|
|
|
|
// 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();
|
|
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 template for list of results
|
|
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);
|
|
}
|
|
});
|
|
|
|
// --------------------------------------------------------
|
|
// 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',
|
|
description: 'The epic tale of love, war and history',
|
|
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
|
|
},
|
|
{
|
|
title: "Fathers and Sons",
|
|
description: "Another 19th century Russian novel",
|
|
Author: "Turgenev",
|
|
price: 11
|
|
}
|
|
];
|
|
|