While this may be specific to the "typeahead" situation, and my example has static content, really this would apply to any bootstrap usage of "data-source". I want to someday when I grow up use dynamic content for my typeahead implementation, so am trying the binding way for now:

Ember.TextField.reopen({
    //add some bootstrap specific stuff
    attributeBindings: ['data-provide', 'data-items', 'dataSourceBinding:data-source'],
    'dataSourceBinding': Ember.Binding.oneWay('App.AddStoreTemplateController.statesArray')
});

I have a router with connectOutlets which attaches my template:

{{view Ember.TextField elementId="state" placeholder="NY/New York" valueBinding="state" data-provide="typeahead" data-items="4" data-source="App.router.addStoreTemplateController.statesArray"}}

My controller:

    AddStoreTemplateController: Ember.ArrayController.extend({
            statesArray: ['Alabama', 'Washington']
    }),

What I expect to see rendered in HTML:

<input id="state" class="ember-view ember-text-field" placeholder="NY/New York" type="text" data-provide="typeahead" data-items="4" data-source="['Alabama', 'Washington']">

What it actually renders in HTML:

<input id="state" class="ember-view ember-text-field" placeholder="NY/New York" type="text" data-provide="typeahead" data-items="4" data-source="App.router.addStoreTemplateController.statesArray">

Typeahead docs .html#typeahead

Thanks so much. I really enjoy EmberJS!!

While this may be specific to the "typeahead" situation, and my example has static content, really this would apply to any bootstrap usage of "data-source". I want to someday when I grow up use dynamic content for my typeahead implementation, so am trying the binding way for now:

Ember.TextField.reopen({
    //add some bootstrap specific stuff
    attributeBindings: ['data-provide', 'data-items', 'dataSourceBinding:data-source'],
    'dataSourceBinding': Ember.Binding.oneWay('App.AddStoreTemplateController.statesArray')
});

I have a router with connectOutlets which attaches my template:

{{view Ember.TextField elementId="state" placeholder="NY/New York" valueBinding="state" data-provide="typeahead" data-items="4" data-source="App.router.addStoreTemplateController.statesArray"}}

My controller:

    AddStoreTemplateController: Ember.ArrayController.extend({
            statesArray: ['Alabama', 'Washington']
    }),

What I expect to see rendered in HTML:

<input id="state" class="ember-view ember-text-field" placeholder="NY/New York" type="text" data-provide="typeahead" data-items="4" data-source="['Alabama', 'Washington']">

What it actually renders in HTML:

<input id="state" class="ember-view ember-text-field" placeholder="NY/New York" type="text" data-provide="typeahead" data-items="4" data-source="App.router.addStoreTemplateController.statesArray">

Typeahead docs http://twitter.github./bootstrap/javascript.html#typeahead

Thanks so much. I really enjoy EmberJS!!

• javascript
• ember.js

• 1 I want to someday when I grow up.. love this line :) – Sisir Commented Dec 18, 2014 at 16:16

3 Answers 3

After fiddling with this a bit more, I figured out an easy way to do this. It doesn't require a 3rd party library and you can use Ember.TextField to keep your inputs pretty:

I created a new extended TextField object to keep things separate:

Ember.TextFieldTypeahead = Ember.TextField.extend({
    //add some bootstrap specific stuff
    attributeBindings: ['data-provide', 'data-items', 'data-source'],
    'data-source': function(){
            return JSON.stringify(["Alabama", "Washington"]);
    }.property()
});

Then in my template:

{{view Ember.TextFieldTypeahead elementId="state" placeholder="NY/New York" valueBinding="state" data-provide="typeahead" data-items="4" data-source=on}}

Things worked fine. Only confusing thing to me, and this may be an Ember bug or just my noob status of the framework, is that data-source= in the template can be anything, it still references the function that I declared. just leaving it as "data-source" in the template yields an error on the handlebars build, so I just opted to make the value "on" so I'm not confused in 6 months time when I revisit the code for some reason. Curious.

I'm also guessing I can extend this even more to observe "value" and then on value change populate the 'data-source' property with whatever ajax call my server responds with to satisfy the dynamic requirement.

You can also do something like this (when you want to load the data dynamically as you type from the server):

ember-bootstrap

EEPD.EbedMedicationArticleTypeAhead = Bootstrap.Forms.TypeAhead.extend({
    init: function () {
        this._super();

        this.set('idProperty', 'id');
    },

    valueChanged: function () {
        var id = this.get('value');
        var self = this;

        var label = this.get('_childViews')[1].$()
                        .val();

        if (Ember.empty(label) && !Ember.empty(id)) {
            var articleDescription = this.get('item.articleDescription');
            self.get('_childViews')[1].$()
                .val(articleDescription)
                .change();
        }
    } .observes('value'),

    getLabel: function (item) {
        return '%@ (%@)'.fmt(Ember.get(item, 'description'), Ember.get(item, 'amount'));
    },

    getQueryPromise: function (query) {
        //get some data from SignalR
        return $.connectionprCardioArticles.server.getAllByDescriptionLike(query);
    }
});

the handlebar will look like this:

{{view EEPD.EbedMedicationArticleTypeAhead
      label="Medicament:"
      name="articleNumber"}}

Result:

For this I wouldn't use the Ember.TextField. You could do something like:

<input ... data-items="4" {{bindAttr data-source="formattedDataSource"}}/>

In your controller:

formattedDataSource: function(){
  .. format your states array as a string or dump to json...
}.property()