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 - 防止交换路由

回答

相关问题