Select Boxes in Ember 2.0
Published on Jul 11, 2015
Select views are going away in Ember 2.0.
In this episode, we see several different ways of upgrading your select boxes- ember-legacy-views, a custom-built solution in vanilla Ember, and then a solution in emberx-select.
Links
- deprecation notice
- ember-legacy-views
- emberx-select blockless form
- github diff for vanilla Ember
- emberx-select
- github diff for emberx-select
- Episode 55- Awesome Select Boxes
Code
$ ember install ember-truth-helpers
$ ember install emberx-select
Plain version:
//tag/edit-fields/component.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
selectTagType() {
const selectedEl = this.$('#tag-type-select')[0]
const selectedIndex = selectedEl.selectedIndex;
const options = $('#tag-type-select option');
const selectedValue = options[selectedIndex].value;
this.set('model.tagType', selectedValue);
}
}
});
//tag/edit-fields/template.hbs
<div>Tag Type:
<select {{action 'selectTagType' on='change'}} id="tag-type-select">
{{#each tagTypes as |type|}}
<option value="{{type}}" selected={{eq type model.tagType}}>
{{type}}
</option>
{{/each}}
</select>
</div>
emberx-select version:
//tag/edit-fields/component.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
selectTagType(value, component) {
this.set('model.tagType', value);
}
}
});
//tag/edit-fields/template.hbs
<div>Tag Type:
{{#x-select action='selectTagType' id="tag-type-select" value=model.tagType}}
{{#each tagTypes as |type|}}
{{#x-option value=type}}
{{type}}
{{/x-option}}
{{/each}}
{{/x-select}}
</div>
Transcript
With Ember 1.13, the select view is deprecated. If you don’t change your select views by Ember 2.0, they’re going to break. In this episode, we’ll look at several different options for getting rid of those deprecations. These three options are the ember-legacy-views
addon, creating a custom solution, and using the emberx-select
addon.
The first option is to just use the ember-legacy-views
addon. Install this addon and the deprecation will go away, no other changes needed. The downside is that the addon will not be supported past Ember 2.4, so we’ll need to find a better option. If you really don’t want to update your select boxes, you can try the blockless form of emberx-select
. Just change your select views to emberx-select
components. It will probably have the form longer than Ember 2.4, but maintainers have said that they plan to extract blockless form to a separate addon eventually.
So that leaves us with actually changing our structure using custom select boxes or emberx-select
. So we’ll use this select box as our example. Our first look will be at how to do it in plain Ember. And then we’ll see how using emberx-select
can do the same thing in less code.
First we’re going to take our view select, our select view, and then put it in a comment down below so we can use it for a reference. Then we’ll take our select tag. We’ll create that and then we’ll put an action in that select tag. The action will be called selectTagType
and will be triggered on change
. So whenever the value changes, then the action selectTagType
will be triggered. Finally we’ll give it an id of tag-type-select
. We’ll be using that in our action.
So to get the options displaying, we’re going to loop through each of the tagTypes
. We’re going to create an option
for it, and then give it the value
of that type
, and then display that type
as well. In this case, the types are just strings. So we can do this, and more complicated examples with an object, you may have to do the ID as the value and then the title as the thing that’s displayed as an example.
So that will get our options displaying. However, as we can see here it says series in the select box, but it’s actually a subject. So it’s showing the wrong one. To get it to show the correct one, we’ll need to create the selected
field. So we’ll take the selected
field on the option, and then we’ll do some calculations. So we’ll use the equal helper which we’ve gotten from Ember Truth Helpers, the addon, and then we’ll use that to compare the type of this option to the tagType
of the model. And so select
will be true if this option is the currently selected tagType
.
If we go to our app, we’ll see that it preserves the subject instead of just taking the top one. So that’s how you display it. But what about changing it? If we change it to series here and hit save, it will stay as subject because we haven’t done the action yet. So we’re going to need to implement selectTagType
on our component. So we’ll create the action selectTagType
. Then we’ll grab the tagType
selectId
, grab the first one of that type which is our selected element. Then we’ll grab the selectedIndex
off that selected element. That’s the value. And then we’ll grab all of the options as an array. We’ll grab the option that is in that index, and take the value off of it. And then we’ll assign that value to the model.tagType
. That’s pretty complicated, and it makes me glad that I don’t usually have to work directly with the DOM.
Let’s check to see that it works. We’ll choose series, save. And there we go, it’s working.
Let’s start transforming this to emberx-select
. First, we’ll see that we have emberx-select
in our package.json
. So we’re ready to go- I've already npm
installed. Then we’ll start transforming the selectTag
. We’ll give it the x-select
block tag. We’ll keep the action the same, although we'll declare it slightly differently. And now we don’t have to set onChange
explicitly. We’ll keep the id
, and then we’ll add in a value
. This value will help emberx-select
to set the Boolean selected on the options. We’re doing that manually now with the equals helper. So we’ll be able to remove the selected and the equal helper, and then we’ll replace the option. Once again, I replace it with x-option and doing the value for this slightly differently. The each loop and the stuff in the center can stay the same. This is slightly better than what we had before, but in the component is where it really shines. So our selectTagType
, now it will take in a value
and a component
, and then we can get rid of all of this, all this messy DOM manipulation and just set the value. This is much better.
So we’ll test it. This is currently a subject. We can see that it selects that automatically instead of the top one. We can change it and it will save.
So in this episode, we saw that Ember select views are going to be deprecated, but we have three different options of getting past those deprecations, ember-legacy-views
which will stay good until Ember 2.4, making your own custom select box using vanilla Ember, and using emberx-select
.
In this week’s pro-episode, we’ll show how to make our select boxes even more awesome. We’ll create extra options, we’ll create a prompt, we’ll get our list from multiple sources, and we’ll learn how to create different options depending on who the user is or what state their account is in. I’ll see you then.