knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[demos][s]: simplify multiview demo.

Browse Source
This commit is contained in:
Rufus Pollock
2014-08-16 17:02:51 +01:00
parent 7757e563ee
commit b71229ba36
1 changed files with 61 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
demos/multiview/app.js
View File

@@ -1,33 +1,28 @@
jQuery(function($) { jQuery(function($) {
window.dataExplorer = null; window.multiView = null;
window.explorerDiv = $('.data-explorer-here'); window.explorerDiv = $('.data-explorer-here');
// This is some fancy stuff to allow configuring the multiview from // create the demo dataset
// parameters in the query string var dataset = createDemoDataset();
// // now create the multiview
// For more on state see the view documentation. // this is rather more elaborate than the minimum as we configure the
var state = recline.View.parseQueryString(decodeURIComponent(window.location.search)); // MultiView in various ways (see function below)
if (state) { window.multiview = createMultiView(dataset);
_.each(state, function(value, key) {
try { // last, we'll demonstrate binding to changes in the dataset
value = JSON.parse(value); // this will print out a summary of each change onto the page in the
} catch(e) {} // changelog section
state[key] = value; dataset.records.bind('all', function(name, obj) {
var $info = $('<div />');
$info.html(name + ': ' + JSON.stringify(obj.toJSON()));
$('.changelog').append($info);
$('.changelog').show();
}); });
} else { });
state.url = 'demo';
} // create standard demo dataset
var dataset = null; function createDemoDataset() {
if (state.dataset || state.url) { var dataset = new recline.Model.Dataset({
var datasetInfo = _.extend({
url: state.url,
backend: state.backend
},
state.dataset
);
dataset = new recline.Model.Dataset(datasetInfo);
} else {
dataset = new recline.Model.Dataset({
records: [ records: [
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40}, {id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
{id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', title: 'second', lat:54.97, lon:-1.60}, {id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', title: 'second', lat:54.97, lon:-1.60},
@@ -50,24 +45,25 @@ jQuery(function($) {
{id: 'lon'} {id: 'lon'}
] ]
}); });
return dataset;
} }
createExplorer(dataset, state);
});
// make MultivView
// make Explorer creation / initialization in a function so we can call it //
// again and again // creation / initialization in a function so we can call it again and again
var createExplorer = function(dataset, state) { var createMultiView = function(dataset, state) {
// remove existing data explorer view // remove existing multiview if present
var reload = false; var reload = false;
if (window.dataExplorer) { if (window.multiView) {
window.dataExplorer.remove(); window.multiView.remove();
window.multiView = null;
reload = true; reload = true;
} }
window.dataExplorer = null;
var $el = $('<div />'); var $el = $('<div />');
$el.appendTo(window.explorerDiv); $el.appendTo(window.explorerDiv);
// customize the subviews for the MultiView
var views = [ var views = [
{ {
id: 'grid', id: 'grid',
@@ -110,11 +106,12 @@ var createExplorer = function(dataset, state) {
} }
]; ];
window.dataExplorer = new recline.View.MultiView({ var multiView = new recline.View.MultiView({
model: dataset, model: dataset,
el: $el, el: $el,
state: state, state: state,
views: views views: views
}); });
return multiView;
} }