Specifying which properties to use in a custom drop-down Ember component

I've created a reusable drop-down component in Ember:

/app/components/dropdown/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'select',
  classNames: ['form-control'],
  placeholder: null,
  items: null,
  selected: null,
  change: function(event) {
    var items = this.get('items');
    var index = event.target.selectedIndex;
    var selected = items ? items[index - 1] : null;
    this.sendAction('selectedChanged', selected);
  }
});

/app/components/dropdown/template.js

{{#if placeholder}}
<option value="">{{placeholder}}</option>
{{/if}}
{{#each items as | item |}}
<option value="{{item}}" selected={{is-equal item selected}}>{{item.name}}</option>
{{/each}}

The component currently uses the 'name' property as the label for the option. However, I want the ability to specify what property to use, in order to make the component more flexible (so that I can sometimes use, for example, 'displayName').

With the old Ember Select component, you could do the following:

{{view "select"
  content=programmers
  optionValuePath="content.id"
  optionLabelPath="content.firstName"
  value=currentProgrammer.id
}}

...and tell it which properties to use for both the value and label. I'd like to do something similar, but I'm not sure how. (I tried reading through the source but it was a bit beyond me). Thanks in advance.