Merge pull request #137 from jharding/125-support-template-functions

Support compiled templates
twitter · Mar 30, 2013 · 0064ad6 · 0064ad6
2 parents 3a77aea + 626b743
commit 0064ad6
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 19 deletions.
diff --git a/src/dataset.js b/src/dataset.js
@@ -9,7 +9,7 @@ var Dataset = (function() {
   function Dataset(o) {
     utils.bindAll(this);
 
-    if (o.template && !o.engine) {
+    if (utils.isString(o.template) && !o.engine) {
       $.error('no template engine specified');
     }
 
@@ -285,19 +285,25 @@ var Dataset = (function() {
 
   function compileTemplate(template, engine, valueKey) {
     var wrapper = '<div class="tt-suggestion">%body</div>',
-       compiledTemplate;
+        wrappedTemplate,
+        compiledTemplate;
 
-    if (template) {
-      compiledTemplate = engine.compile(wrapper.replace('%body', template));
+    // precompiled template
+    if (utils.isFunction(template)) {
+     compiledTemplate = template;
+    }
+
+    // string template that needs to be compiled
+    else if (utils.isString(template)) {
+      wrappedTemplate = wrapper.replace('%body', template);
+      compiledTemplate = engine.compile(wrappedTemplate).render;
     }
 
     // if no template is provided, render suggestion
     // as its value wrapped in a p tag
     else {
-      compiledTemplate = {
-        render: function(context) {
-          return wrapper.replace('%body', '<p>' + context[valueKey] + '</p>');
-        }
+      compiledTemplate = function(context) {
+        return wrapper.replace('%body', '<p>' + context[valueKey] + '</p>');
       };
     }
 

diff --git a/src/dropdown_view.js b/src/dropdown_view.js
@@ -204,7 +204,7 @@ var DropdownView = (function() {
         fragment = document.createDocumentFragment();
 
         utils.each(suggestions, function(i, suggestion) {
-          elBuilder.innerHTML = dataset.template.render(suggestion.datum);
+          elBuilder.innerHTML = dataset.template(suggestion.datum);
 
           $el = $(elBuilder.firstChild)
           .css(css.suggestion)

diff --git a/test/dataset_spec.js b/test/dataset_spec.js
@@ -113,7 +113,7 @@ describe('Dataset', function() {
       });
 
       it('should compile default template', function() {
-        expect(this.dataset.template.render({ value: 'boo' }))
+        expect(this.dataset.template({ value: 'boo' }))
         .toBe('<div class="tt-suggestion"><p>boo</p></div>');
       });
     });
@@ -123,7 +123,9 @@ describe('Dataset', function() {
         this.dataset = new Dataset({
           local: fixtureStrings,
           template: 't',
-          engine: { compile: this.spy = jasmine.createSpy().andReturn('boo') }
+          engine: {
+            compile: this.spy = jasmine.createSpy().andReturn({ render: 'boo' })
+          }
         });
       });
 
@@ -134,6 +136,16 @@ describe('Dataset', function() {
         expect(this.dataset.template).toBe('boo');
       });
     });
+
+    describe('when called with a compiled template', function() {
+      beforeEach(function() {
+        this.dataset = new Dataset({ local: fixtureStrings, template: $.noop });
+      });
+
+      it('should use it', function() {
+        expect(this.dataset.template).toBe($.noop);
+      });
+    });
   });
 
   describe('#initialize', function() {

diff --git a/test/dropdown_view_spec.js b/test/dropdown_view_spec.js
@@ -457,10 +457,8 @@ describe('DropdownView', function() {
   });
 
   describe('#renderSuggestions', function() {
-    var template = {
-          render: function(c) {
-            return '<li class="tt-suggestion"><p>' + c.value + '</p></li>';
-          }
+    var template = function(c) {
+          return '<li class="tt-suggestion"><p>' + c.value + '</p></li>';
         },
         mockOldDataset = {
           name: 'test',
@@ -572,10 +570,8 @@ describe('DropdownView', function() {
   function renderTestDataset(view, open) {
     var mockDataset = {
           name: 'test' ,
-          template: {
-            render: function(c) {
-              return '<li class="tt-suggestion"><p>' + c.value + '</p></li>';
-            }
+          template: function(c) {
+            return '<li class="tt-suggestion"><p>' + c.value + '</p></li>';
           }
         },
          mockSuggestions = [