New Twiddle

components.my-select.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['includeBaseStyling:input-select'],
  includeBaseStyling: true,
  content: null,
  optionValuePath: 'value',
  optionLabelPath: 'label',
  disabled: false,
  useOptionsAsValues: false,
  enablePromptSelection: false,

  // pass `value` if you're not validating, `fieldName` if you are; never both!
  value: null,
  fieldName: null,
  
  init() {
    this._super(...arguments);
    Ember.bind(this, 'value', `targetObject.${this.get('fieldName')}`);
  },

  didReceiveAttrs(changeset, ...args) {
    this._super(changeset, ...args);
    Ember.assert('{{sq-input-select}} error: Specify either "value" or "fieldName" but not both', !(changeset.newAttrs.value && changeset.newAttrs.fieldName));
  },

  prompt: 'Select',

  optionsAreStringsOrNumbers: Ember.computed('content.[]', function() {
    const options = this.get('content');
    return Ember.isArray(options) && options.every(option => {
      return typeof option === 'string' || typeof option === 'number';
    });
  }),

  change(e) {
    if (this.get('isDestroyed')) {
      return;
    }

    const selectIndex = e.target.selectedIndex;
    const optionsIndex = this.get('prompt') ? selectIndex - 1 : selectIndex;
    const selectedOption = this.get('content').objectAt(optionsIndex);

    let selectedValue;
    if (this.get('useOptionsAsValues') || this.get('optionsAreStringsOrNumbers')) {
      selectedValue = selectedOption;
    } else {
      selectedValue = Ember.get(selectedOption, this.get('optionValuePath'));
    }

    this.set('value', selectedValue);
    this.sendAction('onChange', selectedOption);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  employeeRole: Ember.computed.alias('content.firstObject'),
  content: [{
  		label: 'First',
      value: { foo: 'bar1' }
  	},
  	{
  		label: 'Second',
      value: { foo: 'bar2' }
  	},
		{
  		label: 'Third',
      value: { foo: 'bar3' }
  	}],
  actions: {
  	addNew() {
			this.get('content').pushObject({
      	label: 'New Role',
        vlaue: { foo: 'bar4' }
      });
  	}
  }
});

helpers.eq.js

import Ember from 'ember';

export function eq([first, second]) {
  return first === second;
}

export default Ember.Helper.helper(eq);

helpers.not.js

import Ember from 'ember';

export function not([value]) {
  // NOTE: JS falsey values are.. not intuitive.
  // Be aware that `0` if falsey, `[]` is falsey, but `''` is truthy.
  //
  // Ideally, only use this helper with true boolean values.
  return !value;
}

export default Ember.Helper.helper(not);

templates.application.hbs

{{my-select content=content
            feildName="employeeRole"}

<h1>Value is {{value}}</h1>

<button onclick={{action "addNew"}}>Add New</button>

templates.components.my-select.hbs

<select class="{{if includeBaseStyling 'input input-select__select'}} {{selectClassNames}} {{if isInvalid 'input-is-invalid'}}"
        disabled={{disabled}}>

  {{#if prompt}}
    <option disabled={{not enablePromptSelection}}
            selected={{not value}}>
      {{~prompt~}}
    </option>
  {{/if}}

  {{#if optionsAreStringsOrNumbers}}
    {{#each content as |option|}}
      <option value={{option}}
              selected={{eq option value}}>
        {{~option~}}
      </option>
    {{/each}}
  {{else}}
    {{#each content as |option|}}
      <option value={{unless useOptionsAsValues (get option optionValuePath)}}
              selected={{eq (if useOptionsAsValues option (get option optionValuePath)) value}}>
        {{~get option optionLabelPath~}}
      </option>
    {{/each}}
  {{/if}}
</select>

twiddle.json

{
  "version": "0.11.0",
  "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.2.2",
    "ember-data": "2.2.1",
    "ember-template-compiler": "2.2.2",
    "ember-testing": "2.2.2"
  },
  "addons": {}
}