2013-08-04 1 views
6

Così ho una pagina che assomiglia alla seguenteEmber.js - modello predefinito da renderizzare in una presa?

[ Nav Bar ] 

|   | 
| Content | 
|   | 

La barra di navigazione che voglio essere costante su tutte le pagine. Quindi l'approccio che ho usato è stato quello di impostare la mia pagina come segue:

[ Nav Bar ] 

{{outlet}} 

Questo è grande, ora posso visualizzare le pagine differenti nel mio sbocco per diverse vie.

Ma cosa succede se voglio che un modello predefinito venga reso nella presa per la mia home page?

sono riuscito a raggiungere questo obiettivo reindirizzando / a /home, ma ci deve essere un modo migliore per fare questo che mi permette di rendere una home page predefinita a / senza re-instradamento?

Qualsiasi consiglio apprezzato,

Grazie, Daniel

risposta

7

per rendere roba in {{uscita}} alla pagina radice /, è necessario definire uno script handlerbar per l'indice:

Il codice barra di navigazione, probabilmente simile a questa:

<script type="text/x-handlebars"> 
    <div class="navbar ..."> 
    ... 
    </div> 

    {{outlet}} 
</script> 

Il pagina radice che sarà posto all'interno {{uscita}} è il fermo degli impianti:

<script type="text/x-handlebars" id="index"> 
    <div class="container"> 
     <h1>Root page!!</h1> 
    </div> 
</script> 

In altre parole, è necessario creare uno script manubrio che avrà un id = "index".

Dovrebbe funzionare. Non ha bisogno di alcun codice js per funzionare.

+1

Grazie per la risposta. Purtroppo, ho già un modello 'indice' - questo è il modello che contiene la barra di navigazione e la presa ... – bluepnume

+0

Quindi dovresti solo spostare la barra di navigazione all'interno del manubrio che non ha alcun id o modello di dati -nome. Controlla questo: http://jsfiddle.net/jorat1346/8tvRj/1/ Hai contenuti nella home page, perché questo modello non funzionerebbe. – darkzangel

+0

Giusto - la mia difficoltà con quello che stai suggerendo era, ho un modello che dovevo usare per popolare la barra di navigazione, ma dal momento che il router non sembra essere invocato per l'applicazione (solo l''indice'), I non aveva nessun posto dove popolare il mio modello. Pensandoci bene, immagino di poter aggirare questo creando MyApp.ApplicationController e popolando il mio modello in init(). Grazie per tutti i consigli, proverò un po 'di questo. – bluepnume

1

devo ammettere che questa proprietà non è ben documentato e sepolto nella documentazione per Ember.View ma si potrebbe provare a impostare la proprietà defaultTemplate sul ApplicationView. Vedi here per maggiori informazioni su questo (cerca nella pagina 'defaultTemplate').

Spero che aiuti.

+0

Grazie per il suggerimento. Finito per andare con la risposta di cui sopra, ma questo è stato anche utile. – bluepnume

0

La seguente dichiarazione nei documenti mi ha aiutato a risolvere esattamente lo stesso problema che stavo avendo che è riportata nella domanda: Ember routing docs

Il modello indice sarà reso in {{uscita}} nel modello di applicazione. Se l'utente naviga verso/preferiti, Ember sostituirà il modello di indice con il modello dei preferiti.

Come sto usando la struttura pod nel mio progetto, ho creato un percorso indice con il mio modello predefinito e ho inserito il componente nav-bar nel mio file application/template.hbs.

app/applicazione/template.hbs:

<div id="pageWrapper"> 
    <div id="navbarfixed">{{nav-bar options=options}}</div> 
    <div id="pageContent"> 
     {{outlet}} 
    </div> 
</div> 

app/index/template.hbs

<div id="homeWrapper"> <!--This gets rendered by default in outlet above--> 
Some default content of outlet 
</div>