Ember.js access multiple models in a template with selectlist

Question

I have a challenge I cannot get around:

I can't populate the selectlist with another model then article
I have on template 'article' and use the same article view for creating new articles is that possible with the same select?

I hope someone has experience with it?

I have the following template:

<script type="text/x-handlebars" data-template-name="article">
    Name: {{name}}
    Landcodes: {{view Ember.Select contentBinding="model.landcode" 
                 optionLabelPath="content.code optionValuePath="content.id"}}
</script>

Model

App.Article = DS.Model.extend({
    naam: DS.attr('string'),
    landcode: DS.hasMany('landcode')
});
App.Landcode = DS.Model.extend({
    code: DS.attr('string'),
    image: DS.attr('string')
});

Router

// for editing an existing article
App.ArticleRoute = Ember.Route.extend({
    model: function (params) {
        return this.store.find('article', params.id);
    }
});

// for creating a new article
App.ArticleNewRoute = Ember.Route.extend({
    renderTemplate: function () { // using the same template as article
        this.render('article', {
            controller: 'article.new'
        });
    },
    model: function () {
        return this.store.createRecord('article');
    } 
});

Edit: updated jsbin: http://emberjs.jsbin.com/aJATOhEp/4/edit?html,js,output Edit 2: latest working Ember.Select with a working selected option from model: http://emberjs.jsbin.com/aJATOhEp/11/edit?html,js,output

Kingpin2k Kingpin2k · Accepted Answer · 2013-11-28T17:22:04

Generally if you want to share a template across multiple templates you should use a partial, but in your particular case I believe you should use a needs and access the model/controller from a different route.

In the example below I have the post route which has a list of colors, then if you click the create New link it will take you to the post.new route. The post.new route also shows that same list of colors, but it's grabbing that list from the post route. In the PostNewController I've added a property needs and set it to post. This tells ember that the post.new controller needs the post controller. Now inside the post.new controller I can access the post controller using controllers.post.******. I did this when creating the select in the post.new template.

 {{view Ember.Select contentBinding="controllers.post.colors"  
   optionLabelPath="content.color" optionValuePath="content.id"}}

http://emberjs.jsbin.com/aJATOhEp/1/edit

Here's an example based on your jsbin below. The trick is to setup the controller manually if it isn't in the route at any point.

http://emberjs.jsbin.com/aJATOhEp/10/edit

Ember.js access multiple models in a template with selectlist

2 Answers