Ember.js {{linkTo}} to itself does not render

Question

I have a problem with a linkTo that points to itself. The actual problem is in an application that has a sidebar with a set of links. The first time a click the link the model and view is loaded and displayed properly. However on the second click the view and/or model disappear.

I've condensed the problem in this jsfiddle. The index route displays a list of links and when clicking on one of the links it will display the detail. In the detail page I have a link to itself but when I click it the model does not show.

The detail template shows the content fine but note the {{firstName}} or {{lastName}}

<script type="text/x-handlebars" data-template-name="item">
  <h2>Item Content:</h2>
  {{#linkTo "item" id}}Reload me{{/linkTo}}
  {{content}}
  <ul>
     <li>{{firstName}} {{lastName}}</li>
  </ul>
</script>

I think the issue is similar to Ember.js - linkTo error on second call

Updated sample

Here is a new example With linkTo at the top levelwhere the {{linkTo}} item is in the top level application template

<script type="text/x-handlebars" data-template-name="application">
    {{#linkTo "test" 0}}Test 0{{/linkTo}}
    {{outlet}}
</script>

Following @intuitivepixel solution using an action gives me the same result

<script type="text/x-handlebars" data-template-name="application">
    <a href="#" {{action reloadMe "test" 0}}>Test 0</a>
    {{outlet}}
</script>

intuitivepixel intuitivepixel · Accepted Answer · 2013-08-13T20:20:05

Not everything can be done with the {{linkTo}} helper, IMO for this kind of feature (like a reload) you should go for a {{action}} helper instead.

First define the action that does the routing for you when called:

App.TestRoute = Ember.Route.extend({
  events: {
    reloadMe: function(route, content) {
      this.transitionTo(route, content);
    }
  },
  serialize: function(model) {
    return {id: model.id};
  }   
});

And then in your template:

<a href="#" {{action reloadMe "test" content}}>Reload me</a>

See here how you could implement it: http://jsfiddle.net/FSd6H/4/

Hope it helps.

Ember.js {{linkTo}} to itself does not render

1 Answers