How to use it

How to use it

The basic component usage is very simple. You must pass the component an onchange action, and either an options collection and/or a search action. The options argument can be a collection of any kind, including the result of ember-data operations like .find or .query. The component will yield each individual item in the collection to the block to generate the list.

When you use the search action passing an initial set of options is optional. Read more about the search action.

Selects in this page seem do 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.

The component expects selected to contain the actual selected object and not just an Id. One way to do this is to have a computed property that returns the correct object based upon the Id.

Flag of Portugal Portugal

You could alternatively do this using the find-by helper from the ember-composable-helpers add-on by DockYard.

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.