ember.js - with - emberjs transitiontoroute

Ember.js uso múltiple, llamado outlet

Question

Tengo una aplicación, que tendrá una capa de vista organizada en tres partes:

1. Barra lateral
2. Barra de herramientas izquierda
3. Barra de herramientas-derecha

He gastado puede durar algunas horas tratando de encontrar algo útil con google, pero no tuve suerte. Necesitaría un ejemplo de aplicación breve y completo sobre cómo hacer esto usando Router y connectOutlet, con salidas con nombre.

Thx adelante.

Answer 1

Con el nuevo enrutador puedes hacer algo como esto:

{{outlet "menu"}}
{{outlet}}

En su ruta puede manejar el contenido de los puntos de venta:

// application route
Ember.Route.extend({
    renderTemplate: function() {
        // Render default outlet   
        this.render();
        // render extra outlets
        this.render("menu", {
            outlet: "menu",
            into: "application" // important when using at root level
        });
    }
});

Sin embargo, debería tener un menu plantilla.

Puedes leer más sobre esto here .

Answer 2

En su plantilla de aplicación, deberá declarar una tienda de ofertas con nombre como {{outlet sidebar}} . Del mismo modo para las barras de herramientas que mencionaste.

EDITAR: el resto está desactualizado. Como dijo @dineth, vea Renderizar una plantilla .

Luego en tu ruta (digamos que App.NavigationView es lo que quieres que quede allí):

App.Router = Em.Router.extend({    
    root: Em.Route.extend({
        index: Em.Route.extend({
            route: ''/'',
            connectOutlets: function(router) {
                router.get(''applicationController'').connectOutlet(''sidebar'', ''navigation'');
            }
        })
    })
});

Ejemplo de barra lateral: http://jsfiddle.net/q3snW/7/

.connectOutlet esta documentación en el .connectOutlet {{outlet}} , y esta documentación en la .connectOutlet llamada .connectOutlet .

Answer 3

ACTUALIZACIÓN: Este código está desactualizado, debido a los cambios de la API Ember.

Llegué a un punto en el que puedo decir que encontré la solución que es mejor para mí.

<script type="text/x-handlebars" data-template-name="application">
<div class="container">
    <div class="toolbar">{{outlet toolbar}}</div>
    <div class="main">{{outlet dashboard}}</div>
    <div class="sidebar">{{outlet sidebar}}</div>
</div>
</script>

Utilizando dicha plantilla de aplicación, puedo elegir dónde mostrar las vistas. Me gusta esto:

App.router = Ember.Router.create({
    enableLogging: true,
    location: ''history'',
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: ''/admin/'',
            redirectsTo: ''login''
        }),
        login: Ember.Route.extend({
            route: ''/admin/login/'',
            doLogin: function(router, context) {
                "use strict";
                router.transitionTo(''dashboard'', context);
            },
            connectOutlets: function (router, context) {
                "use strict";
                router.get(''applicationController'').connectOutlet(''login'', "login");
            }
        }),
        dashboard: Ember.Route.extend({
            route: ''/admin/dashboard/'',
            doLogout: function(router, context) {
                "use strict";
                router.transitionTo(''login'', context);
            },
            connectOutlets: function (router, context) {
                "use strict";
                router.get(''applicationController'').connectOutlet(''sidebar'', ''sidebar'');
                router.get(''applicationController'').connectOutlet(''toolbar'', ''toolbar'');
                router.get(''applicationController'').connectOutlet(''dashboard'', ''dashboard'');
            }
        })
    })
});

Tengo los tres puntos de vista, que no son importantes desde el punto de vista de la solución, esos se rinden a sus puntos de venta.

Espero que esto ayude a otros.