[demos][s]: simplify multiview demo.

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
+  // 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 />');
-  } else {
+    $info.html(name + ': ' + JSON.stringify(obj.toJSON()));
-    state.url = 'demo';
+    $('.changelog').append($info);
-  }
+    $('.changelog').show();
-  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 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
+// make MultivView
-// again and again
+//
-var createExplorer = function(dataset, state) {
+// creation / initialization in a function so we can call it again and again
-  // remove existing data explorer view
+var createMultiView = function(dataset, state) {
+  // remove existing multiview if present
   var reload = false;
-  if (window.dataExplorer) {
+  if (window.multiView) {
-    window.dataExplorer.remove();
+    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',
@@ -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
+            // Enable support for row delete
-	    enabledDelRow: true,
+            enabledDelRow: true,
-	    // Enable support for row Reoder 
+            // Enable support for row Reoder 
-	    enableReOrderRow:true,
+            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;
 }