Ember JS 路由器应用程序：视图和控制器

Question

我正在创建一个基于路由器的 EmberJS 应用程序（强烈模仿 excellent router guide）。但是，我对视图和控制器中的内容感到很困惑。

我完全明白 {{action showFoo}} 通常表示状态更改，并且路由器是我的应用程序的状态机。但我的一些行为不属于这一类。

这是我实际代码中的一个示例（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 感觉是尝试登录的正确位置。收到登录响应后，该控制器可以触发状态更改。

Answer 1

我认为路由器不应该处理该操作，因为请求登录尝试并不是真正的状态更改。

我认为确实是这种情况：尝试登录应该转换为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>

​

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();
                }
            })
        })
    })
});​

Answer 2

您可以为此使用控制器，您使用的模板可以访问控制器。

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

这个小提琴展示了一个小应用程序，它可以做到这一点：fiddle

然后在登录发生后，您可以对路由器进行操作调用，或向用户显示登录失败。

Answer 3

我刚刚通过将代码更改为：

{{ action logIn target="controller" }}