Ember transition.retry() 不删除以前的视图

Question

基于Ember.js Authentication - the right way 创建一个简单的登录 - 在第一次访问时，用户会转换到会话登录视图，一旦验证转换回他们首先尝试访问的路由，所有工作正常，除了登录表单在新路线的视图转换和渲染。

设置是：

灰烬：1.7.0 灰烬数据：1.0.0-beta.8.2a68c63a 车把：1.3.0 jQuery : 1.11.1

路由器：

Router.map(function() {
  this.resource('sessions', function() {
    this.route('logout');
    this.route('login');
  });

  this.resource('posts', { path: '/posts' }, function() {
    this.route('post', { path: '/post/:post_id' });
    this.route('new');
  });
});

申请途径：

export default Ember.Route.extend({
  beforeModel: function() {
    this.transitionTo('posts');
  }
});

发帖路线：

export default Ember.Route.extend({
  beforeModel: function(transition) {
    if(Ember.isEmpty(this.controllerFor('sessions').get('token'))) {
      return this.redirectToLogin(transition);
    }
  },

  redirectToLogin: function(transition) {
    this.controllerFor('sessions').set('attemptedTransition', transition);
    return this.transitionTo('sessions');
  },

  model: function() {
    return this.store.find('post');
  },

  actions: {
    ...
  }
});

会话路线：

export default Ember.Route.extend({
  // Reset Session Controller to avoid date from a past authentication
  setupController: function(controller, context) {
    controller.reset();
  }
});

会话控制器：

export default Ember.Controller.extend({
  // initialization method to verify if there is a access_token cookie set
  // so we can set our ajax header with it to access the protected pages
  init: function() {
    Ember.Logger.log('sessons.init');
    Ember.Logger.log(Ember.$);
    this._super();
    if (Ember.$.cookie('access_token')) {
      Ember.$.ajaxSetup({
        headers: {
          'Authorization': 'Bearer ' + Ember.$.cookie('access_token')
        }
      });
    }
  },

  // overwriting the default attemptedTransition attribute from the Ember.Controller object
  attemptedTransition: null,


  // create and set the token & current user objects based on the respective cookies
  token:               Ember.$.cookie('access_token'),
  currentUser:         Ember.$.cookie('auth_user'),

  // create a observer binded to the token property of this controller
  // to set/remove the authentication tokens
  tokenChanged: function() {
    Ember.Logger.log('tokenChanged');
    if (Ember.isEmpty(this.get('token'))) {
      Ember.$.removeCookie('access_token');
      Ember.$.removeCookie('auth_user');
    } else {
      Ember.$.cookie('access_token', this.get('token'));
      Ember.$.cookie('auth_user', this.get('currentUser'));
    }
  }.observes('token'),

  // reset the controller properties and the ajax header
  reset: function() {
    this.setProperties({
      username_or_email: null,
      password:          null,
      token:             null,
      currentUser:       null
    });
    Ember.$.ajaxSetup({
      headers: {
        'Authorization': 'Bearer none'
      }
    });
  },

  actions: {
    loginUser: function() {
      Ember.Logger.log('loginUser');

      var _this = this;

      var attemptedTrans = this.get('attemptedTransition');
      var data =           this.getProperties('username_or_email', 'password');
      Ember.Logger.log(data);

      // Clear form fields
      this.setProperties({
        username_or_email: null,
        password: null
      });

      // send a POST request to the /sessions api with the form data
      Ember.$.post('/api/session', data).then( function(response) {
        Ember.Logger.log(response);

        // set the ajax header
        Ember.$.ajaxSetup({
          headers: {
            'Authorization': 'Bearer ' + response.api_key.access_token
          }
        });

        // create an apiKey record on the local storage based on the returned object
        var key = _this.get('store').createRecord('apikey', {
          accessToken: response.api_key.access_token
        });

        // find a user based on the user_id returned from the request to the session api
        _this.store.find('user', response.api_key.user_id).then(function(user) {
          Ember.Logger.log('user->');
          Ember.Logger.log(user);
          // set this controller token & current user properties
          // based on the data from the user and access_token
          _this.setProperties({
            token:        response.api_key.access_token,
            currentUser:  user.getProperties('username') 
          });

          // set the relationship between the User and the ApiKey models & save the apiKey object
          key.set('user', user);
          key.save();

          user.get('api_keys').content.push(key);

          Ember.Logger.log(attemptedTrans);
          if(attemptedTrans) {
            attemptedTrans.retry();
            _this.set('attemptedTrans', null);
          }
        });
      });
    }
  }
});

这是启动转换的最后一次尝试的Trans.retry()。我错过了什么吗？

Answer 1

您的车把中可能有错误的 html（缺少结束标签等）。

Answer 2

Kingpin2k 上面的回答为我指明了正确的方向。对于其他偶然发现这个问题的人来说，这归结为我使用 {{outlet}} 时出现的错误。我的原始应用程序模板具有以下结构：

{{#if isAuthenticated}}
  <div>
    ... (Nav etc)
  </div>

  {{outlet}}
{{else}}
  {{outlet}}
{{/if}}

这样做的效果是，一旦isAuthenticated 为真，模板就会重新呈现，用于标识登录表单元素的脚本标签不再有效 - 因此它们不会被删除。

简单的解决方案是将模板更改为：

{{#if isAuthenticated}}
  <div>
    ... (Nav etc)
  </div>
{{/if}}

{{outlet}}