knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #353 from okfn/issue-350

Browse Source 
Stop clobbering view.el
This commit is contained in:
Rufus Pollock
2013-05-13 11:15:09 -07:00
parent 38256b455b 55f808b873
commit 2f099717bf
19 changed files with 112 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -41,6 +41,7 @@ Possible breaking changes
* Views no longer call render in initialize but must be called client code * 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` * 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) * 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) ### v0.5 - July 5th 2012 (first public release)

24
src/view.flot.js
View File

@@ -38,7 +38,6 @@ my.Flot = Backbone.View.extend({
var self = this; var self = this;
this.graphColors = ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"]; this.graphColors = ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"];
this.el = $(this.el);
_.bindAll(this, 'render', 'redraw', '_toolTip', '_xaxisLabel'); _.bindAll(this, 'render', 'redraw', '_toolTip', '_xaxisLabel');
this.needToRedraw = false; this.needToRedraw = false;
this.model.bind('change', this.render); this.model.bind('change', this.render);
@@ -64,15 +63,15 @@ my.Flot = Backbone.View.extend({
self.state.set(self.editor.state.toJSON()); self.state.set(self.editor.state.toJSON());
self.redraw(); self.redraw();
}); });
this.elSidebar = this.editor.el; this.elSidebar = this.editor.$el;
}, },
render: function() { render: function() {
var self = this; var self = this;
var tmplData = this.model.toTemplateJSON(); var tmplData = this.model.toTemplateJSON();
var htmls = Mustache.render(this.template, tmplData); var htmls = Mustache.render(this.template, tmplData);
$(this.el).html(htmls); this.$el.html(htmls);
this.$graph = this.el.find('.panel.graph'); this.$graph = this.$el.find('.panel.graph');
this.$graph.on("plothover", this._toolTip); this.$graph.on("plothover", this._toolTip);
return this; 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 // * 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 // 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' // * 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)) { if ((!areWeVisible || this.model.records.length === 0)) {
this.needToRedraw = true; this.needToRedraw = true;
return; return;
@@ -403,7 +402,6 @@ my.FlotControls = Backbone.View.extend({
initialize: function(options) { initialize: function(options) {
var self = this; var self = this;
this.el = $(this.el);
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this.model.fields.bind('reset', this.render); this.model.fields.bind('reset', this.render);
this.model.fields.bind('add', this.render); this.model.fields.bind('add', this.render);
@@ -415,7 +413,7 @@ my.FlotControls = Backbone.View.extend({
var self = this; var self = this;
var tmplData = this.model.toTemplateJSON(); var tmplData = this.model.toTemplateJSON();
var htmls = Mustache.render(this.template, tmplData); var htmls = Mustache.render(this.template, tmplData);
this.el.html(htmls); this.$el.html(htmls);
// set up editor from state // set up editor from state
if (this.state.get('graphType')) { 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 // Private: Helper function to select an option from a select list
// //
_selectOption: function(id,value){ _selectOption: function(id,value){
var options = this.el.find(id + ' select > option'); var options = this.$el.find(id + ' select > option');
if (options) { if (options) {
options.each(function(opt){ options.each(function(opt){
if (this.value == value) { if (this.value == value) {
@@ -451,16 +449,16 @@ my.FlotControls = Backbone.View.extend({
}, },
onEditorSubmit: function(e) { onEditorSubmit: function(e) {
var select = this.el.find('.editor-group select'); var select = this.$el.find('.editor-group select');
var $editor = this; var $editor = this;
var $series = this.el.find('.editor-series select'); var $series = this.$el.find('.editor-series select');
var series = $series.map(function () { var series = $series.map(function () {
return $(this).val(); return $(this).val();
}); });
var updatedState = { var updatedState = {
series: $.makeArray(series), series: $.makeArray(series),
group: this.el.find('.editor-group select').val(), group: this.$el.find('.editor-group select').val(),
graphType: this.el.find('.editor-type select').val() graphType: this.$el.find('.editor-type select').val()
}; };
this.state.set(updatedState); this.state.set(updatedState);
}, },
@@ -477,7 +475,7 @@ my.FlotControls = Backbone.View.extend({
}, this.model.toTemplateJSON()); }, this.model.toTemplateJSON());
var htmls = Mustache.render(this.templateSeriesEditor, data); 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; return this;
}, },

24
src/view.grid.js
View File

@@ -16,7 +16,6 @@ my.Grid = Backbone.View.extend({
initialize: function(modelEtc) { initialize: function(modelEtc) {
var self = this; var self = this;
this.el = $(this.el);
_.bindAll(this, 'render', 'onHorizontalScroll'); _.bindAll(this, 'render', 'onHorizontalScroll');
this.model.records.bind('add', this.render); this.model.records.bind('add', this.render);
this.model.records.bind('reset', this.render); this.model.records.bind('reset', this.render);
@@ -60,7 +59,7 @@ my.Grid = Backbone.View.extend({
onHorizontalScroll: function(e) { onHorizontalScroll: function(e) {
var currentScroll = $(e.target).scrollLeft(); 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 this.scrollbarDimensions = this.scrollbarDimensions || this._scrollbarSize(); // skip measurement if already have dimensions
var numFields = this.fields.length; 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) // 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); var width = parseInt(Math.max(50, fullWidth / numFields), 10);
// if columns extend outside viewport then remainder is 0 // if columns extend outside viewport then remainder is 0
var remainder = Math.max(fullWidth - numFields * width,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()); var htmls = Mustache.render(this.template, this.toTemplateJSON());
this.el.html(htmls); this.$el.html(htmls);
this.model.records.forEach(function(doc) { this.model.records.forEach(function(doc) {
var tr = $('<tr />'); var tr = $('<tr />');
self.el.find('tbody').append(tr); self.$el.find('tbody').append(tr);
var newView = new my.GridRow({ var newView = new my.GridRow({
model: doc, model: doc,
el: tr, el: tr,
@@ -128,12 +127,12 @@ my.Grid = Backbone.View.extend({
newView.render(); newView.render();
}); });
// hide extra header col if no scrollbar to avoid unsightly overhang // 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) { 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').toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
this.el.find('.recline-grid tbody').scroll(this.onHorizontalScroll); this.$el.find('.recline-grid tbody').scroll(this.onHorizontalScroll);
return this; return this;
}, },
@@ -169,7 +168,6 @@ my.GridRow = Backbone.View.extend({
initialize: function(initData) { initialize: function(initData) {
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this._fields = initData.fields; this._fields = initData.fields;
this.el = $(this.el);
this.model.bind('change', this.render); this.model.bind('change', this.render);
}, },
@@ -203,9 +201,9 @@ my.GridRow = Backbone.View.extend({
}, },
render: function() { 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()); var html = Mustache.render(this.template, this.toTemplateJSON());
$(this.el).html(html); this.$el.html(html);
return this; return this;
}, },
@@ -225,7 +223,7 @@ my.GridRow = Backbone.View.extend({
', ',
onEditClick: function(e) { 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) { if (editing.length > 0) {
editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden"); editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
} }

40
src/view.map.js
View File

@@ -51,7 +51,6 @@ my.Map = Backbone.View.extend({
initialize: function(options) { initialize: function(options) {
var self = this; var self = this;
this.el = $(this.el);
this.visible = true; this.visible = true;
this.mapReady = false; this.mapReady = false;
// this will be the Leaflet L.Map object (setup below) // this will be the Leaflet L.Map object (setup below)
@@ -103,7 +102,7 @@ my.Map = Backbone.View.extend({
this.state.bind('change', function() { this.state.bind('change', function() {
self.redraw(); self.redraw();
}); });
this.elSidebar = this.menu.el; this.elSidebar = this.menu.$el;
}, },
// ## Customization Functions // ## Customization Functions
@@ -173,8 +172,8 @@ my.Map = Backbone.View.extend({
render: function() { render: function() {
var self = this; var self = this;
var htmls = Mustache.render(this.template, this.model.toTemplateJSON()); var htmls = Mustache.render(this.template, this.model.toTemplateJSON());
$(this.el).html(htmls); this.$el.html(htmls);
this.$map = this.el.find('.panel.map'); this.$map = this.$el.find('.panel.map');
this.redraw(); this.redraw();
return this; return this;
}, },
@@ -546,7 +545,6 @@ my.MapMenu = Backbone.View.extend({
initialize: function(options) { initialize: function(options) {
var self = this; var self = this;
this.el = $(this.el);
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this.model.fields.bind('change', this.render); this.model.fields.bind('change', this.render);
this.state = new recline.Model.ObjectState(options.state); this.state = new recline.Model.ObjectState(options.state);
@@ -560,27 +558,27 @@ my.MapMenu = Backbone.View.extend({
render: function() { render: function() {
var self = this; var self = this;
var htmls = Mustache.render(this.template, this.model.toTemplateJSON()); 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._geomReady() && this.model.fields.length){
if (this.state.get('geomField')){ if (this.state.get('geomField')){
this._selectOption('editor-geom-field',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{ } else{
this._selectOption('editor-lon-field',this.state.get('lonField')); this._selectOption('editor-lon-field',this.state.get('lonField'));
this._selectOption('editor-lat-field',this.state.get('latField')); 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')) { if (this.state.get('autoZoom')) {
this.el.find('#editor-auto-zoom').attr('checked', 'checked'); this.$el.find('#editor-auto-zoom').attr('checked', 'checked');
} else { } else {
this.el.find('#editor-auto-zoom').removeAttr('checked'); this.$el.find('#editor-auto-zoom').removeAttr('checked');
} }
if (this.state.get('cluster')) { if (this.state.get('cluster')) {
this.el.find('#editor-cluster').attr('checked', 'checked'); this.$el.find('#editor-cluster').attr('checked', 'checked');
} else { } else {
this.el.find('#editor-cluster').removeAttr('checked'); this.$el.find('#editor-cluster').removeAttr('checked');
} }
return this; return this;
}, },
@@ -599,17 +597,17 @@ my.MapMenu = Backbone.View.extend({
// //
onEditorSubmit: function(e){ onEditorSubmit: function(e){
e.preventDefault(); 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({ 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, lonField: null,
latField: null latField: null
}); });
} else { } else {
this.state.set({ this.state.set({
geomField: null, geomField: null,
lonField: this.el.find('.editor-lon-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() latField: this.$el.find('.editor-lat-field > select > option:selected').val()
}); });
} }
return false; return false;
@@ -620,11 +618,11 @@ my.MapMenu = Backbone.View.extend({
// //
onFieldTypeChange: function(e){ onFieldTypeChange: function(e){
if (e.target.value == 'geom'){ if (e.target.value == 'geom'){
this.el.find('.editor-field-type-geom').show(); this.$el.find('.editor-field-type-geom').show();
this.el.find('.editor-field-type-latlon').hide(); this.$el.find('.editor-field-type-latlon').hide();
} else { } else {
this.el.find('.editor-field-type-geom').hide(); this.$el.find('.editor-field-type-geom').hide();
this.el.find('.editor-field-type-latlon').show(); 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 // Private: Helper function to select an option from a select list
// //
_selectOption: function(id,value){ _selectOption: function(id,value){
var options = this.el.find('.' + id + ' > select > option'); var options = this.$el.find('.' + id + ' > select > option');
if (options){ if (options){
options.each(function(opt){ options.each(function(opt){
if (this.value == value) { if (this.value == value) {

27
src/view.multiview.js
View File

@@ -130,7 +130,6 @@ my.MultiView = Backbone.View.extend({
initialize: function(options) { initialize: function(options) {
var self = this; var self = this;
this.el = $(this.el);
this._setupState(options.state); this._setupState(options.state);
// Hash of 'page' views (i.e. those for whole page) keyed by page name // 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() { this.model.bind('query:done', function() {
self.clearNotifications(); 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) { this.model.bind('query:fail', function(error) {
self.clearNotifications(); self.clearNotifications();
@@ -236,7 +235,7 @@ my.MultiView = Backbone.View.extend({
}, },
setReadOnly: function() { setReadOnly: function() {
this.el.addClass('recline-read-only'); this.$el.addClass('recline-read-only');
}, },
render: function() { render: function() {
@@ -244,11 +243,11 @@ my.MultiView = Backbone.View.extend({
tmplData.views = this.pageViews; tmplData.views = this.pageViews;
tmplData.sidebarViews = this.sidebarViews; tmplData.sidebarViews = this.sidebarViews;
var template = Mustache.render(this.template, tmplData); var template = Mustache.render(this.template, tmplData);
$(this.el).html(template); this.$el.html(template);
// now create and append other views // now create and append other views
var $dataViewContainer = this.el.find('.data-view-container'); var $dataViewContainer = this.$el.find('.data-view-container');
var $dataSidebar = this.el.find('.data-view-sidebar'); var $dataSidebar = this.$el.find('.data-view-sidebar');
// the main views // the main views
_.each(this.pageViews, function(view, pageName) { _.each(this.pageViews, function(view, pageName) {
@@ -260,25 +259,25 @@ my.MultiView = Backbone.View.extend({
}); });
_.each(this.sidebarViews, function(view) { _.each(this.sidebarViews, function(view) {
this['$'+view.id] = view.view.el; this['$'+view.id] = view.view.$el;
$dataSidebar.append(view.view.el); $dataSidebar.append(view.view.el);
}, this); }, this);
var pager = new recline.View.Pager({ var pager = new recline.View.Pager({
model: this.model.queryState 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({ var queryEditor = new recline.View.QueryEditor({
model: this.model.queryState 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 // hide the sidebar if empty
_showHideSidebar: function() { _showHideSidebar: function() {
var $dataSidebar = this.el.find('.data-view-sidebar'); var $dataSidebar = this.$el.find('.data-view-sidebar');
var visibleChildren = $dataSidebar.children().filter(function() { var visibleChildren = $dataSidebar.children().filter(function() {
return $(this).css("display") != "none"; return $(this).css("display") != "none";
}).length; }).length;
@@ -291,19 +290,19 @@ my.MultiView = Backbone.View.extend({
}, },
updateNav: function(pageName) { updateNav: function(pageName) {
this.el.find('.navigation a').removeClass('active'); this.$el.find('.navigation a').removeClass('active');
var $el = this.el.find('.navigation a[data-view="' + pageName + '"]'); var $el = this.$el.find('.navigation a[data-view="' + pageName + '"]');
$el.addClass('active'); $el.addClass('active');
// add/remove sidebars and hide inactive views // add/remove sidebars and hide inactive views
_.each(this.pageViews, function(view, idx) { _.each(this.pageViews, function(view, idx) {
if (view.id === pageName) { if (view.id === pageName) {
view.view.el.show(); view.view.$el.show();
if (view.view.elSidebar) { if (view.view.elSidebar) {
view.view.elSidebar.show(); view.view.elSidebar.show();
} }
} else { } else {
view.view.el.hide(); view.view.$el.hide();
if (view.view.elSidebar) { if (view.view.elSidebar) {
view.view.elSidebar.hide(); view.view.elSidebar.hide();
} }

3
src/view.slickgrid.js
View File

@@ -34,8 +34,7 @@ this.recline.View = this.recline.View || {};
my.SlickGrid = Backbone.View.extend({ my.SlickGrid = Backbone.View.extend({
initialize: function(modelEtc) { initialize: function(modelEtc) {
var self = this; var self = this;
this.el = $(this.el); this.$el.addClass('recline-slickgrid');
this.el.addClass('recline-slickgrid');
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this.model.records.bind('add', this.render); this.model.records.bind('add', this.render);
this.model.records.bind('reset', this.render); this.model.records.bind('reset', this.render);

5
src/view.timeline.js
View File

@@ -28,7 +28,6 @@ my.Timeline = Backbone.View.extend({
initialize: function(options) { initialize: function(options) {
var self = this; var self = this;
this.el = $(this.el);
this.timeline = new VMM.Timeline(); this.timeline = new VMM.Timeline();
this._timelineIsInitialized = false; this._timelineIsInitialized = false;
this.model.fields.bind('reset', function() { this.model.fields.bind('reset', function() {
@@ -51,7 +50,7 @@ my.Timeline = Backbone.View.extend({
render: function() { render: function() {
var tmplData = {}; var tmplData = {};
var htmls = Mustache.render(this.template, 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 $ // can only call _initTimeline once view in DOM as Timeline uses $
// internally to look up element // internally to look up element
if ($(this.elementId).length > 0) { if ($(this.elementId).length > 0) {
@@ -67,7 +66,7 @@ my.Timeline = Backbone.View.extend({
}, },
_initTimeline: function() { _initTimeline: function() {
var $timeline = this.el.find(this.elementId); var $timeline = this.$el.find(this.elementId);
var data = this._timelineJSON(); var data = this._timelineJSON();
this.timeline.init(data, this.elementId, this.state.get("timelineJSOptions")); this.timeline.init(data, this.elementId, this.state.get("timelineJSOptions"));
this._timelineIsInitialized = true this._timelineIsInitialized = true

9
src/widget.facetviewer.js
View File

@@ -42,7 +42,6 @@ my.FacetViewer = Backbone.View.extend({
}, },
initialize: function(model) { initialize: function(model) {
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this.el = $(this.el);
this.model.facets.bind('all', this.render); this.model.facets.bind('all', this.render);
this.model.fields.bind('all', this.render); this.model.fields.bind('all', this.render);
this.render(); this.render();
@@ -61,17 +60,17 @@ my.FacetViewer = Backbone.View.extend({
return facet; return facet;
}); });
var templated = Mustache.render(this.template, tmplData); var templated = Mustache.render(this.template, tmplData);
this.el.html(templated); this.$el.html(templated);
// are there actually any facets to show? // are there actually any facets to show?
if (this.model.facets.length > 0) { if (this.model.facets.length > 0) {
this.el.show(); this.$el.show();
} else { } else {
this.el.hide(); this.$el.hide();
} }
}, },
onHide: function(e) { onHide: function(e) {
e.preventDefault(); e.preventDefault();
this.el.hide(); this.$el.hide();
}, },
onFacetFilter: function(e) { onFacetFilter: function(e) {
e.preventDefault(); e.preventDefault();

5
src/widget.fields.js
View File

@@ -60,7 +60,6 @@ my.Fields = Backbone.View.extend({
initialize: function(model) { initialize: function(model) {
var self = this; var self = this;
this.el = $(this.el);
_.bindAll(this, 'render'); _.bindAll(this, 'render');
// TODO: this is quite restrictive in terms of when it is re-run // 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.model.getFieldsSummary();
self.render(); self.render();
}); });
this.el.find('.collapse').collapse(); this.$el.find('.collapse').collapse();
this.render(); this.render();
}, },
render: function() { render: function() {
@@ -89,7 +88,7 @@ my.Fields = Backbone.View.extend({
tmplData.fields.push(out); tmplData.fields.push(out);
}); });
var templated = Mustache.render(this.template, tmplData); var templated = Mustache.render(this.template, tmplData);
this.el.html(templated); this.$el.html(templated);
} }
}); });

5
src/widget.filtereditor.js
View File

@@ -89,7 +89,6 @@ my.FilterEditor = Backbone.View.extend({
'submit form.js-add': 'onAddFilter' 'submit form.js-add': 'onAddFilter'
}, },
initialize: function() { initialize: function() {
this.el = $(this.el);
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this.model.fields.bind('all', this.render); this.model.fields.bind('all', this.render);
this.model.queryState.bind('change', 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); return Mustache.render(self.filterTemplates[this.type], this);
}; };
var out = Mustache.render(this.template, tmplData); var out = Mustache.render(this.template, tmplData);
this.el.html(out); this.$el.html(out);
}, },
onAddFilterShow: function(e) { onAddFilterShow: function(e) {
e.preventDefault(); e.preventDefault();
var $target = $(e.target); var $target = $(e.target);
$target.hide(); $target.hide();
this.el.find('form.js-add').show(); this.$el.find('form.js-add').show();
}, },
onAddFilter: function(e) { onAddFilter: function(e) {
e.preventDefault(); e.preventDefault();

7
src/widget.pager.js
View File

@@ -25,14 +25,13 @@ my.Pager = Backbone.View.extend({
initialize: function() { initialize: function() {
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this.el = $(this.el);
this.model.bind('change', this.render); this.model.bind('change', this.render);
this.render(); this.render();
}, },
onFormSubmit: function(e) { onFormSubmit: function(e) {
e.preventDefault(); e.preventDefault();
var newFrom = parseInt(this.el.find('input[name="from"]').val()); var newFrom = parseInt(this.$el.find('input[name="from"]').val());
var newSize = parseInt(this.el.find('input[name="to"]').val()) - newFrom; var newSize = parseInt(this.$el.find('input[name="to"]').val()) - newFrom;
newFrom = Math.max(newFrom, 0); newFrom = Math.max(newFrom, 0);
newSize = Math.max(newSize, 1); newSize = Math.max(newSize, 1);
this.model.set({size: newSize, from: newFrom}); this.model.set({size: newSize, from: newFrom});
@@ -53,7 +52,7 @@ my.Pager = Backbone.View.extend({
var tmplData = this.model.toJSON(); var tmplData = this.model.toJSON();
tmplData.to = this.model.get('from') + this.model.get('size'); tmplData.to = this.model.get('from') + this.model.get('size');
var templated = Mustache.render(this.template, tmplData); var templated = Mustache.render(this.template, tmplData);
this.el.html(templated); this.$el.html(templated);
} }
}); });

5
src/widget.queryeditor.js
View File

@@ -24,19 +24,18 @@ my.QueryEditor = Backbone.View.extend({
initialize: function() { initialize: function() {
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this.el = $(this.el);
this.model.bind('change', this.render); this.model.bind('change', this.render);
this.render(); this.render();
}, },
onFormSubmit: function(e) { onFormSubmit: function(e) {
e.preventDefault(); 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}); this.model.set({q: query});
}, },
render: function() { render: function() {
var tmplData = this.model.toJSON(); var tmplData = this.model.toJSON();
var templated = Mustache.render(this.template, tmplData); var templated = Mustache.render(this.template, tmplData);
this.el.html(templated); this.$el.html(templated);
} }
}); });

5
src/widget.valuefilter.js
View File

@@ -51,7 +51,6 @@ my.ValueFilter = Backbone.View.extend({
'submit form.js-add': 'onAddFilter' 'submit form.js-add': 'onAddFilter'
}, },
initialize: function() { initialize: function() {
this.el = $(this.el);
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this.model.fields.bind('all', this.render); this.model.fields.bind('all', this.render);
this.model.queryState.bind('change', 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); return Mustache.render(self.filterTemplates.term, this);
}; };
var out = Mustache.render(this.template, tmplData); var out = Mustache.render(this.template, tmplData);
this.el.html(out); this.$el.html(out);
}, },
updateFilter: function(input) { updateFilter: function(input) {
var self = this; var self = this;
@@ -85,7 +84,7 @@ my.ValueFilter = Backbone.View.extend({
e.preventDefault(); e.preventDefault();
var $target = $(e.target); var $target = $(e.target);
$target.hide(); $target.hide();
this.el.find('form.js-add').show(); this.$el.find('form.js-add').show();
}, },
onAddFilter: function(e) { onAddFilter: function(e) {
e.preventDefault(); e.preventDefault();

4
test/view.flot.test.js
View File

@@ -29,8 +29,8 @@ test('initialize', function () {
// check we have updated editor with state info // check we have updated editor with state info
equal(view.elSidebar.find('.editor-type select').val(), 'lines'); equal(view.elSidebar.find('.editor-type select').val(), 'lines');
equal(view.elSidebar.find('.editor-group select').val(), 'x'); equal(view.elSidebar.find('.editor-group select').val(), 'x');
var out = _.map(view.elSidebar.find('.editor-series select'), function($el) { var out = _.map(view.elSidebar.find('.editor-series select'), function(el) {
return $($el).val(); return $(el).val();
}); });
deepEqual(out, ['y', 'z']); deepEqual(out, ['y', 'z']);

8
test/view.map.test.js
View File

@@ -162,13 +162,13 @@ test('Popup', function () {
$('.fixtures').append(view.el); $('.fixtures').append(view.el);
view.render(); view.render();
var marker = view.el.find('.leaflet-marker-icon').first(); var marker = view.$el.find('.leaflet-marker-icon').first();
assertPresent(marker); assertPresent(marker);
_.values(view.features._layers)[0].fire('click'); _.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); assertPresent(popup);
@@ -195,9 +195,9 @@ test('Popup - Custom', function () {
}; };
view.render(); 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'); _.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); assertPresent(popup);

4
test/view.multiview.test.js
View File

@@ -60,9 +60,9 @@ test('initialize state', function () {
ok(explorer.state.get('currentView'), 'graph'); ok(explorer.state.get('currentView'), 'graph');
// check the correct view is visible // 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); 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); ok(!(_.contains(css, 'active')), css);
// check pass through of view config // check pass through of view config

2
test/view.timeline.test.js
View File

@@ -47,7 +47,7 @@ test('render etc', function () {
assertPresent('.vmm-timeline', view.el); assertPresent('.vmm-timeline', view.el);
assertPresent('.timenav', view.el); assertPresent('.timenav', 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(); view.remove();
}); });

36
test/widget.filtereditor.test.js
View File

@@ -7,10 +7,10 @@ test('basics', function () {
}); });
$('.fixtures').append(view.el); $('.fixtures').append(view.el);
assertPresent('.js-add-filter', view.elSidebar); 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")); ok(!$addForm.is(":visible"));
view.el.find('.js-add-filter').click(); view.$el.find('.js-add-filter').click();
ok(!view.el.find('.js-add-filter').is(":visible")); ok(!view.$el.find('.js-add-filter').is(":visible"));
ok($addForm.is(":visible")); ok($addForm.is(":visible"));
// submit the form // submit the form
@@ -19,7 +19,7 @@ test('basics', function () {
// now check we have new filter // now check we have new filter
ok(!$addForm.is(":visible")); 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($editForm.find('.filter-term').length, 1)
equal(dataset.queryState.attributes.filters[0].field, 'country'); equal(dataset.queryState.attributes.filters[0].field, 'country');
@@ -30,13 +30,13 @@ test('basics', function () {
equal(dataset.records.length, 3); equal(dataset.records.length, 3);
// now set a second range filter ... // now set a second range filter ...
view.el.find('.js-add-filter').click(); view.$el.find('.js-add-filter').click();
var $addForm = view.el.find('form.js-add'); var $addForm = view.$el.find('form.js-add');
$addForm.find('select.fields').val('x'); $addForm.find('select.fields').val('x');
$addForm.find('select.filterType').val('range'); $addForm.find('select.filterType').val('range');
$addForm.submit(); $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').first().val('2');
$editForm.find('.filter-range input').last().val('4'); $editForm.find('.filter-range input').last().val('4');
$editForm.submit(); $editForm.submit();
@@ -45,15 +45,15 @@ test('basics', function () {
equal(dataset.records.length, 2); equal(dataset.records.length, 2);
// now remove filter // 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.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($editForm.find('.filter').length, 1)
equal(dataset.records.length, 3); 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.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($editForm.find('.filter').length, 0)
equal(dataset.records.length, 6); equal(dataset.records.length, 6);
@@ -68,18 +68,18 @@ test('add 2 filters of same type', function () {
$('.fixtures').append(view.el); $('.fixtures').append(view.el);
// add 2 term filters // add 2 term filters
var $addForm = view.el.find('form.js-add'); var $addForm = view.$el.find('form.js-add');
view.el.find('.js-add-filter').click(); view.$el.find('.js-add-filter').click();
$addForm.find('select.fields').val('country'); $addForm.find('select.fields').val('country');
$addForm.submit(); $addForm.submit();
var $addForm = view.el.find('form.js-add'); var $addForm = view.$el.find('form.js-add');
view.el.find('.js-add-filter').click(); view.$el.find('.js-add-filter').click();
$addForm.find('select.fields').val('id'); $addForm.find('select.fields').val('id');
$addForm.submit(); $addForm.submit();
var fields = []; 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')); fields.push($(item).attr('data-filter-field'));
}); });
deepEqual(fields, ['country', 'id']); deepEqual(fields, ['country', 'id']);
@@ -94,14 +94,14 @@ test('geo_distance', function () {
}); });
$('.fixtures').append(view.el); $('.fixtures').append(view.el);
var $addForm = view.el.find('form.js-add'); var $addForm = view.$el.find('form.js-add');
// submit the form // submit the form
$addForm.find('select.filterType').val('geo_distance'); $addForm.find('select.filterType').val('geo_distance');
$addForm.find('select.fields').val('lon'); $addForm.find('select.fields').val('lon');
$addForm.submit(); $addForm.submit();
// now check we have new filter // 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) equal($editForm.find('.filter-geo_distance').length, 1)
deepEqual(_.sortBy(_.keys(dataset.queryState.attributes.filters[0]),_.identity), deepEqual(_.sortBy(_.keys(dataset.queryState.attributes.filters[0]),_.identity),
["distance", "field", "point", "type", "unit"]); ["distance", "field", "point", "type", "unit"]);

23
test/widget.valuefilter.test.js
View File

@@ -7,10 +7,10 @@ test('basics', function () {
}); });
$('.fixtures').append(view.el); $('.fixtures').append(view.el);
assertPresent('.js-add-filter', view.elSidebar); 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")); ok(!$addForm.is(":visible"));
view.el.find('.js-add-filter').click(); view.$el.find('.js-add-filter').click();
ok(!view.el.find('.js-add-filter').is(":visible")); ok(!view.$el.find('.js-add-filter').is(":visible"));
ok($addForm.is(":visible")); ok($addForm.is(":visible"));
// submit the form // submit the form
@@ -19,7 +19,7 @@ test('basics', function () {
// now check we have new filter // now check we have new filter
ok(!$addForm.is(":visible")); 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($editForm.find('.filter-term').length, 1);
equal(dataset.queryState.attributes.filters[0].field, 'country'); equal(dataset.queryState.attributes.filters[0].field, 'country');
@@ -30,9 +30,9 @@ test('basics', function () {
equal(dataset.records.length, 3); equal(dataset.records.length, 3);
// now remove filter // 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.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($editForm.find('.filter').length, 0);
equal(dataset.records.length, 6); equal(dataset.records.length, 6);
@@ -47,18 +47,19 @@ test('add 2 filters', function () {
$('.fixtures').append(view.el); $('.fixtures').append(view.el);
// add 2 term filters // add 2 term filters
var $addForm = view.el.find('form.js-add'); var $addForm = view.$el.find('form.js-add');
view.el.find('.js-add-filter').click(); view.$el.find('.js-add-filter').click();
$addForm.find('select.fields').val('country'); $addForm.find('select.fields').val('country');
$addForm.submit(); $addForm.submit();
$addForm = view.el.find('form.js-add'); $addForm = view.$el.find('form.js-add');
view.el.find('.js-add-filter').click(); view.$el.find('.js-add-filter').click();
$addForm.find('select.fields').val('id'); $addForm.find('select.fields').val('id');
$addForm.submit(); $addForm.submit();
var fields = []; 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')); fields.push($(item).attr('data-filter-field'));
}); });
deepEqual(fields, ['country', 'id']); deepEqual(fields, ['country', 'id']);