emberjsコンポーネントフォームアクション

Question

私はDRFトークンに対して認証しようとしています。

作成した認証アプリケーションを使用してログインできました。

私は滑らかになり、ログインフォームをコンポーネントにすると思っていました。

しかし、私はログインすることができないので、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> 

私もアプリ/コントローラ/ 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. auth-loginのアクションハッシュでアクションauthenticateを定義する必要があります。
オプション2コントローラーにidentification,のプロパティとauthenticateアクションを保持できます。以下のようなAUTH成分、

APP /テンプレート/

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

APP /コンポーネント/ 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.hbsを含みます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); 
     }); 
    } 
    } 
});