[view/timeline][s]: workarounds so that timeline can be init-ed automatically if created with a dom element.

* This means you don't have to do view.trigger('view:show') after creating if the view element already in the dom.
* Verite Timeline is a bit problematic in that it cannot be passed a dom element but insists on being passed an id it looks up.

dist/recline.js

@@ -2755,12 +2755,17 @@ this.recline = this.recline || {};
 this.recline.View = this.recline.View || {};
 
 (function($, my) {
+
+// ## Timeline
+//
+// Timeline view using http://timeline.verite.co/
 my.Timeline = Backbone.View.extend({
   tagName:  'div',
-  className: 'recline-timeline',
 
   template: ' \
+    <div class="recline-timeline"> \
       <div id="vmm-timeline-id"></div> \
+    </div> \
   ',
 
   // These are the default (case-insensitive) names of field that are used if found.
@@ -2775,6 +2780,7 @@ my.Timeline = Backbone.View.extend({
     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();
       }
@@ -2794,6 +2800,11 @@ 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() {
@@ -2803,9 +2814,9 @@ my.Timeline = Backbone.View.extend({
   },
 
   _initTimeline: function() {
+    var $timeline = this.el.find(this.elementId);
     // set width explicitly o/w timeline goes wider that screen for some reason
-    this.el.find(this.elementId).width(this.el.parent().width());
+    $timeline.width(this.el.parent().width());
-    // only call _initTimeline once view in DOM as Timeline uses $ internally to look up element
     var config = {};
     var data = this._timelineJSON();
     this.timeline.init(data, this.elementId, config);
@@ -2854,6 +2865,9 @@ my.Timeline = Backbone.View.extend({
   },
 
   _parseDate: function(date) {
+    if (!date) {
+      return null;
+    }
     var out = date.trim();
     out = out.replace(/(\d)th/g, '$1');
     out = out.replace(/(\d)st/g, '$1');

src/view.timeline.js

@@ -4,12 +4,17 @@ this.recline = this.recline || {};
 this.recline.View = this.recline.View || {};
 
 (function($, my) {
+
+// ## Timeline
+//
+// Timeline view using http://timeline.verite.co/
 my.Timeline = Backbone.View.extend({
   tagName:  'div',
-  className: 'recline-timeline',
 
   template: ' \
+    <div class="recline-timeline"> \
       <div id="vmm-timeline-id"></div> \
+    </div> \
   ',
 
   // These are the default (case-insensitive) names of field that are used if found.
@@ -24,6 +29,7 @@ my.Timeline = Backbone.View.extend({
     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();
       }
@@ -43,6 +49,11 @@ 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() {
@@ -52,9 +63,9 @@ my.Timeline = Backbone.View.extend({
   },
 
   _initTimeline: function() {
+    var $timeline = this.el.find(this.elementId);
     // set width explicitly o/w timeline goes wider that screen for some reason
-    this.el.find(this.elementId).width(this.el.parent().width());
+    $timeline.width(this.el.parent().width());
-    // only call _initTimeline once view in DOM as Timeline uses $ internally to look up element
     var config = {};
     var data = this._timelineJSON();
     this.timeline.init(data, this.elementId, config);