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.
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.
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 JSnew Date(2017, 5, 5) !== new Date(2017, 5, 5)
, in Ember Power Select they will be considered the same becauseEmber.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 anisEqual(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 theonchange
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.