[demos][s]: simplify multiview demo.

demos/multiview/app.js

@@ -1,33 +1,28 @@
 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;
+  // 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 = $('<div />');
+    $info.html(name + ': ' + JSON.stringify(obj.toJSON()));
+    $('.changelog').append($info);
+    $('.changelog').show();
   });
-  } 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({
+});
+
+// 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},
@@ -50,24 +45,25 @@ jQuery(function($) {
       {id: 'lon'}
     ]
   });
+  return dataset;
 }
-  createExplorer(dataset, state);
-});
 
-
-// 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 = $('<div />');
   $el.appendTo(window.explorerDiv);
 
+  // customize the subviews for the MultiView
   var views = [
     {
       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,
     el: $el,
     state: state,
     views: views
   });
+  return multiView;
 }