How to use it

How to use it

The basic component usage is very simple. The only mandatory arguments you have to pass to it are options(*) which has to be a collection of any kind, including the result of ember-data operations like .find or .query, and the onchange action. The component will yield each individual item in the collection to the block to generate the list.

* There's one exception: When you use the search action passing an initial set of options is optional. Read more about the search

Selects in this page seem to not work. This is intended. See last paragraph.

The block of the component becomes the content of each option of the select and also the content of the trigger by default. Blocks are a powerful Ember primitive and you can use them to build selects with complex HTML inside very naturally.

Flag of Portugal Portugal

Filtering in the above select also seems broken, but is also intended. See the search section (Customize the search field) for instructions on how to make it work.

Also you've seen the usage of the selected option. Unsurprisingly it tells the component the initial selection. But it's important to note a a few things about it:

  • The component compares options using Ember.isEqual. With primitive values like strings or numbers it works exactly as ===. With dates, although in JS new Date(2017, 5, 5) !== new Date(2017, 5, 5), in Ember Power Select they will be considered the same because Ember.isEqual(new Date(2017, 5, 5), new Date(2017, 5, 5))) === true.

    When comparing objects, remember that in JS objects are compared by reference, so { foo: 'bar' } !== { foo: 'bar' }. However if you define on your objects an isEqual(other) {} function, that will be used instead of a simple ===.

  • Updates in the selected element will update the selected value in the component as expected.
  • selected (and all other options actually) is read only. This means that selecting an element in the component won't do anything. That is a design decision and the reason why the onchange action is mandatory. This is aligned with Ember's Data Down Actions Up (DDAU) philosophy.

This is the very basic usage of this component, but so far is pretty useless. Since there are no two way bindings and the onchange action is empty nothing happens when you select something.

Let's see how to take advantage of the onchange property.