diff --git a/demos/multiview/app.js b/demos/multiview/app.js index 2a5a1453..806c9a96 100755 --- a/demos/multiview/app.js +++ b/demos/multiview/app.js @@ -1,73 +1,69 @@ jQuery(function($) { - window.dataExplorer = null; + window.multiView = null; window.explorerDiv = $('.data-explorer-here'); - // This is some fancy stuff to allow configuring the multiview from - // parameters in the query string - // - // For more on state see the view documentation. - var state = recline.View.parseQueryString(decodeURIComponent(window.location.search)); - if (state) { - _.each(state, function(value, key) { - try { - value = JSON.parse(value); - } catch(e) {} - state[key] = value; - }); - } else { - state.url = 'demo'; - } - var dataset = null; - if (state.dataset || state.url) { - var datasetInfo = _.extend({ - url: state.url, - backend: state.backend - }, - state.dataset - ); - dataset = new recline.Model.Dataset(datasetInfo); - } else { - dataset = new recline.Model.Dataset({ - records: [ - {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: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', title: 'third', lat:40.00, lon:-75.5}, - {id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', title: 'fourth', lat:57.27, lon:-6.20}, - {id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', title: 'fifth', lat:51.58, lon:0}, - {id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', title: 'sixth', lat:51.04, lon:7.9} - ], - // let's be really explicit about fields - // Plus take opportunity to set date to be a date field and set some labels - fields: [ - {id: 'id'}, - {id: 'date', type: 'date'}, - {id: 'x', type: 'number'}, - {id: 'y', type: 'number'}, - {id: 'z', type: 'number'}, - {id: 'country', 'label': 'Country'}, - {id: 'title', 'label': 'Title'}, - {id: 'lat'}, - {id: 'lon'} - ] - }); - } - createExplorer(dataset, state); + // create the demo dataset + var dataset = createDemoDataset(); + // now create the multiview + // this is rather more elaborate than the minimum as we configure the + // MultiView in various ways (see function below) + window.multiview = createMultiView(dataset); + + // last, we'll demonstrate binding to changes in the dataset + // this will print out a summary of each change onto the page in the + // changelog section + dataset.records.bind('all', function(name, obj) { + var $info = $('
'); + $info.html(name + ': ' + JSON.stringify(obj.toJSON())); + $('.changelog').append($info); + $('.changelog').show(); + }); }); +// create standard demo dataset +function createDemoDataset() { + var dataset = new recline.Model.Dataset({ + records: [ + {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: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', title: 'third', lat:40.00, lon:-75.5}, + {id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', title: 'fourth', lat:57.27, lon:-6.20}, + {id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', title: 'fifth', lat:51.58, lon:0}, + {id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', title: 'sixth', lat:51.04, lon:7.9} + ], + // let's be really explicit about fields + // Plus take opportunity to set date to be a date field and set some labels + fields: [ + {id: 'id'}, + {id: 'date', type: 'date'}, + {id: 'x', type: 'number'}, + {id: 'y', type: 'number'}, + {id: 'z', type: 'number'}, + {id: 'country', 'label': 'Country'}, + {id: 'title', 'label': 'Title'}, + {id: 'lat'}, + {id: 'lon'} + ] + }); + return dataset; +} -// make Explorer creation / initialization in a function so we can call it -// again and again -var createExplorer = function(dataset, state) { - // remove existing data explorer view +// make MultivView +// +// creation / initialization in a function so we can call it again and again +var createMultiView = function(dataset, state) { + // remove existing multiview if present var reload = false; - if (window.dataExplorer) { - window.dataExplorer.remove(); + if (window.multiView) { + window.multiView.remove(); + window.multiView = null; reload = true; } - window.dataExplorer = null; + var $el = $(''); $el.appendTo(window.explorerDiv); + // customize the subviews for the MultiView var views = [ { id: 'grid', @@ -77,12 +73,12 @@ var createExplorer = function(dataset, state) { state: { gridOptions: { editable: true, - // Enable support for row add + // Enable support for row add enabledAddRow: true, - // Enable support for row delete - enabledDelRow: true, - // Enable support for row Reoder - enableReOrderRow:true, + // Enable support for row delete + enabledDelRow: true, + // Enable support for row Reoder + enableReOrderRow:true, autoEdit: false, enableCellNavigation: true }, @@ -110,11 +106,12 @@ var createExplorer = function(dataset, state) { } ]; - window.dataExplorer = new recline.View.MultiView({ + var multiView = new recline.View.MultiView({ model: dataset, el: $el, state: state, views: views }); + return multiView; }