Diverse tecniche di rendering nel modello di manubri emberjs

Question

Ultimamente sto leggendo molto su emberjs ma qualcosa non mi è chiaro: ho la sensazione che ci siano diversi modi di rendere un modello. Qualcuno può spiegare le differenze tra questi:

{{render}} 
{{partial}} 
{{template}} 
{{outlet}} 

sto usando pre4, quindi se alcune di queste parole chiave sono obsolete, si prega di avvisare.

Answer 1

È possibile cercare la fonte Ember.JS per tutti questi cercando: Ember.Handlebars.registerHelper('?'. Ad esempio, per trovare la parte in cui si definisce template, cercare: Ember.Handlebars.registerHelper ('template'

{{template}}

è simile al {{partial}}, ma sembra per modelli che si definiscono nel Ember.TEMPLATES hash dal codice sorgente si può vedere un esempio:.. Ember.TEMPLATES["my_cool_template"] = Ember.Handlebars.compile('<b>{{user}}</b>'); e quindi siamo in grado di rendere in questo modo

ho sentito un sussurro che {{template}} è @deprecated, ma posso trovo dove ho trovato quell'informazione al momento. Tuttavia, vale la pena ricordare che non mi sono mai trovato a usare questo. Preferisco invece lo {{partial}}.

Edit: Sembra come se non è @deprecated come di 3df5ddfd4f. Errore mio!

{{parziale}}

Questo è diverso l'approccio {{render}} dal fatto che la controller e view vengono ereditate dal contesto che ha chiamato. Ad esempio, se sei nello UserRoute e carichi in un partial nel tuo modello utente, allora lo UserView e lo saranno entrambi passati al tuo parziale, in modo che possano accedere esattamente alle stesse informazioni del suo attuale genitore.

I nomi parziali, una volta definiti, iniziano con un carattere di sottolineatura. Ad esempio, un partial Profile avrà lo data-template-name di: data-template-name="_profile" ma verrà inserito nella vista come {{partial "profile"}}.

{{}} presa

Probabilmente troverete voi stessi usando questo uno molto. Viene utilizzato prevalentemente nei casi in cui lo outlet cambia frequentemente, in base alle interazioni dell'utente. Passando a (this.transitionTo/{{#linkTo}}) un'altra pagina, Ember inserisce la vista nello {{outlet}} e alle relative controller e view.

Per fare un esempio, se si sta transizione in /#/animali domestici poi, per impostazione predefinita, Ember caricherà i PetsView nel {{outlet}}, e collegare il PetsController, tutto questo dopo l'inizializzazione del PetsRoute di prendere istruzioni prima inizializzare la vista e trovare il controller.

{{renda}}

Questa è una miscela di un {{outlet}} e {{partial}}. Viene utilizzato per pagine statiche che non si spostano per altre pagine (come fa outlet), ma non eredita il controller e la vista (come fa partial).

È meglio con un esempio. Diciamo che hai una navigazione. Di solito avrai solo una navigazione e non cambierà per un'altra, ma vuoi che la navigazione abbia il proprio controller e la sua vista, e non essere ereditata dal contesto (probabilmente ApplicationRoute). Pertanto, quando si inserisce la navigazione ({{render "navigation"}}), Ember allegherà App.NavigationController e App.NavigationView.

Sommario

• template: consulta un hash globale e inserisce la vista quando lo trova (possibilmente presto essere @deprecated);
• partial: utilizzato per suddividere viste complesse e ereditare il controller/vista dal genitore (se ci si trova nello UserController, anche il parziale avrà accesso a questo e alla vista associata).
• outlet: il più utilizzato e consente di passare rapidamente alle pagine per altre pagine. Controller pertinente/vista allegata.
• render: simile a una presa, ma viene utilizzato per le pagine che sono persistenti in tutta l'intera applicazione. Presume il controller/vista pertinente e non li eredita.

Ho spiegato bene?

Giusto per chiarire:

• parziale: Regolatore Ereditato, vista ereditato, non commutabile;
• Uscita: controller rilevante, vista pertinente, commutabile;
• Render: controller rilevante, vista pertinente, non commutabile;

Answer 2

La guida fornisce anche alcune informazioni utili here! Di seguito è riportato un breve riassunto:

Answer 3

volevo postare un'altra risposta qui che realmente mi ha aiutato a chiarire quando utilizzare i vari template tecniche -

percorso

Utilizzo di un percorso è quando hai bisogno di un percorso completo. Un 'percorso' ha un URL univoco ed è costituito da classi generate o definiti dall'utente del seguente tipo -

1. percorso (Ember.Route)
2. Controller (Ember.Controller || Ember.ArrayController || Ember.ObjectController)
3. View (Ember.View)
4. Template (modello Manubrio)

{{}} rendere

Utilizzare il {{render}} aiuto quando hai bisogno di una vista ma comunque necessario fornire alcune funzionalità con un controller. {{render}} fa non hanno un URL univoco e si compone delle seguenti -

1. Controller (Ember.Controller || Ember.ArrayController || Ember.ObjectController)
2. View (Ember.View)
3. Template (template Manubrio)

{{}} componente

Utilizzare l'helper {{component}} quando si costruisce un modello comunemente riutilizzato che esiste indipendentemente dal contesto in cui è visualizzato. Un esempio decente potrebbe essere se si costruisse un sito Web di vendita al dettaglio e si desiderasse che la vista di un prodotto fosse agnostica su dove è rappresentata. {{component}} fa non avere un URL univoco, né un controller ma invece ha una classe component e consiste delle seguenti -

1. Component (Ember.Component)
2. Template (modello Manubrio)

{{partial}}

Utilizzare l'helper {{partial}} quando si ri usando un po 'di mark-up. {{partial}} fa non hanno un URL univoco, né il supporto speciale come un componente e si compone delle seguenti -

1. Template (modello Manubrio)