1

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

对于演示：将鼠标悬停在照片上会显示标题。
当您单击照片时，路线更改为“媒体”，{{linkTo}}并打开了助手和灯箱。
当点击灯箱外的地方时，路线更改回“供稿”，history API灯箱关闭。

我的问题：切换回“提要”时重新渲染模板。
（您可以通过将鼠标悬停在照片上来检查它，因为在那之后标题丢失。）
如果有很多照片，我想停止这个，因为应用程序在重新渲染期间滞后。

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

我已经阅读了与服务相关的问题，例如Ember.js - currentViewBinding 并停止在 Emberjs 中销毁之前对每个视图转换和动画视图进行重新渲染。 但是提供的方法似乎不适用于 RC2，我尝试修改事件，它适用于不重新渲染但它抛出： 当我切换到另一条路线时（即为加载其他内容为空）。并且修改根本不起作用。
willDestroy
Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.
Uncaught Error: NotFoundError: DOM Exception 8
nowContentdestroyElement

这是我的代码，有什么想法可以解决我的问题吗？

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

1 回答 1

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}}" />

位置处理程序：

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 浏览器不支持 HTML5 中 History API 的 history.pushState 和 history.replaceState 方法

于 2013-04-14T13:21:53.370 回答