emberjs 组件表单动作

Question

我正在尝试根据 DRF 令牌进行身份验证。

我已经能够使用我创建的授权应用程序成功登录。

我想我会很圆滑，让登录表单成为一个组件。

但是，自从将其作为一个组件后，我无法登录并收到 Assertion failure。

我的 templates/components/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 route/app，效果会很好。

Answer 1

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

app/templates/application.hbs

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

app/components/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.
        }
    }
});

app/controllers/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);
      });
    }
  }
});

emberjs 组件表单动作

emberjs component form action

authentication

ember.js

ember-cli