Ember.js - 防止交換路由

時重新渲染

簡化的演示：http://jsfiddle.net/indream/KskXx/
（本演示中無法模擬與我的問題實際環境）Ember.js - 防止交換路由

對於演示：將鼠標懸停在照片上會顯示你的標題。
當您點擊一張照片時，路線變爲'媒體'{{linkTo}}幫手&燈箱打開。
當在燈箱外點擊放置時，路線由history API &燈箱關閉關閉。

我的問題：模板重新呈現切換回'feed'時。
~~（您可以點擊照片通過懸停檢查它作爲標題後丟失。）~~
我想停止這是在落後的應用程序重新渲染，如果有是大量的照片。

使用{{linkTo}}是問題的原因，請參考我的答案

我讀過像Ember.js - currentViewBinding and stop re-rendering on every view transition和Animating views before destruction in Emberjs servel相關型號的問題。
但似乎提供不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(); 
    } 
});

來源

2013-04-13 inDream

我不知道哪個模板重新渲染。你能詳細說明嗎？ –

@ChristopherSwasey當切換回'feed'路線時，'main'模板被重新渲染。 – inDream

我已經改變{{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}}" />

地點處理程序：

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

燈箱控制器：

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

來源

2013-04-14 13:21:53 inDream

Ember.js - 防止交換路由

回答

相關問題