From bc414e9f8c39d597d67ec97676f12b907c11baff Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Wed, 15 Aug 2012 12:33:59 +0100
Subject: [PATCH] [#212,views][s]: refactor views and tutorial so that no
 render call in initialize and view element can be passed in externally (fixes
 #212).

---
 docs/tutorial-views.markdown |  4 +++-
 src/view.graph.js            | 19 ++++++++-----------
 src/view.slickgrid.js        |  3 ---
 src/view.timeline.js         | 13 +++++--------
 src/view.transform.js        |  1 -
 5 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown
index 6752bb86..2dc86f56 100644
--- a/docs/tutorial-views.markdown
+++ b/docs/tutorial-views.markdown
@@ -156,6 +156,7 @@ var graph = new recline.View.Graph({
   }
 });
 $el.append(graph.el);
+graph.render();
 graph.redraw();
 {% endhighlight %}
 
@@ -174,6 +175,7 @@ var graph = new recline.View.Graph({
   }
 });
 $el.append(graph.el);
+graph.render();
 graph.redraw();
 </script>
 
@@ -213,7 +215,7 @@ var map = new recline.View.Map({
   model: dataset
 });
 $el.append(map.el);
-map.redraw();
+map.render();
 {% endhighlight %}
 
 <div id="mymap">&nbsp;</div>
diff --git a/src/view.graph.js b/src/view.graph.js
index 27780a61..bc616e0d 100644
--- a/src/view.graph.js
+++ b/src/view.graph.js
@@ -21,18 +21,16 @@ this.recline.View = this.recline.View || {};
 // NB: should *not* provide an el argument to the view but must let the view
 // generate the element itself (you can then append view.el to the DOM.
 my.Graph = Backbone.View.extend({
-  tagName:  "div",
-  className: "recline-graph",
-
   template: ' \
-  <div class="panel graph" style="display: block;"> \
-    <div class="js-temp-notice alert alert-block"> \
-      <h3 class="alert-heading">Hey there!</h3> \
-      <p>There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.</p> \
-      <p>Please tell us by <strong>using the menu on the right</strong> and a graph will automatically appear.</p> \
+    <div class="recline-graph"> \
+      <div class="panel graph" style="display: block;"> \
+        <div class="js-temp-notice alert alert-block"> \
+          <h3 class="alert-heading">Hey there!</h3> \
+          <p>There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.</p> \
+          <p>Please tell us by <strong>using the menu on the right</strong> and a graph will automatically appear.</p> \
+        </div> \
+      </div> \
     </div> \
-  </div> \
-</div> \
 ',
 
   initialize: function(options) {
@@ -65,7 +63,6 @@ my.Graph = Backbone.View.extend({
       self.redraw();
     });
     this.elSidebar = this.editor.el;
-    this.render();
   },
 
   render: function() {
diff --git a/src/view.slickgrid.js b/src/view.slickgrid.js
index 6801595b..dc31ef75 100644
--- a/src/view.slickgrid.js
+++ b/src/view.slickgrid.js
@@ -14,9 +14,6 @@ this.recline.View = this.recline.View || {};
 //
 // NB: you need an explicit height on the element for slickgrid to work
 my.SlickGrid = Backbone.View.extend({
-  tagName:  "div",
-  className: "recline-slickgrid",
-
   initialize: function(modelEtc) {
     var self = this;
     this.el = $(this.el);
diff --git a/src/view.timeline.js b/src/view.timeline.js
index d0d57529..d00cb577 100644
--- a/src/view.timeline.js
+++ b/src/view.timeline.js
@@ -13,8 +13,6 @@ if (typeof VMM !== 'undefined') {
 //
 // Timeline view using http://timeline.verite.co/
 my.Timeline = Backbone.View.extend({
-  tagName:  'div',
-
   template: ' \
     <div class="recline-timeline"> \
       <div id="vmm-timeline-id"></div> \
@@ -46,18 +44,17 @@ my.Timeline = Backbone.View.extend({
     );
     this.state = new recline.Model.ObjectState(stateData);
     this._setupTemporalField();
-    this.render();
-    // can only call _initTimeline once view in DOM as Timeline uses $
-    // internally to look up element
-    if ($(this.elementId).length > 0) {
-      this._initTimeline();
-    }
   },
 
   render: function() {
     var tmplData = {};
     var htmls = Mustache.render(this.template, tmplData);
     this.el.html(htmls);
+    // can only call _initTimeline once view in DOM as Timeline uses $
+    // internally to look up element
+    if ($(this.elementId).length > 0) {
+      this._initTimeline();
+    }
   },
 
   show: function() {
diff --git a/src/view.transform.js b/src/view.transform.js
index 4b6d9b3f..df690f48 100644
--- a/src/view.transform.js
+++ b/src/view.transform.js
@@ -36,7 +36,6 @@ my.Transform = Backbone.View.extend({
 
   initialize: function(options) {
     this.el = $(this.el);
-    this.render();
   },
 
   render: function() {