ember.js - Предотвращение повторного рендеринга при переключении маршрута

Question

Упрощенная демонстрация: http://jsfiddle.net/indream/KskXx/
(это демо не может имитировать фактической среды с моей проблемой)

Для демонстрации: наведите курсор на фото покажет вам подпись.
Когда вы нажали фотографию, маршрут был изменен на «носитель» с помощью {{linkTo}} помощник & lightbox открыт.
При щелчке на лайтбокс-панели маршрут был изменен на 'feed' history API & lightbox закрыть.

Мой вопрос: Шаблон перерисовываются когда переключатель обратно в «корма».
(Вы можете проверить это, наведя на фотографии как заголовок, потерянный после этого.)
Я хочу остановить это, поскольку приложение откладывается при повторном рендеринге, если есть много фотографий.

Использование {{linkTo}} является причиной проблемы, пожалуйста, обратитесь к моему ответу

Я прочитал servel вопрос, как Сопутствующие Ember.js - currentViewBinding and stop re-rendering on every view transition и Animating views before destruction in Emberjs.
Но методы, предоставляемые кажется, не работает на RC2, я попытался изменить willDestroy события, оно работает не пересборка но забросили:
Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.
Uncaught Error: NotFoundError: DOM Exception 8
, когда я перешел на другой маршрут (т.е. пустого nowContent для загрузки другого контента). И изменить destroyElement не работает вообще.

Вот мой код, любые идеи для решения моей проблемы?

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(); 
    } 
}); 

Answer 1

Я решил эту проблему путем изменения {{linkTo}} к {{action}} & редактирования onUpdateURL обработчик местонахождения API.

Как {{linkTo}} должен быть пузырь до маршрутизатора, а {{action}} нет. При таком подходе URL-адрес все еще изменяется для обновления страницы, например Facebook, но шаблон не будет повторно отображаться.

Старый Шаблон:

{{#linkTo media feed.id}} 
<img src="{{unbound feed.images.low_resolution.url}}" /> 
{{/linkTo}} 

Новый шаблон:

<img {{action transitionToMedia feed.id}} src="{{unbound feed.images.low_resolution.url}}" /> 

Расположение Handler:

Ember.HistoryJsLocation = Ember.Object.extend({ 
    onUpdateURL: function(callback) { 
    ... 
    Ember.$(window).bind('popstate.ember-location-'+guid, function(e) { 
     if(window.suppressUpdateURL)return; 
     ... 
    }); 
    } 
}); 

Ember.Location.registerImplementation('historyJs', Ember.HistoryJsLocation); 

маршрутизатор события:

App.mainRoute = Em.Route.extend({ 
    events: { 
    transitionToMedia: function (id) { 
     window.suppressUpdateURL = true; 
     History.pushState(null, null, '/m/'+id); 
     App.pageController.lightbox(id); 
    } 
    } 
}); 

Lightbox Контроллер:

Folo.PageController = Em.Controller.extend({ 
    lightboxClose: function(e){ 
    ... 
    History.back(); 
    window.suppressUpdateURL = false; 
    } 
}); 

Примечание: Полный код для HistoryJsLocation пожалуйста, обратитесь к Html4 browsers does not support history.pushState and history.replaceState methods of History API from HTML5