Typeahead and Ember.handelbars

Question

I am trying to implement Typeahead with an elasticsearch backend. The search itself seems to be working, now I am trying to tweak the optic. I would like to use a Ember.Handlebars helper that I wrote. My first attempt was using handelbars as template engine:

App.SearchComponent = Ember.TextField.extend({

  didInsertElement: function() {
    App.UserSearchEngine.initialize();
    this.initializeTypeahead();
  },

  initializeTypeahead: function(){
      var _this = this;
      this.typeahead = this.$().typeahead({
          hint: true,
          highlight: true,
          minLength: 3
        },
        {
         name: _this.$().attr('id') || "typeahead",
         // template: 'My: {{firstName}}',
         limit: this.get("limit") || 5,
         source: App.UserSearchEngine.ttAdapter(),
         templates:{
            suggestion: Ember.Handlebars.compile('{{firstName}} {{lastName}}')
         }
        }
      );
  }

});

This is giving me an error:

Uncaught TypeError: Cannot read property 'container' of undefined caused by Ember in the "_triageMustache" helper in the line

 var helper = Ember.Handlebars.resolveHelper(options.data.view.container, property);

This is probably due to the fact that I try to compile a template directly.

If I would use Handlebars.compile() instead of Ember.Handlebars.compile() it would work. It seems that the context is not correct.

Answer 1

You actually should use regular Handlebars.compile here. The Typeahead library doesn't know anything about Ember bound templates, so it doesn't know how to invoke them.

Alternatively, your template is so simple it could just be a literal function, to save yourself the hassle of shipping a Handlebars compiler in production or precompiling this one specially:

templates: {
  suggestion: function(context){ return context.firstName + ' ' + context.lastName; }
}