Awesome Select Boxes

Published on Jul 12, 2015

Having the new 2.0 style of select boxes opens up lots of possibilities.

In this episode we'll look at creating extra options, prompts, lists from multiple sources, and options that vary depending on the status of your user or your app.


Links

Code

//tag/model.js
import DS from 'ember-data';

export default DS.Model.extend({
  tagType: DS.attr('string'),

  awesomeOptions: [
    'shark lasers',
    '\'Murica'
  ]
});
//with emberx-select
<div>Tag Type:
  {{#x-select action='selectTagType' id="tag-type-select" value=model.tagType}}
    {{#x-option}}Prompt: select something{{/x-option}}
    {{#each tagTypes as |type|}}
      {{#x-option value=type}}{{type}}{{/x-option}}
    {{/each}}
    {{#each model.awesomeOptions as |type|}}
      {{#x-option value=type}}{{type}}{{/x-option}}
    {{/each}}
    {{#x-option value="ninja"}}Just a normal person, promise{{/x-option}}
  {{/x-select}}
</div>
//vanilla select boxes, with added if statements
<div>Ninjas Exist: {{input type="checkbox" checked=ninjasExist}}</div>
<div>Can See Ninjas: {{input type="checkbox" checked=canSeeNinjas}}</div>
<div>Tag Type:
  <select {{action 'selectTagType' on='change'}} id="tag-type-select">
    <option>Prompt: select something</option>
    {{#each tagTypes as |type|}}
      <option value="{{type}}" selected={{eq type model.tagType}}>{{type}}</option>
    {{/each}}
    {{#each model.awesomeOptions as |type|}}
      <option value="{{type}}" selected={{eq type model.tagType}}>{{type}}</option>
    {{/each}}
    {{#if ninjasExist}}
      <option value="{{ninja}}">
        {{#if canSeeNinjas}}
          A ninja!!!
        {{else}}
          Just a normal person, promise
        {{/if}}
      </option>
    {{/if}}
  </select>
</div>

Transcript

In Episode 54, we showed how to take the old, deprecated Ember select boxes, the views, and how to transform them into new style, both in Vanilla Ember and with the emberx-select addon. In Episode 55, we’ll be showing how to take that new style, and doing some cool stuff with it that would be very difficult to do in the old style.

So we’ve got our tagTypes here. It’s an array that’s stored on the component. And then we have our template where we have our x-select, and in there we loop through all the tagTypes and give each one an x-option. But what if we want to add an option that’s not in one of the tagTypes? This is possible if we get our tagTypes from somewhere other than the component and it’s not easy to create that ourselves.

Well, in this new setup, we can just create an x-option. We can give it a value and then give it a display property in the middle. Then we’ll see that it’s been added. This is the display, and if we select this then our tagType will be ninja.

We can use a similar technique to create a prompt, and this will show when the value is null. So we can see that if we set one to the prompt, then it will turn the value null, and if we create a new one, it will automatically have the null value, so it will show the user the prompt, just like we want.

So so far, we can pull from a list, we can create our own custom options, and we can have a prompt. We can also pull from a separate list. So we can pull from two different lists. Let’s say we have a list on model, which is of other awesome things. Now we can use a second each loop, and then they show up in the list. It should be noted that with this particular technique of setting it on the model, that if you hit “New” then it won’t show up because there’s not yet a model associated with it. So it might be best to store it somewhere else, but the rest of the technique still stands.

So even with that little glitch, we can still do things that in the old style would’ve been much more complicated. We would’ve had to select and combine stuff in the model or in the component, but now we can do it in the template. Let’s take it one step farther.

We want to display stuff selectively depending on what other options on the model are. To do that, we’re going to have to take this out of emberx-select and back into plain Vanilla Ember, because what we’re about to do causes a few errors in emberx-select but not in Vanilla Ember.

First, we’ll add some checkboxes to the form. Here we’re checking the boolean, whether ninjas exist in this world, and then a boolean of whether we can see ninjas or not. Then here’s the fun part. We’ll add an if statement around the ninja option, and that option will only show up if ninjas exist in this world. If they can see ninjas, then it’ll show up as a ninja, otherwise it will show up as just a normal person.

Let’s see this in action. So there’s nothing here. We check “Ninjas Exist”, and it shows a normal person. We check that we “Can See Ninjas”, and we see it as “A ninja”. So we can change the content of the tagTypes based on other variables.

Now this example is a little bit silly, but in a real-life example we could see something where let’s say an admin gets a different set of options than someone else, or depending on how many actions the user has taken, it’ll show a different set of listings.

So in this episode, we showed how to make your select boxes awesome. We added extra options, we added a prompt, we created list from multiple sources, and we showed a way to create different options depending on how your variables are in the other parts of the application. I know you’ll find a way to make this very useful in your app, and I’ll see you next time.

Subscribe to our mailing list