Ember.js e manubri ogni helper, con sottoview

Question

Sto triyng utilizzare la visualizzazione della helper all'interno del mio {{#per ogni}} template blocchi senza l'utilizzo globale di percorsi (il mio controller creare e distruggere il loro punto di vista).

Esempi.Dato una vista con un myList array di proprietà, e un itemButton bambino vista:

Questo sarà il lavoro

<script type="text/x-handlebars" name="my-list-view">
{{#each myList}} <!-- App.myListView.myList -->

    {{view App.myListView.itemButton}} {{title}}

{{/each}}
</script>

Questo non:

<script type="text/x-handlebars" name="my-list-view">
{{itemButton}} <!-- works fine outside the each -->
{{#each myList}}

    {{view itemButton}} {{title}} <!-- itemButton view not found -->

{{/each}}
</script>

Non mi sembra di essere in grado di accedere al genitore di visualizzare da ogni view helper (di fatto o di accesso altro che la proprietà degli oggetti di essere iterato).

Il hacky soluzioni alternative Mi è venuta in mente sono:

• Aggiungere la vista da utilizzare per gli elementi che sto scorrendo.

o

1. La creazione di un collectionView in App.myListView
2. Creare un itemViewClass vista in vista di raccolta classe
3. Spostare il itemButton vista all'interno del itemViewClass
4. Sostituire {{#per ogni}} con {{#collezione##}}

o

• Creare un custom manubrio supporto per iterazione.

Entrambe queste opzioni sembrano orribili.Sicuramente c'è un'alternativa migliore rispetto alla creazione di 2 nuove classi (e di nidificazione 4 viste di profondità) solo per scorrere una lista, anche se.C'è una sostituzione manubrio helper posso usare invece?

---

Soluzione implementazioni

Opzione #1 :Modificando il contenuto dell'array

http://jsfiddle.net/FQEZq/3/ Svantaggi:Aggiungere la visualizzazione per ogni modello di istanza solo per iterazione.

Opzione #2 :Raccolta personalizzata vista

http://jsfiddle.net/ST24Y/1/ Svantaggi:Ora avete due viste aggiuntive che non ha bisogno / vuole, e meno controllo di markup.Riferimenti dal bambino vista l'istanza padre ora richiede parentView.parentView.parentView.

Answer 1

#each è troppo limitato per le tue esigenze.Si può fare il lavoro, se siete disposti a utilizzare un percorso globale per la visualizzazione che si desidera all'interno del nido #each.In caso contrario, la vostra collezione di vista l'approccio più.Aggiunta la visualizzazione per il modello di istanza è probabile che fangosa app design qualcosa di feroce, in modo da evitare che.

Una idea per mantenere i vostri modelli di pulito è quello di approfittare di Ember.View proprietà come:

• collectionView - Restituire il più vicino antenato che è un Ember.CollectionView
• itemView - Restituire il più vicino antenato che è un figlio diretto di un Ember.CollectionView
• contentView - Restituire il più vicino antenato che ha la proprietà del contenuto.

Answer 2

La cosa importante qui - opzioni.

Ganci per come si desidera utilizzare un modello, sono disponibili.Questi sono:

<-- render templates/name.js -->
{{partial 'name'}}

<-- render views/name.js -->
{{view 'name'}}

<-- render views/name1.js with controllers/name2.js -->
{{render 'name1' 'name2'}}

<!-- see also: -->
{{output}}
{{output 'named'}}
{{yield}}

Un esempio di variante del tuo modello iniziale che mostra 4 diverse opzioni:

<script type='text/x-handlebars' data-template-name='my-list-view'>
  <h2>Option 1</h2>

  {{#each myList}}
    {{! the 2nd parameter will look for itemButtonController }}
    {{render 'itembutton' itemButton}}
  {{/each}}

  <h2>Option 2</h2>
  {{#each myList}}
    {{! using an Ember Component }}
    {{#item-button }}
      some static text OR {{dynamic}}
    {{/item-button}}
    <!-- in component/item-button.hbs add {{yield}} for where you want the static content to output -->
  {{/each}}

  <h2>Option 3</h2>
  {{#each myList}}
    {{! if the button is to be a link }}
    {{#link-to 'route' parameter tagName='button' classNames='btn'}}
      {{title}}
    {{/link-to}}
  {{/each}}

  <h2>Option 4</h2>
  <p>Ludicrous example showing almost every reference option!</p>

  {{! focus the context on subview data }}
  {{#with someArrayOrCollectionOfView}}
    {{! prepend type to add context - here returning back up to this view's properties }}
    {{#each view.myList}}
      {{! this is equivalent to someArrayOrCollectionOfView[x].name }}
      {{name}}

      {{! a button that hooks in route, model, and 2 controllers, and applies a target for the output when clicked }}
      {{#link-to 'page' controllers.page.nextPage target='outlet' tagName='button' disabledWhen=controller.disableNext }}
        {{model.buttonName}}
      {{/link-to}}
    {{/each}}
  {{/with}}

  {{! generic default target (automatic) }}
  {{outlet}}

  {{! example of a named target }}
  {{outlet 'footerlinks'}}
</script>

Mmmm...riferimento per l'ulteriore lettura:Ember.Manubri.aiutanti