Class Ember.Select
The Ember.Select
view class renders a
select HTML element,
allowing the user to choose from a list of options.
The text and value
property of each <option>
element within the
<select>
element are populated from the objects in the Element.Select
's
content
property. The underlying data object of the selected <option>
is
stored in the Element.Select
's value
property.
content
as an array of Strings
The simplest version of an Ember.Select
takes an array of strings as its
content
property. The string will be used as both the value
property and
the inner text of each <option>
element inside the rendered <select>
.
Example:
1 2 3 |
App.ApplicationController = Ember.Controller.extend({ names: ["Yehuda", "Tom"] }); |
Would result in the following HTML:
1 2 3 4 |
<select class="ember-select"> <option value="Yehuda">Yehuda</option> <option value="Tom">Tom</option> </select> |
You can control which <option>
is selected through the Ember.Select
's
value
property directly or as a binding:
1 2 3 4 |
App.ApplicationController = Ember.Controller.extend({ selectedName: 'Tom', names: ["Yehuda", "Tom"] }); |
Would result in the following HTML with the <option>
for 'Tom' selected:
1 2 3 4 |
<select class="ember-select"> <option value="Yehuda">Yehuda</option> <option value="Tom" selected="selected">Tom</option> </select> |
A user interacting with the rendered <select>
to choose "Yehuda" would
update the value of selectedName
to "Yehuda".
content
as an Array of Objects
An Ember.Select
can also take an array of JavaScript or Ember objects as
its content
property.
When using objects you need to tell the Ember.Select
which property should
be accessed on each object to supply the value
attribute of the <option>
and which property should be used to supply the element text.
The optionValuePath
option is used to specify the path on each object to
the desired property for the value
attribute. The optionLabelPath
specifies the path on each object to the desired property for the
element's text. Both paths must reference each object itself as content
:
1 2 3 4 5 6 |
App.ApplicationController = Ember.Controller.extend({ programmers: [ {firstName: "Yehuda", id: 1}, {firstName: "Tom", id: 2} ] }); |
Would result in the following HTML:
1 2 3 4 |
<select class="ember-select"> <option value="1">Yehuda</option> <option value="2">Tom</option> </select> |
The value
attribute of the selected <option>
within an Ember.Select
can be bound to a property on another object by providing a
valueBinding
option:
1 2 3 4 5 6 7 8 9 |
App.ApplicationController = Ember.Controller.extend({ programmers: [ {firstName: "Yehuda", id: 1}, {firstName: "Tom", id: 2} ], currentProgrammer: { id: 2 } }); |
Would result in the following HTML with a selected option:
1 2 3 4 |
<select class="ember-select"> <option value="1">Yehuda</option> <option value="2" selected="selected">Tom</option> </select> |
Interacting with the rendered element by selecting the first option
('Yehuda') will update the id
of currentProgrammer
to match the value
property of the newly selected <option>
.
Alternatively, you can control selection through the underlying objects
used to render each object providing a selectionBinding
. When the selected
<option>
is changed, the property path provided to selectionBinding
will be updated to match the content object of the rendered <option>
element:
1 2 3 4 5 6 7 |
App.ApplicationController = Ember.Controller.extend({ selectedPerson: null, programmers: [ {firstName: "Yehuda", id: 1}, {firstName: "Tom", id: 2} ] }); |
Would result in the following HTML with a selected option:
1 2 3 4 |
<select class="ember-select"> <option value="1">Yehuda</option> <option value="2" selected="selected">Tom</option> </select> |
Interacting with the rendered element by selecting the first option
('Yehuda') will update the selectedPerson
to match the object of
the newly selected <option>
. In this case it is the first object
in the programmers
Supplying a Prompt
A null
value for the Ember.Select
's value
or selection
property
results in there being no <option>
with a selected
attribute:
1 2 3 4 5 6 7 |
App.ApplicationController = Ember.Controller.extend({ selectedProgrammer: null, programmers: [ "Yehuda", "Tom" ] }); |
Would result in the following HTML:
1 2 3 4 |
<select class="ember-select"> <option value="Yehuda">Yehuda</option> <option value="Tom">Tom</option> </select> |
Although selectedProgrammer
is null
and no <option>
has a selected
attribute the rendered HTML will display the
first item as though it were selected. You can supply a string
value for the Ember.Select
to display when there is no selection
with the prompt
option:
1 2 3 4 5 6 7 |
App.ApplicationController = Ember.Controller.extend({ selectedProgrammer: null, programmers: [ "Yehuda", "Tom" ] }); |
Would result in the following HTML:
1 2 3 4 5 |
<select class="ember-select"> <option>Please select a name</option> <option value="Yehuda">Yehuda</option> <option value="Tom">Tom</option> </select> |
Methods
- $
- addObserver
- append
- appendTo
- beginPropertyChanges
- cacheFor
- create
- createChildView
- createElement
- createWithMixins
- decrementProperty
- destroy
- destroyElement
- eachComputedProperty
- endPropertyChanges
- findElementInParentElement
- get
- getProperties
- getWithDefault
- has
- hasObserverFor
- incrementProperty
- init
- metaForProperty
- notifyPropertyChange
- off
- on
- one
- propertyDidChange
- propertyWillChange
- remove
- removeAllChildren
- removeChild
- removeFromParent
- removeObserver
- render
- reopen
- reopenClass
- replaceIn
- rerender
- set
- setProperties
- toString
- toggleProperty
- trigger
- willDestroy
Properties
- ariaRole
- attributeBindings
- classNameBindings
- classNames
- concatenatedProperties
- content
- context
- controller
- element
- groupView
- isDestroyed
- isDestroying
- isView
- isVisible
- layout
- layoutName
- multiple
- nearestChildOf
- nearestOfType
- nearestWithProperty
- optionGroupPath
- optionLabelPath
- optionValuePath
- optionView
- parentView
- prompt
- selection
- tagName
- template
- templateName
- templates
- value
- views