Can I use select-2 tag in handlebars using a simple object?

Question

I have an object

let StatusDescriptions = {
            'A' : 'Available' ,
            'W' : 'Waitlisted' ,
            'C' : 'Closed'
};

which is available in the page. And I use handlebars to display the page. Can I use this object in a select-2 tag as such? I tried giving optionValuePath as 'key' 'id' etc, which I know is silly. I'm new to Ember as well. Please help.

{{select-2 id="myID" content=StatusDescriptions optionLabelPath="what should be here" placeholder='Choose Status' searchEnabled=false}}

Answer 1

Update: if you already installed Select 2 Ember addon... (if not, instruction below)

Your object should look like this:

statusDescriptions: [
  {
    id: 'A',
    text: 'Available'
  },
  {
    id: 'W',
    text: 'Waitlisted'
  },
  {
    id: 'C',
    text: 'Closed'
  }
]

So you can have this in your handlebar:

{{select-2
    content=statusDescriptions
    id=id
    value=selectedChoice
    searchEnabled=false
}}

In your handlebar or in your controller, you can observe or use in computed property the selectedChoice property. (This could be in your handlebar file:)

Selected: {{selectedChoice.id}} - {{selectedChoice.text}}

Update2: If you really want to use a simple object, you can convert it with a computed property. For example, this could be in your controller:

import Ember from 'ember';

export default Ember.Controller.extend({

  statusDescriptions: {
                        'A' : 'Available',
                        'W' : 'Waitlisted',
                        'C' : 'Closed'
                      },

  statusForSelect: Ember.computed('statusDescriptions', function() {
    const statusDescriptions = this.get('statusDescriptions');

    return Object.keys(statusDescriptions).map(key =>
      Object.create({id: key, text: statusDescriptions[key]})
    );
  })

});

So in your template, you can use statusForSelect as content.

{{select-2
    content=statusForSelect
    id=id
    value=selectedChoice
    searchEnabled=false
}}

---

If you haven't installed Select 2 addon yet:

Yes, you can use Select 2 in Ember project, but you have to install a specific Ember addon. Most of your favourite javascript library are already ported to Ember, you can look around here: http://www.emberobserver.com

You can find here a list about Select addons: https://www.emberobserver.com/categories/select

As you see, there is an ember-select-2 addon. In your project folder run:

ember install ember-select-2

and follow the instructions if you would like to use this package: https://github.com/iStefo/ember-select-2

However, there are more up-to-date select packages, you can try them out. One of the most popular is: http://www.ember-power-select.com/