Ember.js multipla, di nome utilizzo presa

Question

Ho una domanda, che avrà uno strato di vista organizzato in tre parti:

1. Sidebar
2. Toolbar-sinistra
3. Toolbar-destra

Ho passato poche ore a cercare di trovare qualcosa di utile con google, ma non ho avuto fortuna. Avrei bisogno di un esempio di applicazione breve e completo su come farlo usando Router e connectOutlet, con le prese denominate.

Thx ahead.

Answer 1

AGGIORNAMENTO: Questo codice è obsoleto, a causa delle modifiche di Ember api.

Ho raggiunto un punto, dove posso dire che ho trovato la soluzione che è meglio per me.

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

Utilizzando tale modello di applicazione, posso scegliere dove visualizzare le viste. Come questo:

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'); 
      } 
     }) 
    }) 
}); 

ho i tre punti di vista, che non sono importanti dal punto di vista la soluzione, quelli ottenere resi ai loro punti vendita.

Spero che questo aiuti gli altri.

Answer 2

Nel modello di applicazione, è necessario dichiarare una presa denominata come {{outlet sidebar}}. Allo stesso modo per le barre degli strumenti che hai menzionato.

MODIFICA: il resto non è aggiornato. Come ha detto @dineth, vedere Rendering a Template.

Poi, nel tuo percorso (diciamo App.NavigationView è ciò che si vuole attaccare lì): Esempio

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

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

riferimento this documentation sul {{outlet}} aiutante, e this documentation sul .connectOutlet callback .

Answer 3

Con il nuovo router si può fare qualcosa di simile:

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

In rotta È possibile gestire il contenuto dei punti vendita:

// 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 
     }); 
    } 
}); 

Si dovrebbe avere un menu -template però.

Ulteriori informazioni a riguardo here.