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?

score 1 · Accepted Answer · answered Sep 27 '13 at 23:25

1

Looks like you can just do:

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

answered Sep 27 '13 at 23:25

lobati

9,284
5
40
61

Of course, but if you wanted to actually define the relationship between tasks and projects, you should be able to use belongsTo / hasMany and `#link-to 'project', task.project`. – gerry3 Sep 28 '13 at 13:31

score 0 · Answer 2 · answered Sep 27 '13 at 08:03

0

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.

answered Sep 27 '13 at 08:03

gerry3

21,420
9
66
74

Hmm, that doesn't seem to do the trick. It still loads up all of the projects on the tasks index page. – lobati Sep 27 '13 at 16:21
Good point. That doesn't make any sense. I wonder what is going on. – gerry3 Sep 28 '13 at 13:40

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

2 Answers2