JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.11/ember-data.js"></script>
<script type="text/x-handlebars">
<h2>Ember.js Discussion Forum</h2>
<h3>How to populate a select box from a datastore</h3>
{{outlet}}
<div style="margin-top:2em;"><a href="http://discuss.emberjs.com/t/how-to-populate-a-select-box-from-a-datastore/6663" target="_blank">http://discuss.emberjs.com/t/how-to-populate-a-select-box-from-a-datastore/6663</a></div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<div><label>Status:</label></div>
{{view "select"
content=statusnamesLookup
optionValuePath="content.id"
optionLabelPath="content.name"
selection=selectedStatusname
prompt="-- status --"}}
<p>selected: {{selectedStatusname.name}}</p>
</script>
CSS
body { padding: 2em; }
JavaScript
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
// model: function() {
// return this.store.find('statusname');
// }
statusnames: Ember.A(),
afterModel: function(record, transition){
var self = this;
return this.store.find('statusname').then(function(result){
self.set('statusnames', result);
});
},
setupController: function(controller, model){
this._super(controller, model);
controller.set('statusnamesLookup', this.get('statusnames'));
},
});
App.IndexController = Ember.ObjectController.extend({
statusnamesLookup: Ember.A(),
selectedStatusname: {}
});
App.Statusname = DS.Model.extend({
name: DS.attr('string')
});
App.Statusname.reopenClass({
FIXTURES: [
{ id: 301, name: 'online' },
{ id: 302, name: 'available' },
{ id: 303, name: 'away' },
{ id: 311, name: 'unknown' }
]
});
App.ApplicationAdapter = DS.FixtureAdapter;