Ember.js - currentViewBinding and stop re-rendering on every view transition

问题

I have a statemachine and I am using the new currentViewBinding to swap out parts of an overall containerView whenever a new state is entered using currentViewBinding:

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

At this moment in time, the rendering of these view is quite slow. Is there a way I could keep the view in memory and avoid the re-rendering every time I enter the state?

回答1:

I actually provided a solution to this for another question on StackOverflow, but it's super relevant here too. Avoiding re-rendering of a flash object from scratch when view is reactivated

Here's the jsFiddle: http://jsfiddle.net/EE3B8/1

I extend ContainerView with a flag to stop it from destroying the currentView upon it's destruction. You'll want to stash the view instance somewhere that it won't be destroyed.

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

回答2:

You could extend Ember.ContainerView to show/hide its currentView view like so:

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

来源：https://stackoverflow.com/questions/10908205/ember-js-currentviewbinding-and-stop-re-rendering-on-every-view-transition

标签

ember.js