Cacher is the code snippet organizer for pro developers

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}

<select onchange={{action this.attrs.onChange value="target.value"}}>
  {{#if placeholder}}
    <option value="" disabled selected>{{placeholder}}</option>
  {{/if}}

  {{#if hasBlock}}
    {{yield}}
  {{else if isFlatArray}}
    {{#each options as |option|}}
      <option value={{option}} selected={{eq value option}}>{{option}}</option>
    {{/each}}
  {{else}}
    {{#each options as |option|}}
      <option value={{get option valueKey}} selected={{eq value (get option valueKey)}}>{{get option labelKey}}</option>
    {{/each}}
  {{/if}}
</select>

<h1>Welcome to Billboard</h1>

<h3>Setting the value</h3>
{{ui-select
	value=favoriteArtistValue
  onChange=(action (mut favoriteArtistValue))
	options=artists
	valueKey='value'
	placeholder='Favorite Artist'}}
<p>Favorite Artist Value: {{if favoriteArtistValue favoriteArtistValue 'None'}}</p>

<h3>With a pre set value</h3>
{{ui-select
	value=favoriteArtistId
  onChange=(action (mut favoriteArtistId))
	options=artists
	valueKey='value'
	placeholder='Favorite Artist'}}
<p>Favorite Artist Value: {{if favoriteArtistId favoriteArtistId 'None'}}</p>

<h3>Using your own special action</h3>
{{ui-select
	options=artists
  value=favoriteArtistWat
  onChange=(action 'specialAction')
	valueKey='value'
	placeholder='Favorite Artist'}}
<p>Favorite Artist Value: {{if favoriteArtistWat favoriteArtistWat 'None'}}</p>

<h3>Using a flat array</h3>
{{ui-select
	options=flatArtists
  value=favoriteArtistFlat
  onChange=(action (mut favoriteArtistFlat))
	valueKey='value'
	placeholder='Favorite Artist'}}
<p>Favorite Artist Value: {{if favoriteArtistFlat favoriteArtistFlat 'None'}}</p>

import Ember from 'ember';

export function equalHelper(params) {
  return params[0] === params[1];
}

export default Ember.Helper.helper(equalHelper);

import Ember from 'ember';

const {
  set
} = Ember;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  favoriteArtistValue: null,
  favoriteArtistId: 'nb',
  favoriteArtistWat: null,
  favoriteArtistFlat: 'Sum 41',

  artists: [
    { value: 'rb', label: 'Rebecca Black' },
    { value: 'nb', label: 'Nickleback' },
    { value: 'ts', label: 'T Swifty' }
  ],
  
  flatArtists: [
    'Rebecca Black',
    'Nickleback',
    'Sum 41'
  ],
  
  actions: {
    specialAction(value) {
      if (!value) {
        return;
      }
      set(this, 'favoriteArtistWat', value);
      alert(`You like ${value}?`);
    }
  }
});

import Ember from 'ember';

const {
  Component,
  get,
  set,
  computed,
  isEmpty,
  run
} = Ember;

export default Component.extend({
  classNames: ['form-item', 'form-item--select'],

  value: null,

  placeholder: null,

  options: null,
	valueKey: 'id',
  labelKey: 'label',

  selection: null,

  isFlatArray: null,

  setValue() {
    let selection = get(this, 'selection');
    let valueKey = get(this, 'valueKey');

    if (!get(this, 'value') && selection) {
      // set(this, 'value', get(selection, valueKey));
    }

    set(this, 'isFlatArray', typeof get(this, 'options.firstObject') === 'string');
  },
	
  didReceiveAttrs() {
		this._super(...arguments);
    run.once(this, this.setValue);
  }
});