Ember.js – Prevent re-render when switching route-Collection of common programming errors

Simplified demo: http://jsfiddle.net/indream/KskXx/
(this demo cannot simulate actual environment with my problem)

For the demo: Hover on photos will show you the caption.
When you clicked a photo, route changed to ‘media’ with {{linkTo}} helper & lightbox opened.
When clicked place outside lightbox, route changed back to ‘feed’ by history API & lightbox closed.

My question: Template re-rendered when switch back to ‘feed’.
(You can check it by hover on photos as caption lost after that.)
I want to stop this as the app lagged during re-render if there’re lots of photos.

Using {{linkTo}} is the reason of problem, please refer to my answer

I’ve read servel releated question like Ember.js – currentViewBinding and stop re-rendering on every view transition and Animating views before destruction in Emberjs.
But the methods provided seems not work for RC2, I’ve tried to modify willDestroy event, it works for not re-render but it throwed:
Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.
Uncaught Error: NotFoundError: DOM Exception 8
when I switched to another route (i.e. empty nowContent for loading other content). And modify destroyElement isn’t work at all.

Here’s my code, any ideas to solve my problem?

App.MainView = Ember.View.extend({
  templateName:'main',
  willDestroy: function() {
    if (App.get('destroyCurrentView')){
      this._super();
    }
  }
})
App.PageController = Ember.Controller.extend({
  lightboxClose:function(e){
    if(!e||e.target==e.currentTarget){
      $('#lightbox').hide();
      $('body').removeClass('noscroll');
      history.back();

      App.set('destroyCurrentView',false);
      setTimeout(function(){
        App.set('destroyCurrentView',true);
      }, 500);
    }
});
App.MediaRoute = App.mainRoute.extend({
  enter:function(){
    App.set('destroyCurrentView',false);
    this._super();
  }
});