Login in Ember 2

Question

私はEmberにとってとても新しいです。私は検索したことや古いチュートリアルとはかなり混同していると思います。私はプロジェクトを始めていますので、まだ始まっています。うまくいけば、皆さんが私を助けたり、私を正しい方向に向けることができます。事前に感謝して申し訳ありません。それを得る:)

私はログインページが欲しいです。そこで私は、ログインルートとメインルート（ログイン後にリダイレクトされるルート）を持つルータを作成しました。

router.js

Router.map(function(){ 
    this.route('main'); 
    this.route('login', {path: '/'}); 
}); 

それから私は私のテンプレートを持っており、ここではどこ私の混乱を開始しています。私が読んだ限りでは、Ember 2はコンポーネントを使用するためにコントローラを無効にする予定です。だから私は単一のテンプレートの代わりにコンポーネントを使用する必要がありますか？しかし、私のログインは再利用されないので、（私の考えでは）コンポーネントではないはずです。それがテンプレートであれば、ロジックはどこに実装されているのでしょうか？つまり、コンポーネントがあれば、そのコンポーネントのjsファイルにロジックが入りますが、そうでなければ、コントローラファイルになければなりません。しかしコントローラは廃止予定になるので、代わりにコンポーネントを使うべきです。そして私の心は爆発する。

現在、ログインテンプレートとそのロジックがルートにありますが、意図したとおりに動作しません。あなたが私を導くことを願っています。

login.hbs

<form class="form-horizontal" {{action 'auth' on="submit"}}> 

     <div class="form-group"> 
     <div class="col-md-4 col-md-offset-4 col-xs-6 col-xs-offset-3"> 
      <img id="img-logo" class="img-responsive" src="assets/images/ttlvd-color-alborde.png" /> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="loginFormUsername" class="control-label col-md-1">Usuario</label> 
     <div class="col-md-11 col-xs-12"> 
      {{input value=username class="form-control" id="loginFormUsername" placeholder="Introduzca su usuario"}} 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="loginFormPassword" class="control-label col-md-1">Contraseña</label> 
     <div class="col-md-11 col-xs-12"> 
      {{input type="password" value=password class="form-control" id="loginFormPassword" placeholder="Introduzca su contraseña"}} 
     </div> 
     </div> 

     <br/> 
     <div class="form-group"> 
     <div class="col-xs-12"> 
      <button type="submit" class="btn btn-primary" disabled= {{isDisabled}}>Entrar</button> 
     </div> 
     </div> 

    </form> 

login.js

import Ember from 'ember'; 

    export default Ember.Route.extend({ 
     username: '', 
     password: '', 

     usernameValid: Ember.computed.gte('username.length', 1), 
     passwordValid: Ember.computed.gte('password.length', 1), 
     isValid: Ember.computed.and('usernameValid', 'passwordValid'), 
     isDisabled: Ember.computed.not('isValid'), 

     actions: { 
     auth() { 
      var userData = this.getProperties('username', 'password'); 

      localStorage.username = userData.username; 

      console.log(localStorage.username); 
     } 
     } 
    }); 

私は私が知りたいとし、長い記事のため申し訳ありませんが、どのようなI場合は明らかにされている願っています尋ねることはEmberの常識のようなものです。

Answer 1

デフォルトでは、コントローラのプロパティのみがテンプレートにバインドされています。現在usernameとpasswordのプロパティはlogin.jsルートで定義されています。いずれかのプロパティをコントローラに移動する必要があります。または、ログインルートのsetupControllerフックで設定する必要があります。

setupController(controller,model){ 
this._super(...arguments); 
controller.set('username',this.get('username')); 
controller.set('password',this.get('password')); 
} 

IMHOコントローラは廃止予定になっても使用できます。 emberチームが移行するアドオンや何かを提供するからです。そうだといい。