diff --git a/src/view.flot.js b/src/view.flot.js
index c1802218..0bda4d18 100644
--- a/src/view.flot.js
+++ b/src/view.flot.js
@@ -38,7 +38,6 @@ my.Flot = Backbone.View.extend({
     var self = this;
     this.graphColors = ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"];
 
-    this.el = $(this.el);
     _.bindAll(this, 'render', 'redraw', '_toolTip', '_xaxisLabel');
     this.needToRedraw = false;
     this.model.bind('change', this.render);
@@ -64,15 +63,15 @@ my.Flot = Backbone.View.extend({
       self.state.set(self.editor.state.toJSON());
       self.redraw();
     });
-    this.elSidebar = this.editor.el;
+    this.elSidebar = this.editor.$el;
   },
 
   render: function() {
     var self = this;
     var tmplData = this.model.toTemplateJSON();
     var htmls = Mustache.render(this.template, tmplData);
-    $(this.el).html(htmls);
-    this.$graph = this.el.find('.panel.graph');
+    this.$el.html(htmls);
+    this.$graph = this.$el.find('.panel.graph');
     this.$graph.on("plothover", this._toolTip);
     return this;
   },
@@ -82,7 +81,7 @@ my.Flot = Backbone.View.extend({
     // * The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with
     //   Uncaught Invalid dimensions for plot, width = 0, height = 0
     // * There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value'
-    var areWeVisible = !jQuery.expr.filters.hidden(this.el[0]);
+    var areWeVisible = !jQuery.expr.filters.hidden(this.el);
     if ((!areWeVisible || this.model.records.length === 0)) {
       this.needToRedraw = true;
       return;
@@ -403,7 +402,6 @@ my.FlotControls = Backbone.View.extend({
 
   initialize: function(options) {
     var self = this;
-    this.el = $(this.el);
     _.bindAll(this, 'render');
     this.model.fields.bind('reset', this.render);
     this.model.fields.bind('add', this.render);
@@ -415,7 +413,7 @@ my.FlotControls = Backbone.View.extend({
     var self = this;
     var tmplData = this.model.toTemplateJSON();
     var htmls = Mustache.render(this.template, tmplData);
-    this.el.html(htmls);
+    this.$el.html(htmls);
 
     // set up editor from state
     if (this.state.get('graphType')) {
@@ -439,7 +437,7 @@ my.FlotControls = Backbone.View.extend({
   // Private: Helper function to select an option from a select list
   //
   _selectOption: function(id,value){
-    var options = this.el.find(id + ' select > option');
+    var options = this.$el.find(id + ' select > option');
     if (options) {
       options.each(function(opt){
         if (this.value == value) {
@@ -451,16 +449,16 @@ my.FlotControls = Backbone.View.extend({
   },
 
   onEditorSubmit: function(e) {
-    var select = this.el.find('.editor-group select');
+    var select = this.$el.find('.editor-group select');
     var $editor = this;
-    var $series  = this.el.find('.editor-series select');
+    var $series = this.$el.find('.editor-series select');
     var series = $series.map(function () {
       return $(this).val();
     });
     var updatedState = {
       series: $.makeArray(series),
-      group: this.el.find('.editor-group select').val(),
-      graphType: this.el.find('.editor-type select').val()
+      group: this.$el.find('.editor-group select').val(),
+      graphType: this.$el.find('.editor-type select').val()
     };
     this.state.set(updatedState);
   },
@@ -477,7 +475,7 @@ my.FlotControls = Backbone.View.extend({
     }, this.model.toTemplateJSON());
 
     var htmls = Mustache.render(this.templateSeriesEditor, data);
-    this.el.find('.editor-series-group').append(htmls);
+    this.$el.find('.editor-series-group').append(htmls);
     return this;
   },
 
diff --git a/src/view.grid.js b/src/view.grid.js
index f826b76a..394b205d 100644
--- a/src/view.grid.js
+++ b/src/view.grid.js
@@ -16,7 +16,6 @@ my.Grid = Backbone.View.extend({
 
   initialize: function(modelEtc) {
     var self = this;
-    this.el = $(this.el);
     _.bindAll(this, 'render', 'onHorizontalScroll');
     this.model.records.bind('add', this.render);
     this.model.records.bind('reset', this.render);
@@ -60,7 +59,7 @@ my.Grid = Backbone.View.extend({
 
   onHorizontalScroll: function(e) {
     var currentScroll = $(e.target).scrollLeft();
-    this.el.find('.recline-grid thead tr').scrollLeft(currentScroll);
+    this.$el.find('.recline-grid thead tr').scrollLeft(currentScroll);
   },
 
   // ======================================================
@@ -103,7 +102,7 @@ my.Grid = Backbone.View.extend({
     this.scrollbarDimensions = this.scrollbarDimensions || this._scrollbarSize(); // skip measurement if already have dimensions
     var numFields = this.fields.length;
     // compute field widths (-20 for first menu col + 10px for padding on each col and finally 16px for the scrollbar)
-    var fullWidth = self.el.width() - 20 - 10 * numFields - this.scrollbarDimensions.width;
+    var fullWidth = self.$el.width() - 20 - 10 * numFields - this.scrollbarDimensions.width;
     var width = parseInt(Math.max(50, fullWidth / numFields), 10);
     // if columns extend outside viewport then remainder is 0 
     var remainder = Math.max(fullWidth - numFields * width,0);
@@ -116,10 +115,10 @@ my.Grid = Backbone.View.extend({
       }
     });
     var htmls = Mustache.render(this.template, this.toTemplateJSON());
-    this.el.html(htmls);
+    this.$el.html(htmls);
     this.model.records.forEach(function(doc) {
       var tr = $('<tr />');
-      self.el.find('tbody').append(tr);
+      self.$el.find('tbody').append(tr);
       var newView = new my.GridRow({
           model: doc,
           el: tr,
@@ -128,12 +127,12 @@ my.Grid = Backbone.View.extend({
       newView.render();
     });
     // hide extra header col if no scrollbar to avoid unsightly overhang
-    var $tbody = this.el.find('tbody')[0];
+    var $tbody = this.$el.find('tbody')[0];
     if ($tbody.scrollHeight <= $tbody.offsetHeight) {
-      this.el.find('th.last-header').hide();
+      this.$el.find('th.last-header').hide();
     }
-    this.el.find('.recline-grid').toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
-    this.el.find('.recline-grid tbody').scroll(this.onHorizontalScroll);
+    this.$el.find('.recline-grid').toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
+    this.$el.find('.recline-grid tbody').scroll(this.onHorizontalScroll);
     return this;
   },
 
@@ -169,7 +168,6 @@ my.GridRow = Backbone.View.extend({
   initialize: function(initData) {
     _.bindAll(this, 'render');
     this._fields = initData.fields;
-    this.el = $(this.el);
     this.model.bind('change', this.render);
   },
 
@@ -203,9 +201,9 @@ my.GridRow = Backbone.View.extend({
   },
 
   render: function() {
-    this.el.attr('data-id', this.model.id);
+    this.$el.attr('data-id', this.model.id);
     var html = Mustache.render(this.template, this.toTemplateJSON());
-    $(this.el).html(html);
+    this.$el.html(html);
     return this;
   },
 
@@ -225,7 +223,7 @@ my.GridRow = Backbone.View.extend({
   ',
 
   onEditClick: function(e) {
-    var editing = this.el.find('.data-table-cell-editor-editor');
+    var editing = this.$el.find('.data-table-cell-editor-editor');
     if (editing.length > 0) {
       editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
     }
diff --git a/src/view.map.js b/src/view.map.js
index 1c463882..c0979a2a 100644
--- a/src/view.map.js
+++ b/src/view.map.js
@@ -51,7 +51,6 @@ my.Map = Backbone.View.extend({
 
   initialize: function(options) {
     var self = this;
-    this.el = $(this.el);
     this.visible = true;
     this.mapReady = false;
     // this will be the Leaflet L.Map object (setup below)
@@ -103,7 +102,7 @@ my.Map = Backbone.View.extend({
     this.state.bind('change', function() {
       self.redraw();
     });
-    this.elSidebar = this.menu.el;
+    this.elSidebar = this.menu.$el;
   },
 
   // ## Customization Functions
@@ -173,8 +172,8 @@ my.Map = Backbone.View.extend({
   render: function() {
     var self = this;
     var htmls = Mustache.render(this.template, this.model.toTemplateJSON());
-    $(this.el).html(htmls);
-    this.$map = this.el.find('.panel.map');
+    this.$el.html(htmls);
+    this.$map = this.$el.find('.panel.map');
     this.redraw();
     return this;
   },
@@ -546,7 +545,6 @@ my.MapMenu = Backbone.View.extend({
 
   initialize: function(options) {
     var self = this;
-    this.el = $(this.el);
     _.bindAll(this, 'render');
     this.model.fields.bind('change', this.render);
     this.state = new recline.Model.ObjectState(options.state);
@@ -560,27 +558,27 @@ my.MapMenu = Backbone.View.extend({
   render: function() {
     var self = this;
     var htmls = Mustache.render(this.template, this.model.toTemplateJSON());
-    $(this.el).html(htmls);
+    this.$el.html(htmls);
 
     if (this._geomReady() && this.model.fields.length){
       if (this.state.get('geomField')){
         this._selectOption('editor-geom-field',this.state.get('geomField'));
-        this.el.find('#editor-field-type-geom').attr('checked','checked').change();
+        this.$el.find('#editor-field-type-geom').attr('checked','checked').change();
       } else{
         this._selectOption('editor-lon-field',this.state.get('lonField'));
         this._selectOption('editor-lat-field',this.state.get('latField'));
-        this.el.find('#editor-field-type-latlon').attr('checked','checked').change();
+        this.$el.find('#editor-field-type-latlon').attr('checked','checked').change();
       }
     }
     if (this.state.get('autoZoom')) {
-      this.el.find('#editor-auto-zoom').attr('checked', 'checked');
+      this.$el.find('#editor-auto-zoom').attr('checked', 'checked');
     } else {
-      this.el.find('#editor-auto-zoom').removeAttr('checked');
+      this.$el.find('#editor-auto-zoom').removeAttr('checked');
     }
     if (this.state.get('cluster')) {
-      this.el.find('#editor-cluster').attr('checked', 'checked');
+      this.$el.find('#editor-cluster').attr('checked', 'checked');
     } else {
-      this.el.find('#editor-cluster').removeAttr('checked');
+      this.$el.find('#editor-cluster').removeAttr('checked');
     }
     return this;
   },
@@ -599,17 +597,17 @@ my.MapMenu = Backbone.View.extend({
   //
   onEditorSubmit: function(e){
     e.preventDefault();
-    if (this.el.find('#editor-field-type-geom').attr('checked')){
+    if (this.$el.find('#editor-field-type-geom').attr('checked')){
       this.state.set({
-        geomField: this.el.find('.editor-geom-field > select > option:selected').val(),
+        geomField: this.$el.find('.editor-geom-field > select > option:selected').val(),
         lonField: null,
         latField: null
       });
     } else {
       this.state.set({
         geomField: null,
-        lonField: this.el.find('.editor-lon-field > select > option:selected').val(),
-        latField: this.el.find('.editor-lat-field > select > option:selected').val()
+        lonField: this.$el.find('.editor-lon-field > select > option:selected').val(),
+        latField: this.$el.find('.editor-lat-field > select > option:selected').val()
       });
     }
     return false;
@@ -620,11 +618,11 @@ my.MapMenu = Backbone.View.extend({
   //
   onFieldTypeChange: function(e){
     if (e.target.value == 'geom'){
-        this.el.find('.editor-field-type-geom').show();
-        this.el.find('.editor-field-type-latlon').hide();
+        this.$el.find('.editor-field-type-geom').show();
+        this.$el.find('.editor-field-type-latlon').hide();
     } else {
-        this.el.find('.editor-field-type-geom').hide();
-        this.el.find('.editor-field-type-latlon').show();
+        this.$el.find('.editor-field-type-geom').hide();
+        this.$el.find('.editor-field-type-latlon').show();
     }
   },
 
@@ -639,7 +637,7 @@ my.MapMenu = Backbone.View.extend({
   // Private: Helper function to select an option from a select list
   //
   _selectOption: function(id,value){
-    var options = this.el.find('.' + id + ' > select > option');
+    var options = this.$el.find('.' + id + ' > select > option');
     if (options){
       options.each(function(opt){
         if (this.value == value) {
diff --git a/src/view.multiview.js b/src/view.multiview.js
index e770d386..691634ff 100644
--- a/src/view.multiview.js
+++ b/src/view.multiview.js
@@ -130,7 +130,6 @@ my.MultiView = Backbone.View.extend({
 
   initialize: function(options) {
     var self = this;
-    this.el = $(this.el);
     this._setupState(options.state);
 
     // Hash of 'page' views (i.e. those for whole page) keyed by page name
@@ -205,7 +204,7 @@ my.MultiView = Backbone.View.extend({
       });
     this.model.bind('query:done', function() {
         self.clearNotifications();
-        self.el.find('.doc-count').text(self.model.recordCount || 'Unknown');
+        self.$el.find('.doc-count').text(self.model.recordCount || 'Unknown');
       });
     this.model.bind('query:fail', function(error) {
         self.clearNotifications();
@@ -236,7 +235,7 @@ my.MultiView = Backbone.View.extend({
   },
 
   setReadOnly: function() {
-    this.el.addClass('recline-read-only');
+    this.$el.addClass('recline-read-only');
   },
 
   render: function() {
@@ -244,11 +243,11 @@ my.MultiView = Backbone.View.extend({
     tmplData.views = this.pageViews;
     tmplData.sidebarViews = this.sidebarViews;
     var template = Mustache.render(this.template, tmplData);
-    $(this.el).html(template);
+    this.$el.html(template);
 
     // now create and append other views
-    var $dataViewContainer = this.el.find('.data-view-container');
-    var $dataSidebar = this.el.find('.data-view-sidebar');
+    var $dataViewContainer = this.$el.find('.data-view-container');
+    var $dataSidebar = this.$el.find('.data-view-sidebar');
 
     // the main views
     _.each(this.pageViews, function(view, pageName) {
@@ -260,25 +259,25 @@ my.MultiView = Backbone.View.extend({
     });
 
     _.each(this.sidebarViews, function(view) {
-      this['$'+view.id] = view.view.el;
+      this['$'+view.id] = view.view.$el;
       $dataSidebar.append(view.view.el);
     }, this);
 
     var pager = new recline.View.Pager({
       model: this.model.queryState
     });
-    this.el.find('.recline-results-info').after(pager.el);
+    this.$el.find('.recline-results-info').after(pager.el);
 
     var queryEditor = new recline.View.QueryEditor({
       model: this.model.queryState
     });
-    this.el.find('.query-editor-here').append(queryEditor.el);
+    this.$el.find('.query-editor-here').append(queryEditor.el);
 
   },
 
   // hide the sidebar if empty
   _showHideSidebar: function() {
-    var $dataSidebar = this.el.find('.data-view-sidebar');
+    var $dataSidebar = this.$el.find('.data-view-sidebar');
     var visibleChildren = $dataSidebar.children().filter(function() {
       return $(this).css("display") != "none";
     }).length;
@@ -291,19 +290,19 @@ my.MultiView = Backbone.View.extend({
   },
 
   updateNav: function(pageName) {
-    this.el.find('.navigation a').removeClass('active');
-    var $el = this.el.find('.navigation a[data-view="' + pageName + '"]');
+    this.$el.find('.navigation a').removeClass('active');
+    var $el = this.$el.find('.navigation a[data-view="' + pageName + '"]');
     $el.addClass('active');
 
     // add/remove sidebars and hide inactive views
     _.each(this.pageViews, function(view, idx) {
       if (view.id === pageName) {
-        view.view.el.show();
+        view.view.$el.show();
         if (view.view.elSidebar) {
           view.view.elSidebar.show();
         }
       } else {
-        view.view.el.hide();
+        view.view.$el.hide();
         if (view.view.elSidebar) {
           view.view.elSidebar.hide();
         }
diff --git a/src/view.slickgrid.js b/src/view.slickgrid.js
index 48d0bad2..d1f1f206 100644
--- a/src/view.slickgrid.js
+++ b/src/view.slickgrid.js
@@ -34,8 +34,7 @@ this.recline.View = this.recline.View || {};
 my.SlickGrid = Backbone.View.extend({
   initialize: function(modelEtc) {
     var self = this;
-    this.el = $(this.el);
-    this.el.addClass('recline-slickgrid');
+    this.$el.addClass('recline-slickgrid');
     _.bindAll(this, 'render');
     this.model.records.bind('add', this.render);
     this.model.records.bind('reset', this.render);
diff --git a/src/view.timeline.js b/src/view.timeline.js
index c4c7da69..40aa7563 100644
--- a/src/view.timeline.js
+++ b/src/view.timeline.js
@@ -28,7 +28,6 @@ my.Timeline = Backbone.View.extend({
 
   initialize: function(options) {
     var self = this;
-    this.el = $(this.el);
     this.timeline = new VMM.Timeline();
     this._timelineIsInitialized = false;
     this.model.fields.bind('reset', function() {
@@ -51,7 +50,7 @@ my.Timeline = Backbone.View.extend({
   render: function() {
     var tmplData = {};
     var htmls = Mustache.render(this.template, tmplData);
-    this.el.html(htmls);
+    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) {
@@ -67,7 +66,7 @@ my.Timeline = Backbone.View.extend({
   },
 
   _initTimeline: function() {
-    var $timeline = this.el.find(this.elementId);
+    var $timeline = this.$el.find(this.elementId);
     var data = this._timelineJSON();
     this.timeline.init(data, this.elementId, this.state.get("timelineJSOptions"));
     this._timelineIsInitialized = true
diff --git a/src/widget.facetviewer.js b/src/widget.facetviewer.js
index 311fa2b0..45f9a40e 100644
--- a/src/widget.facetviewer.js
+++ b/src/widget.facetviewer.js
@@ -42,7 +42,6 @@ my.FacetViewer = Backbone.View.extend({
   },
   initialize: function(model) {
     _.bindAll(this, 'render');
-    this.el = $(this.el);
     this.model.facets.bind('all', this.render);
     this.model.fields.bind('all', this.render);
     this.render();
@@ -61,17 +60,17 @@ my.FacetViewer = Backbone.View.extend({
       return facet;
     });
     var templated = Mustache.render(this.template, tmplData);
-    this.el.html(templated);
+    this.$el.html(templated);
     // are there actually any facets to show?
     if (this.model.facets.length > 0) {
-      this.el.show();
+      this.$el.show();
     } else {
-      this.el.hide();
+      this.$el.hide();
     }
   },
   onHide: function(e) {
     e.preventDefault();
-    this.el.hide();
+    this.$el.hide();
   },
   onFacetFilter: function(e) {
     e.preventDefault();
diff --git a/src/widget.fields.js b/src/widget.fields.js
index 2d490091..bb950286 100644
--- a/src/widget.fields.js
+++ b/src/widget.fields.js
@@ -60,7 +60,6 @@ my.Fields = Backbone.View.extend({
 
   initialize: function(model) {
     var self = this;
-    this.el = $(this.el);
     _.bindAll(this, 'render');
 
     // TODO: this is quite restrictive in terms of when it is re-run
@@ -75,7 +74,7 @@ my.Fields = Backbone.View.extend({
       self.model.getFieldsSummary();
       self.render();
     });
-    this.el.find('.collapse').collapse();
+    this.$el.find('.collapse').collapse();
     this.render();
   },
   render: function() {
@@ -89,7 +88,7 @@ my.Fields = Backbone.View.extend({
       tmplData.fields.push(out);
     });
     var templated = Mustache.render(this.template, tmplData);
-    this.el.html(templated);
+    this.$el.html(templated);
   }
 });
 
diff --git a/src/widget.filtereditor.js b/src/widget.filtereditor.js
index ee6ea56f..d7ceefbf 100644
--- a/src/widget.filtereditor.js
+++ b/src/widget.filtereditor.js
@@ -89,7 +89,6 @@ my.FilterEditor = Backbone.View.extend({
     'submit form.js-add': 'onAddFilter'
   },
   initialize: function() {
-    this.el = $(this.el);
     _.bindAll(this, 'render');
     this.model.fields.bind('all', this.render);
     this.model.queryState.bind('change', this.render);
@@ -109,13 +108,13 @@ my.FilterEditor = Backbone.View.extend({
       return Mustache.render(self.filterTemplates[this.type], this);
     };
     var out = Mustache.render(this.template, tmplData);
-    this.el.html(out);
+    this.$el.html(out);
   },
   onAddFilterShow: function(e) {
     e.preventDefault();
     var $target = $(e.target);
     $target.hide();
-    this.el.find('form.js-add').show();
+    this.$el.find('form.js-add').show();
   },
   onAddFilter: function(e) {
     e.preventDefault();
diff --git a/src/widget.pager.js b/src/widget.pager.js
index 5579e00d..59b308db 100644
--- a/src/widget.pager.js
+++ b/src/widget.pager.js
@@ -25,14 +25,13 @@ my.Pager = Backbone.View.extend({
 
   initialize: function() {
     _.bindAll(this, 'render');
-    this.el = $(this.el);
     this.model.bind('change', this.render);
     this.render();
   },
   onFormSubmit: function(e) {
     e.preventDefault();
-    var newFrom = parseInt(this.el.find('input[name="from"]').val());
-    var newSize = parseInt(this.el.find('input[name="to"]').val()) - newFrom;
+    var newFrom = parseInt(this.$el.find('input[name="from"]').val());
+    var newSize = parseInt(this.$el.find('input[name="to"]').val()) - newFrom;
     newFrom = Math.max(newFrom, 0);
     newSize = Math.max(newSize, 1);
     this.model.set({size: newSize, from: newFrom});
@@ -53,7 +52,7 @@ my.Pager = Backbone.View.extend({
     var tmplData = this.model.toJSON();
     tmplData.to = this.model.get('from') + this.model.get('size');
     var templated = Mustache.render(this.template, tmplData);
-    this.el.html(templated);
+    this.$el.html(templated);
   }
 });
 
diff --git a/src/widget.queryeditor.js b/src/widget.queryeditor.js
index a3e594b1..1229053b 100644
--- a/src/widget.queryeditor.js
+++ b/src/widget.queryeditor.js
@@ -24,19 +24,18 @@ my.QueryEditor = Backbone.View.extend({
 
   initialize: function() {
     _.bindAll(this, 'render');
-    this.el = $(this.el);
     this.model.bind('change', this.render);
     this.render();
   },
   onFormSubmit: function(e) {
     e.preventDefault();
-    var query = this.el.find('.text-query input').val();
+    var query = this.$el.find('.text-query input').val();
     this.model.set({q: query});
   },
   render: function() {
     var tmplData = this.model.toJSON();
     var templated = Mustache.render(this.template, tmplData);
-    this.el.html(templated);
+    this.$el.html(templated);
   }
 });
 
diff --git a/src/widget.valuefilter.js b/src/widget.valuefilter.js
index 3b57e296..b176ff40 100644
--- a/src/widget.valuefilter.js
+++ b/src/widget.valuefilter.js
@@ -51,7 +51,6 @@ my.ValueFilter = Backbone.View.extend({
     'submit form.js-add': 'onAddFilter'
   },
   initialize: function() {
-    this.el = $(this.el);
     _.bindAll(this, 'render');
     this.model.fields.bind('all', this.render);
     this.model.queryState.bind('change', this.render);
@@ -71,7 +70,7 @@ my.ValueFilter = Backbone.View.extend({
       return Mustache.render(self.filterTemplates.term, this);
     };
     var out = Mustache.render(this.template, tmplData);
-    this.el.html(out);
+    this.$el.html(out);
   },
   updateFilter: function(input) {
     var self = this;
@@ -85,7 +84,7 @@ my.ValueFilter = Backbone.View.extend({
     e.preventDefault();
     var $target = $(e.target);
     $target.hide();
-    this.el.find('form.js-add').show();
+    this.$el.find('form.js-add').show();
   },
   onAddFilter: function(e) {
     e.preventDefault();
diff --git a/test/view.flot.test.js b/test/view.flot.test.js
index 4bf761f6..005250cd 100644
--- a/test/view.flot.test.js
+++ b/test/view.flot.test.js
@@ -29,8 +29,8 @@ test('initialize', function () {
   // check we have updated editor with state info
   equal(view.elSidebar.find('.editor-type select').val(), 'lines');
   equal(view.elSidebar.find('.editor-group select').val(), 'x');
-  var out = _.map(view.elSidebar.find('.editor-series select'), function($el) {
-    return $($el).val();
+  var out = _.map(view.elSidebar.find('.editor-series select'), function(el) {
+    return $(el).val();
   });
   deepEqual(out, ['y', 'z']);
 
diff --git a/test/view.map.test.js b/test/view.map.test.js
index e429f646..8102ec87 100644
--- a/test/view.map.test.js
+++ b/test/view.map.test.js
@@ -162,13 +162,13 @@ test('Popup', function () {
   $('.fixtures').append(view.el);
   view.render();
 
-  var marker = view.el.find('.leaflet-marker-icon').first();
+  var marker = view.$el.find('.leaflet-marker-icon').first();
 
   assertPresent(marker);
 
   _.values(view.features._layers)[0].fire('click');
 
-  var popup = view.el.find('.leaflet-popup-content');
+  var popup = view.$el.find('.leaflet-popup-content');
 
   assertPresent(popup);
 
@@ -195,9 +195,9 @@ test('Popup - Custom', function () {
   };
   view.render();
 
-  var marker = view.el.find('.leaflet-marker-icon').first();
+  var marker = view.$el.find('.leaflet-marker-icon').first();
   _.values(view.features._layers)[0].fire('click');
-  var popup = view.el.find('.leaflet-popup-content');
+  var popup = view.$el.find('.leaflet-popup-content');
 
   assertPresent(popup);
 
diff --git a/test/view.multiview.test.js b/test/view.multiview.test.js
index db8cbb53..34cbf338 100644
--- a/test/view.multiview.test.js
+++ b/test/view.multiview.test.js
@@ -60,9 +60,9 @@ test('initialize state', function () {
   ok(explorer.state.get('currentView'), 'graph');
 
   // check the correct view is visible
-  var css = explorer.el.find('.navigation a[data-view="graph"]').attr('class').split(' ');
+  var css = explorer.$el.find('.navigation a[data-view="graph"]').attr('class').split(' ');
   ok(_.contains(css, 'active'), css);
-  var css = explorer.el.find('.navigation a[data-view="grid"]').attr('class').split(' ');
+  var css = explorer.$el.find('.navigation a[data-view="grid"]').attr('class').split(' ');
   ok(!(_.contains(css, 'active')), css);
 
   // check pass through of view config
diff --git a/test/view.timeline.test.js b/test/view.timeline.test.js
index 4f6faf48..83b4a60f 100644
--- a/test/view.timeline.test.js
+++ b/test/view.timeline.test.js
@@ -47,7 +47,7 @@ test('render etc', function () {
   assertPresent('.vmm-timeline', view.el);
   assertPresent('.timenav', view.el);
   assertPresent('.timenav', view.el);
-  equal(view.el.find('.marker.active h4').text(), '2011');
+  equal(view.$el.find('.marker.active h4').text(), '2011');
   view.remove();
 });
 
diff --git a/test/widget.filtereditor.test.js b/test/widget.filtereditor.test.js
index c1acbbff..656185c2 100644
--- a/test/widget.filtereditor.test.js
+++ b/test/widget.filtereditor.test.js
@@ -7,10 +7,10 @@ test('basics', function () {
   });
   $('.fixtures').append(view.el);
   assertPresent('.js-add-filter', view.elSidebar);
-  var $addForm = view.el.find('form.js-add');
+  var $addForm = view.$el.find('form.js-add');
   ok(!$addForm.is(":visible"));
-  view.el.find('.js-add-filter').click();
-  ok(!view.el.find('.js-add-filter').is(":visible"));
+  view.$el.find('.js-add-filter').click();
+  ok(!view.$el.find('.js-add-filter').is(":visible"));
   ok($addForm.is(":visible"));
 
   // submit the form
@@ -19,7 +19,7 @@ test('basics', function () {
 
   // now check we have new filter
   ok(!$addForm.is(":visible"));
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   equal($editForm.find('.filter-term').length, 1)
   equal(dataset.queryState.attributes.filters[0].field, 'country');
 
@@ -30,13 +30,13 @@ test('basics', function () {
   equal(dataset.records.length, 3);
 
   // now set a second range filter ...
-  view.el.find('.js-add-filter').click();
-  var $addForm = view.el.find('form.js-add');
+  view.$el.find('.js-add-filter').click();
+  var $addForm = view.$el.find('form.js-add');
   $addForm.find('select.fields').val('x');
   $addForm.find('select.filterType').val('range');
   $addForm.submit();
 
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   $editForm.find('.filter-range input').first().val('2');
   $editForm.find('.filter-range input').last().val('4');
   $editForm.submit();
@@ -45,15 +45,15 @@ test('basics', function () {
   equal(dataset.records.length, 2);
 
   // now remove filter
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   $editForm.find('.js-remove-filter').last().click();
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   equal($editForm.find('.filter').length, 1)
   equal(dataset.records.length, 3);
 
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   $editForm.find('.js-remove-filter').last().click();
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   equal($editForm.find('.filter').length, 0)
   equal(dataset.records.length, 6);
 
@@ -68,18 +68,18 @@ test('add 2 filters of same type', function () {
   $('.fixtures').append(view.el);
 
   // add 2 term filters
-  var $addForm = view.el.find('form.js-add');
-  view.el.find('.js-add-filter').click();
+  var $addForm = view.$el.find('form.js-add');
+  view.$el.find('.js-add-filter').click();
   $addForm.find('select.fields').val('country');
   $addForm.submit();
 
-  var $addForm = view.el.find('form.js-add');
-  view.el.find('.js-add-filter').click();
+  var $addForm = view.$el.find('form.js-add');
+  view.$el.find('.js-add-filter').click();
   $addForm.find('select.fields').val('id');
   $addForm.submit();
 
   var fields = [];
-  view.el.find('form.js-edit .filter-term input').each(function(idx, item) {
+  view.$el.find('form.js-edit .filter-term input').each(function(idx, item) {
     fields.push($(item).attr('data-filter-field'));
   });
   deepEqual(fields, ['country', 'id']);
@@ -94,14 +94,14 @@ test('geo_distance', function () {
   });
   $('.fixtures').append(view.el);
 
-  var $addForm = view.el.find('form.js-add');
+  var $addForm = view.$el.find('form.js-add');
   // submit the form
   $addForm.find('select.filterType').val('geo_distance');
   $addForm.find('select.fields').val('lon');
   $addForm.submit();
 
   // now check we have new filter
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   equal($editForm.find('.filter-geo_distance').length, 1)
   deepEqual(_.sortBy(_.keys(dataset.queryState.attributes.filters[0]),_.identity), 
             ["distance", "field", "point", "type", "unit"]);
diff --git a/test/widget.valuefilter.test.js b/test/widget.valuefilter.test.js
index 6b8a86a1..09fea2ed 100644
--- a/test/widget.valuefilter.test.js
+++ b/test/widget.valuefilter.test.js
@@ -7,10 +7,10 @@ test('basics', function () {
   });
   $('.fixtures').append(view.el);
   assertPresent('.js-add-filter', view.elSidebar);
-  var $addForm = view.el.find('form.js-add');
+  var $addForm = view.$el.find('form.js-add');
   ok(!$addForm.is(":visible"));
-  view.el.find('.js-add-filter').click();
-  ok(!view.el.find('.js-add-filter').is(":visible"));
+  view.$el.find('.js-add-filter').click();
+  ok(!view.$el.find('.js-add-filter').is(":visible"));
   ok($addForm.is(":visible"));
 
   // submit the form
@@ -19,7 +19,7 @@ test('basics', function () {
 
   // now check we have new filter
   ok(!$addForm.is(":visible"));
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   equal($editForm.find('.filter-term').length, 1);
   equal(dataset.queryState.attributes.filters[0].field, 'country');
 
@@ -30,9 +30,9 @@ test('basics', function () {
   equal(dataset.records.length, 3);
 
   // now remove filter
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   $editForm.find('.js-remove-filter').last().click();
-  $editForm = view.el.find('form.js-edit');
+  $editForm = view.$el.find('form.js-edit');
   equal($editForm.find('.filter').length, 0);
   equal(dataset.records.length, 6);
 
@@ -47,18 +47,19 @@ test('add 2 filters', function () {
   $('.fixtures').append(view.el);
 
   // add 2 term filters
-  var $addForm = view.el.find('form.js-add');
-  view.el.find('.js-add-filter').click();
+  var $addForm = view.$el.find('form.js-add');
+  view.$el.find('.js-add-filter').click();
+
   $addForm.find('select.fields').val('country');
   $addForm.submit();
 
-  $addForm = view.el.find('form.js-add');
-  view.el.find('.js-add-filter').click();
+  $addForm = view.$el.find('form.js-add');
+  view.$el.find('.js-add-filter').click();
   $addForm.find('select.fields').val('id');
   $addForm.submit();
 
   var fields = [];
-  view.el.find('form.js-edit .filter-term input').each(function(idx, item) {
+  view.$el.find('form.js-edit .filter-term input').each(function(idx, item) {
     fields.push($(item).attr('data-filter-field'));
   });
   deepEqual(fields, ['country', 'id']);