create - Ember.js y handlebars cada ayudante, con subvistas

ember onclick

Question

Estoy intentando usar el asistente de visualización dentro de mis {{#each}} bloques de plantillas sin utilizar rutas globales (mis controladores crean y destruyen sus propias vistas).

Ejemplos. Dada una vista con una propiedad myList array y una vista secundaria itemButton:

Esto funcionará

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

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

{{/each}}
</script>

Esto no:

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

No parece poder acceder a la vista padre desde cada asistente de visualización (o de hecho acceder a cualquier cosa que no sean las propiedades de los objetos que se iteran).

Las soluciones "hacky" que he propuesto son:

• Agregue la vista que quiero usar a los elementos sobre los que estoy iterando.

o

1. Crear un collectionView en App.myListView
2. Crea una vista itemViewClass en esa clase de vista de colección
3. Mueva la vista del botón item dentro del elementoViewClass
4. Reemplace {{#each}} con {{#collection}}

o

• Cree un ayudante de barra de manillar personalizado para la iteración.

Ambas opciones parecen horribles. Sin duda, hay una mejor alternativa que crear 2 nuevas clases (y anidar 4 vistas de profundidad) solo para iterar sobre una lista. ¿Hay un asistente de manillar de reemplazo que pueda usar en su lugar?

Implementaciones de soluciones

Opción n. ° 1: modificación de la matriz de contenido

http://jsfiddle.net/FQEZq/3/ Desventajas: tener que agregar la vista a cada instancia de modelo solo para la iteración.

Opción n. ° 2: vista de colección personalizada

http://jsfiddle.net/ST24Y/1/ Desventajas: ahora tiene dos vistas adicionales que no necesita / desea, y menos control de marcado. Las referencias de la vista secundaria a la instancia principal ahora requieren parentView.parentView.parentView.

Answer 1

Lo más importante aquí - opciones.

Los ganchos para la forma en que desea utilizar una plantilla están disponibles. Estos son:

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

Una variante de ejemplo de su plantilla inicial que muestra 4 opciones diferentes:

<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 ... referencia para lecturas adicionales: Ember.Handlebars.helpers

Answer 2

#each es demasiado limitada para sus requisitos. Puede hacer que funcione si está dispuesto a utilizar una ruta global a la vista que desea anidar dentro de #each . De lo contrario, su enfoque de vista de colección es el mejor. Agregar la vista a la instancia del modelo es probable que enturbie el diseño de tu aplicación algo feroz, así que evitaría eso.

Una idea para mantener sus plantillas limpias es aprovechar las propiedades de Ember.View como:

• collectionView - Devuelve el ancestro más cercano que sea un Ember.CollectionView
• itemView - Devuelve el ancestro más cercano que es hijo directo de un Ember.CollectionView
• contentView : devuelve el antecesor más cercano que tiene el contenido de la propiedad.