[#25,refactor][s]: rename header(s) -> field(s) throughout.

demo/js/app.js

@@ -51,7 +51,7 @@ function demoDataset() {
       title: 'My Test Dataset'
       , name: '1-my-test-dataset' 
       , id: datasetId
-      , headers: ['x', 'y', 'z']
+      , fields: ['x', 'y', 'z']
     },
     documents: [
       {id: 0, x: 1, y: 2, z: 3}

src/backend.js

@@ -48,7 +48,7 @@ this.recline.Model = this.recline.Model || {};
   //
   // To use it you should provide in your constructor data:
   // 
-  //   * metadata (including headers array)
+  //   * metadata (including fields array)
   //   * documents: list of hashes, each hash being one doc. A doc *must* have an id attribute which is unique.
   //
   //  Example:
@@ -60,7 +60,7 @@ this.recline.Model = this.recline.Model || {};
   //    metadata: {
   //      id: 'my-id',
   //      title: 'My Title',
-  //      headers: ['x', 'y', 'z'],
+  //      fields: ['x', 'y', 'z'],
   //    },
   //    documents: [
   //        {id: 0, x: 1, y: 2, z: 3},
@@ -153,11 +153,11 @@ this.recline.Model = this.recline.Model || {};
           });
           var dfd = $.Deferred();
           wrapInTimeout(jqxhr).done(function(schema) {
-            headers = _.map(schema.data, function(item) {
+            fields = _.map(schema.data, function(item) {
               return item.name;
             });
             model.set({
-              headers: headers
+              fields: fields
             });
             model.docCount = schema.count;
             dfd.resolve(model, jqxhr);
@@ -228,7 +228,7 @@ this.recline.Model = this.recline.Model || {};
           var dfd = $.Deferred();
           wrapInTimeout(jqxhr).done(function(results) {
             model.set({
-              headers: results.fields
+              fields: results.fields
             });
             dfd.resolve(model, jqxhr);
           })
@@ -293,7 +293,7 @@ this.recline.Model = this.recline.Model || {};
 
         $.getJSON(model.get('url'), function(d) {
           result = self.gdocsToJavascript(d);
-          model.set({'headers': result.header});
+          model.set({'fields': result.field});
           // cache data onto dataset (we have loaded whole gdoc it seems!)
           model._dataCache = result.data;
           dfd.resolve(model);
@@ -303,9 +303,9 @@ this.recline.Model = this.recline.Model || {};
 
     query: function(dataset, queryObj) { 
       var dfd = $.Deferred();
-      var fields = dataset.get('headers');
+      var fields = dataset.get('fields');
 
-      // zip the field headers with the data rows to produce js objs
+      // zip the fields with the data rows to produce js objs
       // TODO: factor this out as a common method with other backends
       var objs = _.map(dataset._dataCache, function (d) { 
         var obj = {};
@@ -318,9 +318,9 @@ this.recline.Model = this.recline.Model || {};
     gdocsToJavascript:  function(gdocsSpreadsheet) {
       /*
          :options: (optional) optional argument dictionary:
-         columnsToUse: list of columns to use (specified by header names)
+         columnsToUse: list of columns to use (specified by field names)
          colTypes: dictionary (with column names as keys) specifying types (e.g. range, percent for use in conversion).
-         :return: tabular data object (hash with keys: header and data).
+         :return: tabular data object (hash with keys: field and data).
 
          Issues: seems google docs return columns in rows in random order and not even sure whether consistent across rows.
          */
@@ -329,7 +329,7 @@ this.recline.Model = this.recline.Model || {};
         options = arguments[1];
       }
       var results = {
-        'header': [],
+        'field': [],
         'data': []
       };
       // default is no special info on type of columns
@@ -340,14 +340,14 @@ this.recline.Model = this.recline.Model || {};
       // either extract column headings from spreadsheet directly, or used supplied ones
       if (options.columnsToUse) {
         // columns set to subset supplied
-        results.header = options.columnsToUse;
+        results.field = options.columnsToUse;
       } else {
         // set columns to use to be all available
         if (gdocsSpreadsheet.feed.entry.length > 0) {
           for (var k in gdocsSpreadsheet.feed.entry[0]) {
             if (k.substr(0, 3) == 'gsx') {
               var col = k.substr(4)
-                results.header.push(col);
+                results.field.push(col);
             }
           }
         }
@@ -357,8 +357,8 @@ this.recline.Model = this.recline.Model || {};
       var rep = /^([\d\.\-]+)\%$/;
       $.each(gdocsSpreadsheet.feed.entry, function (i, entry) {
         var row = [];
-        for (var k in results.header) {
+        for (var k in results.field) {
-          var col = results.header[k];
+          var col = results.field[k];
           var _keyname = 'gsx$' + col;
           var value = entry[_keyname]['$t'];
           // if labelled as % and value contains %, convert

src/model.js

@@ -6,6 +6,17 @@ this.recline.Model = this.recline.Model || {};
 
 // ## A Dataset model
 //
+// A model must have the following (Backbone) attributes:
+//
+// * fields: (aka columns) is the array of fields (column) to display. Each
+// entry in fields is a hash having at a minimum:
+//  * id: a unique identifer for this field- usually this should match the key in the documents hash
+//  * label: the visible label used for this field
+//  * type: the type of the data
+//  * data_key: the key used in the documents (usually this will be the same as
+//  id but having this allows us to set more than one column reading the same
+//  field. 
+//
 // Other than standard list of Backbone methods it has two important attributes:
 //
 // * currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)

src/view-flot-graph.js

@@ -44,9 +44,9 @@ my.FlotGraph = Backbone.View.extend({
         <label>Group Column (x-axis)</label> \
         <div class="input editor-group"> \
           <select> \
-          {{#headers}} \
+          {{#fields}} \
           <option value="{{.}}">{{.}}</option> \
-          {{/headers}} \
+          {{/fields}} \
           </select> \
         </div> \
         <div class="editor-series-group"> \
@@ -54,9 +54,9 @@ my.FlotGraph = Backbone.View.extend({
             <label>Series <span>A (y-axis)</span></label> \
             <div class="input"> \
               <select> \
-              {{#headers}} \
+              {{#fields}} \
               <option value="{{.}}">{{.}}</option> \
-              {{/headers}} \
+              {{/fields}} \
               </select> \
             </div> \
           </div> \
@@ -86,7 +86,7 @@ my.FlotGraph = Backbone.View.extend({
     var self = this;
     this.el = $(this.el);
     _.bindAll(this, 'render', 'redraw');
-    // we need the model.headers to render properly
+    // we need the model.fields to render properly
     this.model.bind('change', this.render);
     this.model.currentDocuments.bind('add', this.redraw);
     this.model.currentDocuments.bind('reset', this.redraw);

src/view.js

@@ -112,7 +112,7 @@ my.DataExplorer = Backbone.View.extend({
     this.router = new Backbone.Router();
     this.setupRouting();
 
-    // retrieve basic data like headers etc
+    // retrieve basic data like fields etc
     // note this.model and dataset returned are the same
     this.model.fetch()
       .done(function(dataset) {
@@ -207,7 +207,7 @@ my.DataTable = Backbone.View.extend({
     this.model.currentDocuments.bind('reset', this.render);
     this.model.currentDocuments.bind('remove', this.render);
     this.state = {};
-    this.hiddenHeaders = [];
+    this.hiddenFields = [];
   },
 
   events: {
@@ -246,7 +246,7 @@ my.DataTable = Backbone.View.extend({
   
   onRootHeaderClick: function(e) {
     util.position('data-table-menu', e);
-    util.render('rootActions', 'data-table-menu', {'columns': this.hiddenHeaders});
+    util.render('rootActions', 'data-table-menu', {'columns': this.hiddenFields});
   },
 
   onMenuClick: function(e) {
@@ -331,12 +331,12 @@ my.DataTable = Backbone.View.extend({
   },
   
   hideColumn: function() {
-    this.hiddenHeaders.push(this.state.currentColumn);
+    this.hiddenFields.push(this.state.currentColumn);
     this.render();
   },
   
   showColumn: function(e) {
-    this.hiddenHeaders = _.without(this.hiddenHeaders, $(e.target).data('column'));
+    this.hiddenFields = _.without(this.hiddenFields, $(e.target).data('column'));
     this.render();
   },
 
@@ -356,7 +356,7 @@ my.DataTable = Backbone.View.extend({
               </div> \
             </th> \
           {{/notEmpty}} \
-          {{#headers}} \
+          {{#fields}} \
             <th class="column-header"> \
               <div class="column-header-title"> \
                 <a class="column-header-menu"></a> \
@@ -364,7 +364,7 @@ my.DataTable = Backbone.View.extend({
               </div> \
               </div> \
             </th> \
-          {{/headers}} \
+          {{/fields}} \
         </tr> \
       </thead> \
       <tbody></tbody> \
@@ -373,14 +373,14 @@ my.DataTable = Backbone.View.extend({
 
   toTemplateJSON: function() {
     var modelData = this.model.toJSON()
-    modelData.notEmpty = ( this.headers.length > 0 )
+    modelData.notEmpty = ( this.fields.length > 0 )
-    modelData.headers = this.headers;
+    modelData.fields = this.fields;
     return modelData;
   },
   render: function() {
     var self = this;
-    this.headers = _.filter(this.model.get('headers'), function(header) {
+    this.fields = _.filter(this.model.get('fields'), function(field) {
-      return _.indexOf(self.hiddenHeaders, header) == -1;
+      return _.indexOf(self.hiddenFields, field) == -1;
     });
     var htmls = $.mustache(this.template, this.toTemplateJSON());
     this.el.html(htmls);
@@ -390,11 +390,11 @@ my.DataTable = Backbone.View.extend({
       var newView = new my.DataTableRow({
           model: doc,
           el: tr,
-          headers: self.headers,
+          fields: self.fields,
         });
       newView.render();
     });
-    this.el.toggleClass('no-hidden', (self.hiddenHeaders.length == 0));
+    this.el.toggleClass('no-hidden', (self.hiddenFields.length == 0));
     return this;
   }
 });
@@ -402,11 +402,11 @@ my.DataTable = Backbone.View.extend({
 // ## DataTableRow View for rendering an individual document.
 //
 // Since we want this to update in place it is up to creator to provider the element to attach to.
-// In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.
+// In addition you must pass in a fields in the constructor options. This should be list of fields for the DataTable.
 my.DataTableRow = Backbone.View.extend({
   initialize: function(options) {
     _.bindAll(this, 'render');
-    this._headers = options.headers;
+    this._fields = options.fields;
     this.el = $(this.el);
     this.model.bind('change', this.render);
   },
@@ -414,7 +414,7 @@ my.DataTableRow = Backbone.View.extend({
   template: ' \
       <td><a class="row-header-menu"></a></td> \
       {{#cells}} \
-      <td data-header="{{header}}"> \
+      <td data-field="{{field}}"> \
         <div class="data-table-cell-content"> \
           <a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a> \
           <div class="data-table-cell-value">{{value}}</div> \
@@ -431,8 +431,8 @@ my.DataTableRow = Backbone.View.extend({
   
   toTemplateJSON: function() {
     var doc = this.model;
-    var cellData = _.map(this._headers, function(header) {
+    var cellData = _.map(this._fields, function(field) {
-      return {header: header, value: doc.get(header)}
+      return {field: field, value: doc.get(field)}
     })
     return { id: this.id, cells: cellData }
   },
@@ -461,10 +461,10 @@ my.DataTableRow = Backbone.View.extend({
   onEditorOK: function(e) {
     var cell = $(e.target);
     var rowId = cell.parents('tr').attr('data-id');
-    var header = cell.parents('td').attr('data-header');
+    var field = cell.parents('td').attr('data-field');
     var newValue = cell.parents('.data-table-cell-editor').find('.data-table-cell-editor-editor').val();
     var newData = {};
-    newData[header] = newValue;
+    newData[field] = newValue;
     this.model.set(newData);
     my.notify("Updating row...", {loader: true});
     this.model.save().then(function(response) {

test/model.test.js

@@ -6,7 +6,7 @@ var memoryData = {
     title: 'My Test Dataset'
     , name: '1-my-test-dataset' 
     , id: 'test-dataset'
-    , headers: ['x', 'y', 'z']
+    , fields: ['x', 'y', 'z']
   },
   documents: [
     {id: 0, x: 1, y: 2, z: 3}
@@ -32,7 +32,7 @@ test('Memory Backend: basics', function () {
   var data = dataset.backend.datasets[memoryData.metadata.id];
   dataset.fetch().then(function(datasetAgain) {
     equal(dataset.get('name'), data.metadata.name);
-    deepEqual(dataset.get('headers'), data.metadata.headers);
+    deepEqual(dataset.get('fields'), data.metadata.fields);
     equal(dataset.docCount, 6);
   });
 });
@@ -196,7 +196,7 @@ test('Webstore Backend', function() {
   });
 
   dataset.fetch().done(function(dataset) {
-    deepEqual(['__id__', 'date', 'geometry', 'amount'], dataset.get('headers'));
+    deepEqual(['__id__', 'date', 'geometry', 'amount'], dataset.get('fields'));
     equal(3, dataset.docCount)
     dataset.query().done(function(docList) {
       equal(3, docList.length)
@@ -295,7 +295,7 @@ test('DataProxy Backend', function() {
   });
 
   dataset.fetch().done(function(dataset) {
-    deepEqual(['__id__', 'date', 'price'], dataset.get('headers'));
+    deepEqual(['__id__', 'date', 'price'], dataset.get('fields'));
     equal(null, dataset.docCount)
     dataset.query().done(function(docList) {
       equal(10, docList.length)
@@ -490,8 +490,8 @@ test("GDoc Backend", function() {
   });
 
   dataset.fetch().then(function(dataset) {
-    console.log('inside dataset:', dataset, dataset.get('headers'), dataset.get('data'));
+    console.log('inside dataset:', dataset, dataset.get('fields'), dataset.get('data'));
-    deepEqual(['column-2', 'column-1'], dataset.get('headers'));
+    deepEqual(['column-2', 'column-1'], dataset.get('fields'));
     //equal(null, dataset.docCount)
     dataset.query().then(function(docList) {
       equal(3, docList.length);

test/view.test.js

@@ -13,13 +13,13 @@ test('new DataTableRow View', function () {
   var view = new recline.View.DataTableRow({
     model: doc
     , el: $el
-    , headers: ['a', 'b']
+    , fields: ['a', 'b']
   });
   view.render();
   ok($el.attr('data-id'), '1');
   var tds = $el.find('td');
   equal(tds.length, 3);
-  equal($(tds[1]).attr('data-header'), 'a');
+  equal($(tds[1]).attr('data-field'), 'a');
 });
 
 })(this.jQuery);