Allow displayKey to be a function. Closes #633.

twitter · Feb 5, 2014 · fa83edc · fa83edc
1 parent a97976e
commit fa83edc
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/typeahead/dataset.js b/src/typeahead/dataset.js
@@ -29,9 +29,9 @@ var Dataset = (function() {
     this.name = o.name || _.getUniqueId();
 
     this.source = o.source;
-    this.valueKey = o.displayKey || 'value';
+    this.displayFn = getDisplayFn(o.display || o.displayKey);
 
-    this.templates = getTemplates(o.templates, this.valueKey);
+    this.templates = getTemplates(o.templates, this.displayFn);
 
     this.$el = $(html.dataset.replace('%CLASS%', this.name));
   }
@@ -107,7 +107,7 @@ var Dataset = (function() {
           outerHtml = html.suggestion.replace('%BODY%', innerHtml);
           $el = $(outerHtml)
           .data(datasetKey, that.name)
-          .data(valueKey, suggestion[that.valueKey])
+          .data(valueKey, that.displayFn(suggestion))
           .data(datumKey, suggestion);
 
           $el.children().each(function() { $(this).css(css.suggestionChild); });
@@ -166,7 +166,15 @@ var Dataset = (function() {
   // helper functions
   // ----------------
 
-  function getTemplates(templates, valueKey) {
+  function getDisplayFn(display) {
+    display = display || 'value';
+
+    return _.isFunction(display) ? display : displayFn;
+
+    function displayFn(obj) { return obj[display]; }
+  }
+
+  function getTemplates(templates, displayFn) {
     return {
       empty: templates.empty && _.templatify(templates.empty),
       header: templates.header && _.templatify(templates.header),
@@ -175,7 +183,7 @@ var Dataset = (function() {
     };
 
     function suggestionTemplate(context) {
-      return '<p>' + context[valueKey] + '</p>';
+      return '<p>' + displayFn(context) + '</p>';
     }
   }
 

diff --git a/test/dataset_view_spec.js b/test/dataset_view_spec.js
@@ -37,6 +37,21 @@ describe('Dataset', function() {
       expect(this.dataset.getRoot()).toContainText('three');
     });
 
+    it('should allow custom display functions', function() {
+      this.dataset = new Dataset({
+        name: 'test',
+        display: function(o) { return o.display; },
+        source: this.source = jasmine.createSpy('source')
+      });
+
+      this.source.andCallFake(fakeGetForDisplayFn);
+      this.dataset.update('woah');
+
+      expect(this.dataset.getRoot()).toContainText('4');
+      expect(this.dataset.getRoot()).toContainText('5');
+      expect(this.dataset.getRoot()).toContainText('6');
+    });
+
     it('should render empty when no suggestions are available', function() {
       this.dataset = new Dataset({
         source: this.source,
@@ -167,6 +182,10 @@ describe('Dataset', function() {
     ]);
   }
 
+  function fakeGetForDisplayFn(query, cb) {
+    cb([{ display: '4' }, { display: '5' }, { display: '6' } ]);
+  }
+
   function fakeGetWithSyncEmptyResults(query, cb) {
     cb();
   }