[#211,view][s]: switch show/hide from events to explicit methods - fixes #211.

src/view.graph.js

@@ -47,12 +47,6 @@ my.Graph = Backbone.View.extend({
     this.model.fields.bind('add', this.render);
     this.model.records.bind('add', this.redraw);
     this.model.records.bind('reset', this.redraw);
-    // because we cannot redraw when hidden we may need when becoming visible
-    this.bind('view:show', function() {
-      if (this.needToRedraw) {
-        self.redraw();
-      }
-    });
     var stateData = _.extend({
         group: null,
         // so that at least one series chooser box shows up
@@ -106,6 +100,13 @@ my.Graph = Backbone.View.extend({
     }
   },
 
+  show: function() {
+    // because we cannot redraw when hidden we may need to when becoming visible
+    if (this.needToRedraw) {
+      this.redraw();
+    }
+  },
+
   // ### getGraphOptions
   //
   // Get options for Flot Graph

src/view.map.js

@@ -56,22 +56,6 @@ my.Map = Backbone.View.extend({
     this.model.records.bind('remove', function(doc){self.redraw('remove',doc)});
     this.model.records.bind('reset', function(){self.redraw('reset')});
 
-    this.bind('view:show',function(){
-      // If the div was hidden, Leaflet needs to recalculate some sizes
-      // to display properly
-      if (self.map){
-        self.map.invalidateSize();
-        if (self._zoomPending && self.state.get('autoZoom')) {
-          self._zoomToFeatures();
-          self._zoomPending = false;
-        }
-      }
-      self.visible = true;
-    });
-    this.bind('view:hide',function(){
-      self.visible = false;
-    });
-
     var stateData = _.extend({
         geomField: null,
         lonField: null,
@@ -146,6 +130,23 @@ my.Map = Backbone.View.extend({
     }
   },
 
+  show: function() {
+    // If the div was hidden, Leaflet needs to recalculate some sizes
+    // to display properly
+    if (this.map){
+      this.map.invalidateSize();
+      if (this._zoomPending && this.state.get('autoZoom')) {
+        this._zoomToFeatures();
+        this._zoomPending = false;
+      }
+    }
+    this.visible = true;
+  },
+
+  hide: function() {
+    this.visible = false;
+  },
+
   _geomReady: function() {
     return Boolean(this.state.get('geomField') || (this.state.get('latField') && this.state.get('lonField')));
   },

src/view.multiview.js

@@ -289,13 +289,17 @@ my.MultiView = Backbone.View.extend({
         if (view.view.elSidebar) {
           view.view.elSidebar.show();
         }
-        view.view.trigger('view:show');
+        if (view.view.show) {
+          view.view.show();
+        }
       } else {
         view.view.el.hide();
         if (view.view.elSidebar) {
           view.view.elSidebar.hide();
         }
-        view.view.trigger('view:hide');
+        if (view.view.hide) {
+          view.view.hide();
+        }
       }
     });
   },

src/view.slickgrid.js

@@ -35,23 +35,6 @@ my.SlickGrid = Backbone.View.extend({
       }, modelEtc.state
     );
     this.state = new recline.Model.ObjectState(state);
-
-    this.bind('view:show',function(){
-      // If the div is hidden, SlickGrid will calculate wrongly some
-      // sizes so we must render it explicitly when the view is visible
-      if (!self.rendered){
-        if (!self.grid){
-          self.render();
-        }
-        self.grid.init();
-        self.rendered = true;
-      }
-      self.visible = true;
-    });
-    this.bind('view:hide',function(){
-      self.visible = false;
-    });
-
   },
 
   events: {
@@ -179,7 +162,24 @@ my.SlickGrid = Backbone.View.extend({
     }
 
     return this;
- }
+ },
+
+  show: function() {
+    // If the div is hidden, SlickGrid will calculate wrongly some
+    // sizes so we must render it explicitly when the view is visible
+    if (!this.rendered){
+      if (!this.grid){
+        this.render();
+      }
+      this.grid.init();
+      this.rendered = true;
+    }
+    this.visible = true;
+  },
+
+  hide: function() {
+    this.visible = false;
+  }
 });
 
 })(jQuery, recline.View);

src/view.timeline.js

@@ -32,12 +32,6 @@ my.Timeline = Backbone.View.extend({
     this.el = $(this.el);
     this.timeline = new VMM.Timeline();
     this._timelineIsInitialized = false;
-    this.bind('view:show', function() {
-      // only call _initTimeline once view in DOM as Timeline uses $ internally to look up element
-      if (self._timelineIsInitialized === false) {
-        self._initTimeline();
-      }
-    });
     this.model.fields.bind('reset', function() {
       self._setupTemporalField();
     });
@@ -66,6 +60,13 @@ my.Timeline = Backbone.View.extend({
     this.el.html(htmls);
   },
 
+  show: function() {
+    // only call _initTimeline once view in DOM as Timeline uses $ internally to look up element
+    if (this._timelineIsInitialized === false) {
+      this._initTimeline();
+    }
+  },
+
   _initTimeline: function() {
     var $timeline = this.el.find(this.elementId);
     // set width explicitly o/w timeline goes wider that screen for some reason