How to populate nested views/controllers?

Question

I'm attempting to create an Ember application with nested views. I (basically) want three vertical columns. The left-most containing a list of Environments. Clicking an environment will populate the second (centre) column with the Job objects associated with the environment, and then when clicking on a Job in second column it populates the third column with various details based on the Job.

The data is coming from a Rails api via ActiveModel serializers, embedding IDs as required.

So far, I have the following routes defined:

Skills.Router.map ()->
  this.resource 'environments', ->
    this.resource 'environment', {path: ":environment_id"}, ->
      this.resource 'jobs'

Skills.IndexRoute = Ember.Route.extend
  redirect: ->
    this.transitionTo 'environments'

Skills.EnvironmentsRoute = Ember.Route.extend
  setupController: (controller) -> 
    controller.set('model', this.store.find('environment'))

My handlebars application template:

<div class="container">
    <div class="row">
        {{outlet }}
    </div>
</div>

The Environments template

<div id="environments" class="col-sm-4">
    {{#each }}
        {{view Skills.EnvironmentView }}
    {{/each}}
</div>

<div class="col-sm-8">
    {{outlet}}
</div>

Environments View:

Skills.EnvironmentView = Ember.View.extend
    templateName: 'environment'

    click: ->
        # should I be trying to update the Jobs controller here?

Environments controller:

Skills.EnvironmentsController = Ember.ArrayController

Models:

Skills.Environment = DS.Model.extend
  title: DS.attr('string')
  description: DS.attr('string')
  jobs: DS.hasMany('job')

Skills.Job = DS.Model.extend
  title: DS.attr('string')
  environment: DS.belongsTo('environment')

This will lookup and display the Environments in the first column. How do I get the Jobs controller populated with the selected Environments Jobs from the association?

Edit: Binding seems like what I'm after, but I'm unsure as to how to bind the model/content property of one controller to a property from another?

buuda buuda · Accepted Answer · 2014-02-18T19:21:55

What you should do is populate the list of environments in the environments template (not the environments.index template). When an environment is selected from this list it should transition to the environment.show route. In the environment resource route it should show the list of jobs for that environment. This environment template should be rendered into the environments template. Then choosing a job will transition to the job.show route underneath the jobs resource.

The key is that the top level resource route will be retained and the subsequent child routes will be rendered into it, preserving the resource lists while rendering the child details.

Skills.Router.map ()->
  this.resource 'environments', ->
    this.route 'index'
    this.resource 'environment', {path: ":environment_id"}, ->
      this.route 'index'
      this.route 'show'
      this.resource 'jobs'
        this.route 'index'
          this.resource 'job'
            this.route 'show'

How to populate nested views/controllers?

1 Answers