带有Ember's HTMLBars的Typeahead.js

Question

我们已经在我们的Ember应用程序中使用了Typeahead.js库(通过this addon)，在Ember1.10之前的版本上取得了成功，但升级到Ember1.10给我们带来了问题。

到目前为止，我们已经成功地编译了传递给typeahead组件的模板，并将其传递给typeahead库，如下所示：

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

然而，这在Ember1.10中不起作用，因为typeahead.js在执行此行代码时会抛出以下错误：

代码：

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

错误：

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

以前的that.templates.suggestion (来自上面第一个代码块的值)是一个可以传递给对象suggestion并编译实际模板的函数。对于HTMLBars，that.templates.suggestion不再是一个函数，而是一个HTMLBars对象，因此此代码不再有效。

在Ember 1.10中，有没有更好的方法来做同样的事情，与之前的行为相匹配？

Answer 1

我记得我在使用Handlebars.compile时也遇到过类似的问题，我最终选择将一个函数传递给suggestion，然后是模板内容：

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

希望这对你也有效。

Answer 2

如果这样的附加组件不再被维护，我建议你直接使用typeahead (没有cli附加组件)，我从Ember 1.7开始就是这样使用它的，现在我使用的是1.11

Answer 3

最后，我们只是在bower.json中保留了一个单独的handlebars依赖项，因为typeahead库似乎需要您将普通的handlebars模板传递给它