Nested templates not refreshing leaf values

1

This should hopefully make sense, if not I’ll bust it out to a jsfiddle.

Here’s my router:

@resource 'sources'
@resource 'source', path: '/sources/:source_id', ->
  @route 'edit'
  @resource 'items', path: 'items'
  @resource 'item', path: 'items/:item_id'

I’m trying to render a list of sources in an outlet. The sources template is simple, does a foreach source in sources, linkto the source. The source template in turn links to the items view. I can post those if people want to see.

The behavior I get is weird: on first loading #/sources/2/items, I get the items associated with source_id 2. It’s very gratifying (especially since everything has been so smooth to this point).

BUT

If I go back a level, either by clicking browser-back, or by clicking the home button (generated via a linkto in the template) and then click on another source, say source 3, the resultant template displays the data for source 3 (source title), but the list of items is still source 2’s list of items. Manually going to #/sources/3/items in this case would also display source 3’s direct data, but the items for source 2. Refreshing the browser loads source 3’s items, and I can see on my rails server that I’m not getting the /api/items?ids=blablabla for source 3’s items until that point.

Here’s where I get the list of items on the controller, and I’m pretty sure this is where I’m going wrong.

Social.ItemsRoute = Social.AuthedRoute.extend({
  needs: 'source',
  model: function() {
    return this.controllerFor('source').get('items');
  }
});

Here are the relevant handlebars bits.

sources!
  {{#each source in model}}
  <li>
    {{#linkTo 'source' source}}
    {{source.description}} {{source.kind}} {{source.grain}} {{source.feed_url}} {{source.base_url}}
    {{/linkTo}}
  </li>
  {{/each}}

source!
{{#linkTo 'items' model}}
{{description}} {{kind}} {{grain}} {{feed_url}} {{base_url}}
{{/linkTo}}
{{outlet}}

item!
{{#each item in model}}
  <li>
    {{item.item_url}} {{item.kind}} {{item.grain}}
  </li>
  {{/each}}
2

I’m going to leave my above post there, because I think there’s still something about it that I don’t quite get (and there may still be a call for trying to do it this way in certain other UI situations, so I’m interested in finding out what I’m Doing Wrong), but I did find a workaround.

Specifically, instead of building a list of items from the parent source in the items view, I did an #each over the items within the source view:

append to source.hbs

{{#each item in items}}
{{item.item_url}}
{{/each}}

And that works just fine - so now in my source singleton view, I can see a list of the nested items. I’m starting to get a handle on how ember puts things together, so this is cool.

3

A couple of notes,

needs isn’t necessary inside of the route, that’s just for controller declarations.

My guess, is the model hook wasn’t being called each time, figuring it already had the model, so no need to waste a call. It’s a little hard to tell without looking at it in action, but glad you found a workaround.