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.