Ember.js múltiple, el uso de salida llamado

Question

I tiene 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 de derecha

He pasado 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 ahead.

Answer 1

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

He llegado a un punto, donde 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 una plantilla de aplicación de este tipo, puedo elegir dónde mostrar las vistas. De esta manera:

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, los consiguen prestados a sus puntos de venta.

Espero que esto ayude a los demás.

Answer 2

En la plantilla de su aplicación, tendrá que declarar un establecimiento con nombre como {{outlet sidebar}}. Del mismo modo para las barras de herramientas que mencionaste.

EDITAR: El resto está desactualizado. Como dijo @dineth, vea Rendering a Template.

Luego, en su ruta (digamos que App.NavigationView es lo que quiere meter allí): ejemplo

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

Recuadro: http://jsfiddle.net/q3snW/7/

Referencia this documentation en el {{outlet}} ayudante, y this documentation en el .connectOutlet devolución de llamada .

Answer 3

Con el nuevo router que puede hacer algo como esto:

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

En la 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 
     }); 
    } 
}); 

Debe tener una menu -template sin embargo.

Puedes leer más al respecto here.