[#25,view,refactor][s]: get views working with new field setup (fixes #25).

* One nastiness along the way (30m delay!) that is worth noting: flot graph was a problem because it turned out that a) (re-)render triggered by dataset attributes change and fields only got set *after* core dataset attributes and so info was rendering.
* model.test.js: basic test for Dataset.toTemplateJSON

src/model.js

@@ -61,6 +61,7 @@ my.Dataset = Backbone.Model.extend({
   toTemplateJSON: function() {
     var data = this.toJSON();
     data.docCount = this.docCount;
+    data.fields = this.fields.toJSON();
     return data;
   }
 });

src/view-flot-graph.js

@@ -45,7 +45,7 @@ my.FlotGraph = Backbone.View.extend({
         <div class="input editor-group"> \
           <select> \
           {{#fields}} \
-          <option value="{{.}}">{{.}}</option> \
+          <option value="{{id}}">{{label}}</option> \
           {{/fields}} \
           </select> \
         </div> \
@@ -55,7 +55,7 @@ my.FlotGraph = Backbone.View.extend({
             <div class="input"> \
               <select> \
               {{#fields}} \
-              <option value="{{.}}">{{.}}</option> \
+              <option value="{{id}}">{{label}}</option> \
               {{/fields}} \
               </select> \
             </div> \
@@ -88,6 +88,8 @@ my.FlotGraph = Backbone.View.extend({
     _.bindAll(this, 'render', 'redraw');
     // we need the model.fields to render properly
     this.model.bind('change', this.render);
+    this.model.fields.bind('reset', this.render);
+    this.model.fields.bind('add', this.render);
     this.model.currentDocuments.bind('add', this.redraw);
     this.model.currentDocuments.bind('reset', this.redraw);
     var configFromHash = my.parseHashQueryString().graph;
@@ -105,12 +107,8 @@ my.FlotGraph = Backbone.View.extend({
     this.render();
   },
 
-  toTemplateJSON: function() {
-    return this.model.toJSON();
-  },
-
   render: function() {
-    htmls = $.mustache(this.template, this.toTemplateJSON());
+    htmls = $.mustache(this.template, this.model.toTemplateJSON());
     $(this.el).html(htmls);
     // now set a load of stuff up
     this.$graph = this.el.find('.panel.graph');

src/view.js

@@ -233,7 +233,7 @@ my.DataTable = Backbone.View.extend({
   // Column and row menus
 
   onColumnHeaderClick: function(e) {
-    this.state.currentColumn = $(e.target).siblings().text();
+    this.state.currentColumn = $(e.target).closest('.column-header').attr('data-field');
     util.position('data-table-menu', e);
     util.render('columnActions', 'data-table-menu');
   },
@@ -357,10 +357,10 @@ my.DataTable = Backbone.View.extend({
             </th> \
           {{/notEmpty}} \
           {{#fields}} \
-            <th class="column-header"> \
+            <th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}"> \
               <div class="column-header-title"> \
                 <a class="column-header-menu"></a> \
-                <span class="column-header-name">{{.}}</span> \
+                <span class="column-header-name">{{label}}</span> \
               </div> \
               </div> \
             </th> \
@@ -374,13 +374,14 @@ my.DataTable = Backbone.View.extend({
   toTemplateJSON: function() {
     var modelData = this.model.toJSON()
     modelData.notEmpty = ( this.fields.length > 0 )
-    modelData.fields = this.fields;
+    // TODO: move this sort of thing into a toTemplateJSON method on Dataset?
+    modelData.fields = _.map(this.fields, function(field) { return field.toJSON() });
     return modelData;
   },
   render: function() {
     var self = this;
-    this.fields = _.filter(this.model.get('fields'), function(field) {
-      return _.indexOf(self.hiddenFields, field) == -1;
+    this.fields = this.model.fields.filter(function(field) {
+      return _.indexOf(self.hiddenFields, field.id) == -1;
     });
     var htmls = $.mustache(this.template, this.toTemplateJSON());
     this.el.html(htmls);
@@ -431,8 +432,8 @@ my.DataTableRow = Backbone.View.extend({
   
   toTemplateJSON: function() {
     var doc = this.model;
-    var cellData = _.map(this._fields, function(field) {
-      return {field: field, value: doc.get(field)}
+    var cellData = this._fields.map(function(field) {
+      return {field: field.id, value: doc.get(field.id)}
     })
     return { id: this.id, cells: cellData }
   },

test/model.test.js

@@ -20,4 +20,12 @@ test('Field: basics', function () {
   );
 });
 
+test('Dataset', function () {
+  var meta = {id: 'test', title: 'xyz'};
+  var dataset = new recline.Model.Dataset(meta);
+  dataset.fields = new recline.Model.FieldList([{id: 'xx'}, {id: 'yy'}]);
+  var out = dataset.toTemplateJSON();
+  equal(out.fields.length, 2);
+});
+
 })(this.jQuery);

test/view.test.js

@@ -13,7 +13,7 @@ test('new DataTableRow View', function () {
   var view = new recline.View.DataTableRow({
     model: doc
     , el: $el
-    , fields: ['a', 'b']
+    , fields: new recline.Model.FieldList([{id: 'a'}, {id: 'b'}])
   });
   view.render();
   ok($el.attr('data-id'), '1');