emberjs组件形式动作

Question

我尝试对DRF令牌进行身份验证。

我已经成功地使用我创建的auth应用程序登录了。

我以为我会光滑并使登录表单成为一个组件。

然而，由于它是一个组件，我无法登录，我得到Assertion failure。

我的模板/组件/ auth-login.hbs模板看起来像......

<form class='navbar-form navbar-right' {{action 'authenticate' on='submit'}}>
<div class="form-group">
{{input id='identification' placeholder='Username' type='text' class='form-control' value=identification}}
{{input id='password' placeholder='Password' type='password' class='form-control' value=password}}
</div>
<button type="submit">Login</button>
</form>

我也有app / controllers / auth-login.js

import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service(),

  actions: {
    authenticate: function() {
      var credentials = this.getProperties('identification', 'password'),
        authenticator = 'authenticator:jwt';

      this.get('session').authenticate(authenticator, credentials).catch((reason) => {
        this.set('errorMessage', reason.error || reason);
      });
    }
  }
});

它既可以作为应用程序使用，也可以作为组件使用。

如果我将模板空白，并使用auth路线/应用程序，那么它会很有效。

Answer 1

选项1.您需要在authenticate组件的操作哈希中定义操作auth-login 选项2.您可以在控制器中保留identification，password属性和authenticate操作。并包括如下所示的auth-component，

应用/模板/ application.hbs

{{auth-component identification=identification password=password authenticate="authenticate" }}

应用/组件/ AUTH-component.js

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        authenticate() {
            this.sendAction('authenticate'); //this will call corresonding controller authenticate method through bubbling.
        }
    }
});

应用/控制器/ application.js中

import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service(),

  actions: {
    authenticate: function() {
      var credentials = this.getProperties('identification', 'password'),
        authenticator = 'authenticator:jwt';

      this.get('session').authenticate(authenticator, credentials).catch((reason) => {
        this.set('errorMessage', reason.error || reason);
      });
    }
  }
});