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.