Ember.js: How to display index of records and links without sideloading

Question

I'm trying to set up a listings page something like this:

{{#each task in controller}}
  {{#linkTo 'project' task.project}}
    {{task.project.name}}
  {{/linkTo}}
{{/each}}

The issue is that I don't want to have to pre-load every project associated with every task, since I'm not likely to need all of them and I end up in a mess of associations going down the tree of dependencies for the project. Instead, I'm trying to do something like this:

{{#each task in controller}}
  {{#linkTo 'project' task.project_params}}
    {{task.project_name}}
  {{/linkTo}}
{{/each}}

And then the task model:

App.Task = DS.Model.extend
  project_id: DS.attr('number')                                                
  project_name: DS.attr('string')

  project_params: (->                                                             
    { id: @get('project_id') }                                                    
  ).property('project_id')

This solution actually works on the tasks/index page as expected. I see the project name, and the link goes to the project. But then on the project page, the project doesn't seem to think it is associated with any tasks. It hits the server and the server responds with the project and associated tasks. But then it doesn't seem to refresh the project with the new data. What am I doing wrong?

Answer 1

Looks like you can just do:

{{#each task in controller}}
  {{#linkTo 'project' task.project_id}}
    {{task.project_name}}
  {{/linkTo}}
{{/each}}

Answer 2

Have you tried using an async relationship?

Something like:

App.Task = DS.Model.extend
  project: DS.belongsTo('project', async: true)
  projectName: DS.attr('string')

Not sure if it's possible to get it to work with just the project id in the JSON, but you should be able to do it with links e.g. { task: { id: 1, projectName: 'foo', links: { project: 'project/2' } (this nests project under task which may not be desired, but maybe you can use full URLs or something).

The link in the template would be like {{#link-to 'projects.show' project}}{{projectName}}{{/link-to}}

Here is a live example.