Ember link-to within nested routes

Question

I'm trying to use the link-to helper with some nested routes. I've searched around but can't seem to find anything that works.

Right now I have this routing structure (simplified for this question):

App.Router.map ->
  @resource 'dashboard', ->
    @resource "apps", ->
      @resource "app",
        path: "/:app_id"
      , ->
        @resource "envs", ->
          @resource "env",
            path: "/:env_id"

I'm currently working in the "app" template (1 in this case) at this route:

#/dashboard/apps/1

Where I have a loop like so:

<ul>
    {{#each env}}
        <li>
            {{#link-to (not sure what to put here) }} {{ name }} {{/link-to}}
        </li>
    {{/each}}
</ul>

I would like to use a link-to helper to get to:

#/dashboard/apps/1/envs/1
#/dashboard/apps/1/envs/2
etc.

When I do this:

{{#link-to "envs"}} {{ name }} {{/link-to}}

I get close, it gives me: #/dashboard/apps/1/envs/. I just don't know how to attach the id for that env that is being clicked on.

Note - The paths works fine on their own - I just don't know how to get to them with the link-to helper

Other potential influences - I have a one-to-many relationship with my App and Env (environment) models:

App.App = DS.Model.extend
  name : DS.attr()
  env : DS.hasMany('env', {async: true})

App.Env = DS.Model.extend
  name : DS.attr()
  app : DS.belongsTo('app')

Thanks for any help

Kingpin2k Kingpin2k · Accepted Answer · 2014-10-25T15:29:42

I'd recommend changing env to envs, env sounds singular.

{{#each item in env}}
    <li>
        {{#link-to 'env' item }} {{ item.name }} {{/link-to}}
    </li>
{{/each}}

Ember link-to within nested routes

1 Answers