Ember: How to set controller model for use in select view

Question

See: http://jsfiddle.net/cyclomarc/VXT53/8/

I have a select view in which I simply want to list all the authors available in the fixtures data. I therefore try to use a separate controller in which I want to set the content = App.Author.find(), but that doesn't work ...

App.AuthorsController = Ember.ArrayController.extend({
  //content: App.Store.findAll(App.Author)
  //content: App.Author.find()
});

I then want to use the AuthorController for contentBinding in the selectView, but also this is not succsesful ...

{{view Ember.Select
       contentBinding="App.AuthorsController"
       optionValuePath="content.id"
       optionLabelPath="content.name" 
       valueBinding="App.PublicationsEditController.author"
       prompt="Select an author"
   }}

The use case is that I have a publication in which an author is set (e.g. Marc) and I want to allow the user to change this to one of the available authors and then bind the new selected author to the publication model so that after a save the new author is saved.

intuitivepixel intuitivepixel · Accepted Answer · 2013-08-13T21:32:20

I guess this what you are after: http://jsfiddle.net/VXT53/10/

I had to do a couple of changes, first your router map where slightly wrong, the edit segment had to go after the id to match your template name pulications/edit:

App.Router.map(function () {
  this.resource('publications', { path: '/' }, function () {
    this.route("edit", { path: "/edit/:publication_id" });
  });
});

Your Ember.Select where binding to a class instead to some content, to set it up correctly I've defined a PublicationsEditControllet to requiere trough the needs API access to the AuthorsController's content:

App.PublicationsEditController = Ember.ObjectController.extend({
  needs: ['authors'],
  ...
});

this is how you then use it for your select:

{{view Ember.Select
   contentBinding="controllers.authors.content"
   optionValuePath="content.id"
   optionLabelPath="content.name" 
   valueBinding="content.name"
   selectionBinding="selectedAuthor"
   prompt="Select an author"
}}

Furthermore I've created a setupController hook which is used to set the AuthorsController's content to the list of authors:

App.PublicationsRoute = Ember.Route.extend({
  model: function () {
    return App.Publication.find();
  },
  setupController: function(controller, model) {
    this._super(controller, model);
    this.controllerFor('authors').set('content', App.Author.find());
  }
});

And lastly on you PublicationsEditController is a new property attached selectedAuthor to hold the currently selected author for binding etc.

App.PublicationsEditController = Ember.ArrayController.extend({
  needs: ['authors'],
  selectedAuthor: null
});

I guess this should work now and brings you one step further.

Hope it helps.

Ember: How to set controller model for use in select view

1 Answers