Skip to content
This repository has been archived by the owner on Mar 22, 2019. It is now read-only.

Commit

Permalink
Adds a deprecation guide section about Ember.Select
Browse files Browse the repository at this point in the history
  • Loading branch information
bantic committed Jun 10, 2015
1 parent a995433 commit 403c829
Showing 1 changed file with 72 additions and 0 deletions.
72 changes: 72 additions & 0 deletions source/deprecations/v1.x.html.md
Original file line number Diff line number Diff line change
Expand Up @@ -671,3 +671,75 @@ been ported to component. `Ember.LinkView`, the class that backs the

Most uses of `Ember.LinkView` can be directly ported to the `Ember.LinkComponent`
class.

#### Ember.Select

Using the `Ember.Select` global and its view helper form (`{{view 'select'}}`) is deprecated.
`Ember.Select` in Ember 1.x is implemented in a legacy coding style that uses patterns such as observers and two-way data binding that
can cause pathological performance problems and provide an experience that is not consistent with idiomatic Ember 2.0 development.

Ember 2.0 provides several new features that make it much more straightforward to implement <select> tag functionality directly.
For example, to create a component that displays a prompt and a list of dropdown options, the following code could be used:

```handlebars
{{! app/templates/components/my-select.hbs}}
<select {{action 'change' on='change'}}>
{{#each content as |item|}}
<option value="{{item}}" selected={{is-equal item selectedValue}}>
{{item}}
</option>
{{/each}}
</select>
```

```javascript
// app/components/my-select.js
import Ember from "ember";

export default Ember.Component.extend({
content: null,

actions: {
change() {
const changeAction = this.attrs.change;
const selectedEl = this.$('select')[0];
const selectedIndex = selectedEl.selectedIndex;
const content = this.get('content');
const selectedValue = content[selectedIndex];

this.set('selectedValue', selectedValue);
changeAction(selectedValue);
}
}
});
```

```javascript
// is-equal helper is necessary to determine which option is currently selected.
// app/helpers/is-equal.js
import Ember from "ember";

export default Ember.Helper.helper(function(params) {
const [leftSide, rightSide] = params;

return leftSide === rightSide;
});
```

This component could be used in a template by supplying it an array of strings as `content`
and an action to call when the user makes a selection as `change`:

```handlebars
{{! app/templates/application.hbs}}
The currently selected item: {{mySelectedItem}}.
{{! myItems is an array of strings: ['first', 'second', 'third',...] }}
{{my-select content=myItems change=(action (mut mySelectedItem))}}
```

[Example jsbin showing my-select component with Ember 2.0 idioms](http://emberjs.jsbin.com/fotuqa).

[Example jsbin showing usage of the select tag directly in a template without a component](http://emberjs.jsbin.com/zezapu).

There are many [Ember-CLI addons that provide select-like functionality](http://emberobserver.com/categories/select). [emberx-select](http://emberobserver.com/addons/emberx-select) in particular aims to provide a select component based on the native html select.

0 comments on commit 403c829

Please sign in to comment.