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

时间:2014-09-24 11:09:26

标签: ember.js

基于Ember.js Authentication - the right way创建一个简单的登录 - 在第一次访问时,用户可以转换到会话登录视图,一旦验证转换回他们首次尝试访问的路由,除了登录之外转换后,表单仍然在视图中,并为新路径呈现视图。

设置为:

Ember:1.7.0 Ember数据: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()。我错过了什么吗?

2 个答案:

答案 0 :(得分:0)

你的把手中可能有糟糕的html(缺少结束标签等)。

答案 1 :(得分:0)

Kingpin2k上面的回答指出了我正确的方向。对于其他任何绊倒这个问题的人来说,我使用{{outlet}}时会出现错误。我的原始应用程序模板具有以下结构:

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

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

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

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

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

{{outlet}}