From 8ea1a81c0acfe3727b7e3faad177dfd800c273ae Mon Sep 17 00:00:00 2001 From: Dan Wilson Date: Mon, 13 May 2013 17:59:03 +0100 Subject: [PATCH 1/2] Updated code and tests to stop recline clobbering view.el. Issue #350. --- src/view.flot.js | 24 +++++++++---------- src/view.grid.js | 24 +++++++++---------- src/view.map.js | 40 +++++++++++++++----------------- src/view.multiview.js | 27 +++++++++++---------- src/view.slickgrid.js | 3 +-- src/view.timeline.js | 5 ++-- src/widget.facetviewer.js | 9 ++++--- src/widget.fields.js | 5 ++-- src/widget.filtereditor.js | 5 ++-- src/widget.pager.js | 7 +++--- src/widget.queryeditor.js | 5 ++-- src/widget.valuefilter.js | 5 ++-- test/view.flot.test.js | 4 ++-- test/view.map.test.js | 8 +++---- test/view.multiview.test.js | 4 ++-- test/view.timeline.test.js | 2 +- test/widget.filtereditor.test.js | 36 ++++++++++++++-------------- test/widget.valuefilter.test.js | 23 +++++++++--------- 18 files changed, 111 insertions(+), 125 deletions(-) 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 = $(''); - 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']); From 55f808b8731c38955494a3baf62e379a58d813cf Mon Sep 17 00:00:00 2001 From: Dan Wilson Date: Mon, 13 May 2013 18:48:32 +0100 Subject: [PATCH 2/2] Updated the README to mention this breaking change. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3757ee81..177f6b1d 100755 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ Possible breaking changes * Views no longer call render in initialize but must be called client code * Backend.Memory.Store attribute for holding 'records' renamed to `records` from `data` * Require new underscore.deferred vendor library for all use (jQuery no longer required if just using recline.dataset.js) +* View.el is now the raw DOM element. If you want a jQuery-wrapped version, use view.$el. #350 ### v0.5 - July 5th 2012 (first public release)