[#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

@@ -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>

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() {

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);

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() {

src/view.transform.js

@@ -36,7 +36,6 @@ my.Transform = Backbone.View.extend({
 
   initialize: function(options) {
     this.el = $(this.el);
-    this.render();
   },
 
   render: function() {