3

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!!

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

3 Answers 3

5

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.

2
  • I was using this, but with the lastest Ember RC, this is broken. Any idea why?
    – Daniel D
    Mar 29, 2013 at 1:14
  • No. I've since converted my ember implementation to AngularJS and haven't looked back since.
    – Squiggler
    Dec 19, 2014 at 16:50
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:

enter image description here

enter image description here

1
  • i'm pretty shocked that i require a library to do something simple like this. i'm going to wait on it a bit more before i accept the answer.
    – Squiggler
    Dec 1, 2012 at 8:32
0

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()
1
  • attempting this method i receive an error: "Uncaught Error: assertion failed: Attributes must be numbers, strings or booleans, not Alabama,Washington" - i simply return ["Alabama", "Washington"] from my controller function...
    – Squiggler
    Dec 1, 2012 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.