Ember-cli-dropdown

This addon was created back in the time that ember is deprecating the VIEW class. However this is still valid today as a way to generate a drop down.

Installation

• ember install ember-cli-dropdown

Useage

If you already use Ember.Select this is a very easy transition. A typical Ember.Select is:

In Ember-Cli-Dropdown:

{{drop-downcontent=programmersvalue=someBindingValueoptionValuePath="value"optionLabelPath="display"}}

The values of the optionValuePath and optionLabelPath need to map to the object properties of the content array. content needs to be an array of objects or it can be a array of Ember.Object, either in your component or controller:

contentArray: [{value: 'open',display: 'Open'},{value:'closed',display:'Closed'},{value:'waiting',display:'Waiting'}]

then in your hbs:

{{drop-downcontent=contentArrayvalue=ticket.statusoptionValuePath="value"optionLabelPath="display"}}

The main changes here is when using optionValuePath and optionLabelPath you just need to specify the object's property.

Adding a disabled option

You can add a preselected state in the dropdown. To do this use this set the option disableOption to true and you can customise the text by using disableOptionText option.

Example:

{{drop-downcontent=contentArrayvalue=ticket.statusoptionValuePath="value"optionLabelPath="display"disableOption=truedisableOptionText="Some text"}}

A note on ember data boolean type

From the documentation of ember data. They mention it will convert a string of 'true' or 'false' if you speify the attr('boolean'). This don't seem to be the case for version 2.4.0. To deal with this there is now a extra piece of code if you are using true or false as value of a drop down it will first convert it to boolean before setting the value.