带有Ember的HTMLBars的Typeahead.js

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?

Answer 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.

Answer 2

如果不再需要维护此类附加组件，建议您直接使用typeahead（无cli附加组件），自Ember 1.7起我就一直在使用它，而现在我使用的是1.11

Answer 3

最后，我们只是在bower.json保留了一个单独的handlebars依赖项，因为看来bower.json库要求您将bower.json handlebars模板传递给它。