ember.js - guide - ventajas de emberjs

Aplicación EmberJS Router: Vistas vs Controladores

Question

Estoy creando una aplicación EmberJS basada en enrutadores (fuertemente modelada en la excelente guía de enrutadores ). Sin embargo, estoy bastante confundido sobre lo que pertenece a una vista vs en un controlador.

Entiendo totalmente que {{action showFoo}} a menudo indica un cambio de estado y que el enrutador es la máquina de estado para mi aplicación. Pero algunas de mis acciones no entran en esa categoría.

Aquí hay un ejemplo de mi código real (html simplificado pero bigotes intactos). Quiero tener un formulario de inicio de sesión que funcione a través de ajax (es decir, el formulario html no se publica directamente en el servidor, le dice a mi aplicación de brasas que intente iniciar sesión a través de 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> 

Los ValueBindings son campos en mi loginController pero el manejador de logIn está en mi opinión (porque no pude encontrar la manera de decirle a la plantilla que llame al controlador). Siento que esta es una distribución extraña y no estoy seguro de cuál es el enfoque de Ember correcto para esto.

No creo que el enrutador deba manejar la acción porque solicitar un intento de inicio de sesión no es realmente un cambio de estado. El loginController se siente como el lugar correcto para probar el inicio de sesión. Después de recibir una respuesta de inicio de sesión, ese controlador podría activar el cambio de estado.

Answer 1

Puede usar el controlador para esto, la plantilla que usa tiene acceso al controlador.

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

Este violín muestra una pequeña aplicación, que hace eso: violín

Luego de que se haya registrado, puede hacer una llamada de acción a su enrutador o mostrarle al usuario que el inicio de sesión falló.

Answer 2

Acabo de hacerlo haciendo cambiar los códigos como:

{{ action logIn target="controller" }}

Answer 3

No creo que el enrutador deba manejar la acción porque solicitar un intento de inicio de sesión no es realmente un cambio de estado.

Creo que ese es exactamente el caso: intentar un inicio de sesión debería pasar a un estado de authenticating , donde, por ejemplo, se ignora otro clic para "iniciar sesión".

Así que, en mi humilde opinión, esto debería ser manejado por el enrutador. Estoy pensando en algo como esto, ver http://jsfiddle.net/pangratz666/97Uyh/ :

Manubrios :

<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>

1.

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