Emberjs, data-source, twitter bootstrap typeahead

Question

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.com/bootstrap/javascript.html#typeahead

Thanks so much. I really enjoy EmberJS!!

Answer 1

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.

Answer 2

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 $.connection.ccprCardioArticles.server.getAllByDescriptionLike(query);
    }
});

the handlebar will look like this:

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

Result: