ember.js - Ember.js - currentViewBinding 并在每次视图转换时停止重新渲染

Question

我有一个状态机，每当使用 currentViewBinding 进入新状态时，我都使用新的 currentViewBinding 来换出整个 containerView 的一部分：

  index: Ember.State.create({
    enter: function(manager) {
      App.get('appController').set('feedView', Ember.View.create({
        templateName: 'dashboard_feed',
        contentBinding: 'App.feedController.content',
        controller: App.get('App.feedController')
      }));
    }
  })

此时此刻，这些视图的渲染非常缓慢。有没有办法可以将视图保存在内存中并避免每次进入状态时重新渲染？

Answer 1

我实际上为 StackOverflow 上的另一个问题提供了一个解决方案，但它在这里也非常相关。重新激活视图时避免从头开始重新渲染 Flash 对象

这是 jsFiddle：http: //jsfiddle.net/EE3B8/1

我用一个标志扩展了 ContainerView 以阻止它在 currentView 被破坏时破坏它。您需要将视图实例存放在不会被破坏的地方。

App.ImmortalContainerView = Ember.ContainerView.extend({
    destroyCurrentView: true,

    willDestroy: function() {
        if (!this.destroyCurrentView) { this._currentViewWillChange(); }
        this._super();
    }
});

App.immortalView = Ember.View.create({
    template: Ember.Handlebars.compile(
        'I WILL LIVE FOREVER!'
    )
});

​</p>

Answer 2

您可以扩展 Ember.ContainerView 以显示/隐藏其 currentView 视图，如下所示：

App.FastContainerView = Ember.ContainerView.extend({
  toggleCurrentViewFast: true,

  _currentViewWillChange: function() {
    var childViews = this.get("childViews"),
        currentView = this.get("currentView");

    if (this.toggleCurrentViewFast && childViews.indexOf(currentView) >= 0) {
      currentView.set("isVisible", false);
    } else {
      this._super();
    }
  },

  _currentViewDidChange: function() {
    var childViews = this.get("childViews"),
        currentView = this.get("currentView");

    if (this.toggleCurrentViewFast && childViews.indexOf(currentView) >= 0) {
      currentView.set("isVisible", true);
    } else {
      this._super();
    }
  }
});