Typeahead.js with Ember's HTMLBars

Question

We've been using the Typeahead.js library in our Ember app (via this addon) with success on Ember versions prior to 1.10, but the upgrade to Ember 1.10 is causing us problems.

Until now we've had success compiling templates that are passed into the typeahead component and passing that along to the typeahead library like this:

templates: {
  // this.get('suggestionTemplate') is a string of handlebars template
  suggestion: Handlebars.compile(this.get('suggestionTemplate')),
  <other code>
}

This does not work in Ember 1.10, however, as typeahead.js throws the below error when executing this line of code:

Code:

$el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion);

Error:

Uncaught TypeError: that.templates.suggestion is not a function

Previously that.templates.suggestion, which is the value from the first code block above, was a function that could be passed the object suggestion and it would compile the actual template. With HTMLBars, that.templates.suggestion is no longer a function but rather is an HTMLBars object, so this code no longer works.

Is there a better way to do this same thing in Ember 1.10 that will match the previous behavior?

score 1 · Answer 1 · answered May 11 '15 at 21:30

1

I remember I had a similar problem using Handlebars.compile I ended up opting for passing a function to suggestion instead, and then the template content:

templates: {
  empty: '<span>No results</span>',
  suggestion: function(item){
   return '<div>' + item.name + '</div>';
  }
}

Hope this works for you too.

answered May 11 '15 at 21:30

Amed R

100
8

This is not an ideal solution because it ties all your suggestion templates to the same html – Dhaulagiri May 12 '15 at 18:55

score 0 · Answer 2 · answered May 11 '15 at 21:17

0

If such add-on is no longer being maintained I'd suggest you to use typeahead straight (no cli add-on), I've been using it like this since Ember 1.7 and now I'm on 1.11

answered May 11 '15 at 21:17

Amed R

100
8

We actually aren't using the addon either since we aren't on ember-cli, but we did pull in the code from it. It's a pretty light wrapper though so not much of this actually dependent on the addon itself. How are you passing custom templates to typeahead.js? – Dhaulagiri May 11 '15 at 21:18

score 0 · Answer 3 · answered May 13 '15 at 15:21

0

In the end we just kept a separate handlebars dependency in our bower.json since it seems like the typeahead library requires you to pass in vanilla handlebars templates to it

answered May 13 '15 at 15:21

Dhaulagiri

3,281
24
26

Typeahead.js with Ember's HTMLBars

3 Answers3