7

私はルーターベースの EmberJS アプリを作成しています (優れたルーターガイドに強くモデル化されています)。ただし、ビューとコントローラーのどちらに属するかについて、私はかなり混乱しています。

{{action showFoo}} は多くの場合、状態の変化を示しており、Router がアプリのステート マシンであることは完全に理解しています。しかし、私の行動のいくつかはそのカテゴリーに分類されません。

これが私の実際のコードの例です（htmlは簡略化されていますが、口ひげはそのままです）。ajax経由で機能するログインフォームが必要です（つまり、htmlフォームはサーバーに直接投稿されず、emberアプリにjson経由でログインを試みるように指示します）。

<form>
    Email Name: {{view Ember.TextField valueBinding="email"}}
    Password:  {{view Ember.TextField valueBinding="password"}}
    <button type="submit" {{ action logIn target="this" }}>Sign in</button>  
</form>

valueBindings は loginController のフィールドですが、logIn ハンドラーはビューにあります (テンプレートにコントローラーを呼び出すように指示する方法がわからなかったため)。これは奇妙なディストリビューションのように感じます。これに対する Ember の正しいアプローチが何であるかはわかりません。

ログイン試行の要求は実際には状態の変更ではないため、ルーターがアクションを処理する必要はないと思います。loginController は、ログインを試すのに適した場所のように感じます。ログイン応答が受信された後、そのコントローラーは状態の変更をトリガーできます。

4

3 に答える 3

3

ログイン試行の要求は実際には状態の変更ではないため、ルーターがアクションを処理する必要はないと思います。

まさにその通りだと思います。ログインを試みると、authenticatingたとえば「ログイン」への別のクリックが無視される状態に移行する必要があります。

したがって、これはルーターで処理する必要があります。http://jsfiddle.net/pangratz666/97Uyh/を参照してください。

ハンドルバー: 

<script type="text/x-handlebars" >
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="login" >
    <p class="info">{{message}}</p>
    Login to view the admin area <br/>
    Email: {{view Ember.TextField valueBinding="email" }} <br/>
    Password: {{view Ember.TextField valueBinding="password" }} <br/>
    <button {{action login}} >Login</button>
</script>

<script type="text/x-handlebars" data-template-name="authenticating" >
    Communicating with server ...
</script>

<script type="text/x-handlebars" data-template-name="admin" >
    Hello admin!
</script>

</p>

JavaScript : 

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
    login: function() {
        // reset message
        this.set('message', null);

        // get data from login form
        var loginProps = this.getProperties('email', 'password');

        // simulate communication with server
        Ember.run.later(this, function() {
            if (loginProps.password === 'admin') {
                this.set('isAuthenticated', true);
                this.get('target').send('isAuthenticated');
            } else {
                this.set('message', 'Invalid username or password');
                this.set('isAuthenticated', false);
                this.get('target').send('isNotAuthenticated');
            }
        }, 1000);

        // inform target that authentication is in progress        
        this.get('target').send('authenticationInProgress');
    },
    logout: function() {
        this.set('isAuthenticated', false);
    }
});
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.LoginView = Ember.View.extend({
    templateName: 'login'
});
App.AdminView = Ember.View.extend({
    templateName: 'admin'
});
App.AuthenticatingView = Ember.View.extend({
    templateName: 'authenticating'
});

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            loggedOut: Ember.Route.extend({
                route: '/',
                connectOutlets: function(router) {
                    router.get('applicationController').connectOutlet('login');
                },
                login: function(router) {
                    router.get('applicationController').login();
                },
                authenticationInProgress: function(router) {
                    router.transitionTo('authenticating');
                }
            }),
            authenticating: Ember.State.extend({
                enter: function(router) {
                    router.get('applicationController').connectOutlet('authenticating');
                },
                isAuthenticated: function(router) {
                    router.transitionTo('loggedIn');
                },
                isNotAuthenticated: function(router) {
                    router.transitionTo('loggedOut');
                }
            }),
            loggedIn: Ember.Route.extend({
                route: '/admin',
                connectOutlets: function(router) {
                    if (!router.get('applicationController.isAuthenticated')) {
                        router.transitionTo('loggedOut');
                    }
                    router.get('applicationController').connectOutlet('admin');
                },
                logout: function(router) {
                    router.get('applicationController').logout();
                }
            })
        })
    })
});​
于 2012-10-27T20:12:41.127 に答える
1

これにはコントローラーを使用できます。使用しているテンプレートはコントローラーにアクセスできます。

<script type="text/x-handlebars" data-template-name="loginTemplate">
  {{#if controller.login}}
    Logged in!
  {{else}}
    Login failed
  {{/if}}
</script>

このフィドルは、それを行う小さなアプリを示しています。

次に、ログインが発生した後、ルーターにアクションコールを行うか、ログインに失敗したことをユーザーに示すことができます。

于 2012-10-23T07:50:28.187 に答える
1

コードを次のように変更して、それを実行しました。

{{ action logIn target="controller" }}
于 2012-10-27T11:26:49.507 に答える