JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/x-handlebars" data-template-name="glossaries">
<div>
{{view Ember.Select
contentBinding="allLanguages"
optionLabelPath="content.name"
optionValuePath="content.id"
selectionBinding="model.languages"
placeholder="Select Languages"
multiple=true
}}
</div>
</script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/jquery.min.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/handlebars.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember-data.js"></script>
JavaScript
var App = window.App = Ember.Application.create();
App.ApplicationSerializer = DS.RESTSerializer.extend({
});
App.ApplicationAdapter = DS.RESTAdapter.extend({
findAll: function(store, type, id) {
return new Ember.RSVP.Promise(function(resolve, reject) {
setTimeout(function(){
var data = { languages : [
{id:1, name: "en"},
{id:2, name: "de"},
{id:3, name: "fr"},
{id:4, name: "es"}
]};
console.log('adapter', data);
Ember.run(null, resolve, data);
},2000);
});
},
find: function(){
return findAll();
}
});
App.Language = DS.Model.extend({
name: DS.attr()
});
App.Glossary = DS.Model.extend({
name: DS.attr(),
languages: DS.hasMany('language', { async: true })
});
App.Router.map(function () {
this.resource('glossaries', { path: '/' });
});
App.GlossariesRoute = Ember.Route.extend({
model:function(){
var glossary = this.store.createRecord("glossary");
console.log("model");
return this.store.find('language').then(function(languages){
console.log("model resolved", languages);
return{
glossary: glossary,
languages: languages
};
});
},
setupController: function(controller, model){
console.log("controller", model);
controller.set('allLanguages', model.languages);
controller.set('model', model.glossary);
}
});
App.GlossariesController = Ember.ObjectController.extend({
allLanguages:null
});