How to Populate Ember.Select with Model Data?

I've read lots of other SO questions about Ember.Selects, but nothing near enough to work. I have dropdowns to filter certain fields in my returned data. The actual filtering is another issue, I'm just trying to get the dropdown populated at the moment.

Mine work with static arrays declared on my controller, as per the docs, but what I really want is to have the dropdown populated with unique values from the data so I don't have to maintain an options array.

I think all I need is the way to set the select's content property to a field in the model, but just putting content=field or contentBinding=field has not worked.

Any suggestions or best practices on this would be much appreciated.

Solution

Here's a working code snippet:

App = Em.Application.create({
  displayName: 'Some.App'
});


App.Person = DS.Model.extend({
  name: DS.attr('string')
});

// this is testing data that should come from your backend api
App.Person.FIXTURES = [
  {id: 1, name: 'John Oliver' },
  {id: 2, name: 'Jon Stewart' },
  {id: 3, name: 'Cenk Uygur' }
];

// in real life, you'll be using another type of adapter, likely DS.RESTAdapter
App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.IndexRoute = Em.Route.extend({
  model: function(params) { 
     return this.store.find('person');
  } 
});

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Le Select" />
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.7.0/ember.js"></script>
  <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
  
  <script type="text/x-handlebars">
    <h1>{{unbound App.displayName}}</h1>
    <hr />
    {{outlet}} 
  </script>
  
  <script type="text/x-handlebars" data-template-name="index">
    <h3>Index</h3> 
    Le Person: {{view Ember.Select prompt='- Select -' content=controller.model optionValuePath='content.id' optionLabelPath="content.name"}}
  </script>

</body>
</html>