Question

简化演示：http://jsfiddle.net/indream/KskXx/
（这个演示无法模拟我的问题的实际环境）

对于演示：将鼠标悬停在照片上会显示标题当您点击照片时，路线已更改为“媒体”，其中包含{{linkTo}}帮助＆amp;灯箱打开。
点击灯箱外的地方时，路线由history API＆amp;更改回'Feed'。灯箱关闭。

我的问题：切换回“Feed”时，模板重新呈现。
~~（你可以将照片悬停在照片上，因为标题丢失了。）~~
如果有很多照片，我想在重新渲染期间停止此操作，因为应用程序会滞后。

使用{{linkTo}}是问题的原因，请参阅我的回答

我读过像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}}＆amp;编辑位置API的onUpdateURL处理程序。

由于{{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

Ember.js - 切换路由时防止重新渲染

1 个答案: