Ember.js: Avoid current route re-enter (and re-render) on url dynamic segment update

Question

Is it possible to update a dynamic parameter in the URL for the current route without recreating the route's view?

Specifically, say I have a route that handles post/:post_id. The view for this route shows the post with the given id but (in an infinite-scroll style) also allows the user to smoothly scroll down to subsequent posts. I'd like to update the url to reflect the post they are currently viewing. If I call reaplceWith('post', newlyFocusedPost) the renderTemplate hook fires, my original view is destroyed, a new view rendered, and the smoothness is lost.

I'd love the equivalent of Backbone.js's:

router.navigate('posts/123', {navigate:false, replace:true});

Another solution would be if rendering the same template into the same outlet reused the existing view and just updated its bindings.

(My current solution is to use a subroute, postAtId, that handles the dynamic id with no view plus a call to controllerFor('post').set('content', newPost))

Ed4 Ed4 · Accepted Answer · 2013-04-26T17:19:39

Re-rendering when only the context has changed is arguably a bug. There is a pull request that fixes this.

But it's also possible to work around this behavior in your own route by overriding renderTemplate so that it only renders immediately after entering the route for the first time. For example:

App.MyRoute = Ember.Route.extend({
  activate: function() {
    this.needsToRender = true;
  },
  renderTemplate: function() {
    if (this.needsToRender){
      this.needsToRender = false;
      render();
    }
  }
});

Ember.js: Avoid current route re-enter (and re-render) on url dynamic segment update

1 Answers