How to Populate Ember.Select with Model Data?

Question

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.

score 2 · Accepted Answer · answered Oct 17 '14 at 13:53

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>

That's close, so thank you, that works to pull every value, but if there are multiple records that have the same name, your select contains all the duplicates. How to get unique values? — redOctober13, Oct 21 '14 at 16:15
If your backend API returns records for the select box with same "text" but different IDs, you have to cleanse your data. If your backend API is returning repeated records (including id), then the last repeated remains and previous are taken off. Still need to do data cleansing. If you have no control over the backend API, you might want to handle this in `Route#setupController` so you filter and remove repeated records before you set the model into the `controller.model` property. The `select` component, IMHO, should not deal with this type of thing as it is a data concern rather than display — MilkyWayJoe, Oct 21 '14 at 17:07
"Global lookup of Ember.Select from a Handlebars template is deprecated." — Andy Hayden, Jun 06 '15 at 17:31

score 1 · Answer 2 · answered Oct 17 '14 at 13:41

content of the select view wants to be an array of strings, or an array of objects.

If you want to be able to control which properties are used as the selection and as the value, an array of objects works best.

{{view Ember.Select
        prompt="Select Something"
        content=modelProperty
        optionLabelPath="content.labelProperty"
        optionValuePath="content.valueProperty"
        value=boundValue
  }}

here is a working example

How to Populate Ember.Select with Model Data?

2 Answers2