Proper way to set up view for nested route

1

I am building an app to track changes in results for different weight lifting movements.

I currently have the following routes defined. Lifts have a nested lift resource and a lift has results.

App.Router.map(function() {
  this.resource('lifts', function() {
    this.route('new');
    this.resource('lift', { path: '/:lift_id' }, function() {
      this.route('edit');
      this.route('result', { path: 'results/:result_id' });
    });
  });
});

I am having a problem rendering the output of a results view template.

I have the following view templates defined:

<script type="text/x-handlebars" data-template-name="lifts">
    <div class="row">
      <div class="col-md-4">
        <h1>Lifts</h1>
        {{#each}}
          <p>{{#link-to 'lift.result' this}}{{this.name}}{{/link-to}}</p>
        {{/each}}
        <p>{{#link-to 'lifts.new'}}Add a New Lift{{/link-to}}</p>
      </div>
      <div class="col-md-8">
        <div>
            {{outlet}}
        </div>
      </div>
    </div>

<script type="text/x-handlebars" data-template-name="lift">
    <h1>Lift Template</h1>
    {{outlet}}
  </script>

 <script type="text/x-handlebars" data-template-name="result">
    <h1>Results</h1>
  </script>

When I navigate to /lifts in the browser, I see the list of lift names as expected. When I click on a lift name, I see the <h1>Lift Template</h1>, but I do not see <h1>Results</h1> nested inside of that template.

What is wrong with the current set up that is keeping the results view template from rendering inside of the {{outlet}} defined in the lift view template?

2

I think the problem might be related to how my models and fixtures are defined. Adding that code here in case that sticks out to someone as being the problem:

// Models
App.Lift = DS.Model.extend({
  name: DS.attr('string'),
  results: DS.hasMany('result', {async: true})
});

App.Result = DS.Model.extend({
  date: DS.attr('date'),
  repScheme: DS.attr('number'),
  load: DS.attr('number'),
  notes: DS.attr('string'),
  lift: DS.belongsTo('lift')
});

// Fixtures
App.Lift.FIXTURES = [
  {
    id: 1,
    name: 'Back Squat',
    results: [100]
  },
  {
    id: 2,
    name: 'Front Squat',
    results: [101]
  }
];

App.Result.FIXTURES = [
  {
    id: 100,
    date: '10/25/2014',
    lift: 1,
    repScheme: 1,
    load: 325,
    notes: ''
  },
  {
    id: 101,
    date: '10/26/2014',
    lift: 2,
    repScheme: 1,
    load: 305,
    notes: ''
  }
];
3

I found the problem. I had not defined my ResultsRoute. Defining the following fixed the issue of results not coming back,

App.ResultsRoute = Ember.Route.extend({
  model: function() {
    return this.store.findAll('result');
  }
});