Bending Ember Data Records in Input Select - ember.js

Question

With this data structure:
App.Publisher = DS.Model.extend({
name: DS.attr('string'),
books: DS.hasMany('book', {async: true})
});
App.Book = DS.Model.extend({
title: DS.attr('string'),
summary: DS.attr('string'),
author: DS.belongsTo('author', {async: true}),
publisher: DS.belongsTo('publisher', {async: true})
};
In the book edit and book new forms, I'd like to display the publishers using a <input type=select>element.
My questions:
1 : how do I bind the ember-data publishers records to the input element.
2: how do I select the current book publisher in the element for edit or a default for a new book
3: how do I bind the selected publisher to the book, when submitting the form
Thanks a lot.

Answer 1

You can use Ember's built in select view for most of what you need here. To bind the list of publishers to the view's content you may need to get the list of publishers in the route. For example:
App.BookNewRoute = Ember.Route.extend({
var route = this;
var modelPromise = new Ember.RSVP.Promise(function(resolve, reject){
route.store.find('publisher').then(function(result){
console.log("got the publisher list");
// Have the new book model include the list of publishers, and a
// selectedPub that can be used as the initial selection in the
// drop down list, and will also be the model attribute bound to the list
var modelObj = {'publishers': result, 'selectedPub': result[0].get('id')};
resolve(modelObj);
});
return modelPromise;
});
Now in your template you can use 'publishers' with the select view:
{{view "select"
content=publishers
optionValuePath="content.id"
optionLabelPath="content.name"
value="selectedPub"}}
When the user submits the form, 'selectedPub' will have the id of the publisher for that book. Use that id to get the corresponding publisher model (e.g.):
bookController.find('publishers').filterBy('id', bookController.selectedPub)[0] )
Then set that model as the publisher for the book.

Answer 2

Here is the solution I found, which is super simple.
in the AppBooksNewController, I define a property called publishers which holds all my select elements.
AppBooksNewController = Ember.Controller.extend({
publishers: function () {
return this.store.findAll('publisher');
}.property(),
...
});
in my template books\new, I define the select view, using the property I've defined in the controller, and the property of the model I want to bind.
{{view "select"
content=publishers
optionValuePath="content"
optionLabelPath="content.name"
selectionBinding='model.publisher'
}}
That's all, The select is binded to the model.publisher.
and will be saved calling this.get('model').save() in the controller actions.
If it is a new record, I'm linking the default publisher during the new record creation:
App.BooksNewRoute = Ember.Route.extend({
model: function (params) {
var newBook = this.store.createRecord('book');
this.store.find('publisher', 1 ).then(function (publisher) {
newBook.set('publisher', publisher);
});
return newBook;
}
});