ember.js - ember - ¿Cómo usar variables de cadena en ayudantes de brasas(linkTo o parcial)?

ember onclick

Question

Necesito configurar un conjunto de enlaces de menú en el enrutador y luego renderizarlos en plantilla usando #each. Pero parece que #linkTo helper no reconoció las variables. Como puedo resolver esto?

Enrutador:

Lite.DashboardRoute = Em.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor(''application'').set(''mainControls'', [ {path: ''widgets.new'', name: ''Add'', classes: ''btn btn-success icon-ok-sign''} ])
  }
})

Aplicación de enlaces en las aplicaciones:

{{#each link in mainControls}}
  {{#linkTo link.route class=link.classes}} {{link.name}} {{/linkTo}}
{{/each}}

Mensaje de error:

ember.debug.js:51 Error: assertion failed: The route link.route was not found

Versión de Ember:

// Version: v1.0.0-pre.4
// Last commit: 855db1a (2013-01-17 23:06:53 -0800)

Answer 1

No puede usar la variable dentro de linkTo helper, necesita usar bindAttr en una etiqueta de anclaje en su lugar

<a {{bindAttr href="link.route" class="link.classes"}}>link</a>

Answer 2

A partir de Ember.js RC6, es posible configurar Ember para buscar rutas como propiedades en lugar de interpretarlas como valores codificados. A partir de RC6.1, esto requiere una variable de entorno para ser definida:

ENV.HELPER_PARAM_LOOKUPS = true

antes de que Ember.js se cargue. Para obtener más detalles, consulte la siguiente solicitud de extracción: parámetro de ruta de Quoteless en el enlace Para realizar la búsqueda

Aquí hay un ejemplo completo de trabajo en jsFiddle:

Ejemplo: Usar una variable en un #linkTo helper en Ember

Answer 3

Si todavía estás luchando con la opción de Ken, puedes intentar algo como esto:

{{#each link in mainControls}}
    <a {{action "goToLink" link}} {{bindAttr class="link.classes"}}>
        {{link.name}}
    </a>
{{/each}}

Y luego necesitará una función goToLink para manejar la acción. Puedes ponerlo en tu Colección, pero si no lo haces, se supone que debe subir hasta tu controlador de ruta, lo que, en teoría, debería facilitar las cosas:

App.MyRoute = Ember.Route.extend({
    // ... stuff ...

    actions: {
            goToLink: function(item) {
                this.transitionTo(item.route);
            }
    }
});

Puede leer más acerca de Acciones, aquí: http://emberjs.com/guides/templates/actions/

Actualizar

He creado un violín para ti, usando el último y más grande Ember.

Hice una pequeña variación en mi sugerencia anterior, debido a algunas limitaciones técnicas que descubrí.

Específicamente, la Ruta solo parece ser capaz de manejar acciones para controladores que fueron creados internamente por la Ruta. Este es un problema para nuestro menú de navegación, ya que está cambiando las rutas, mientras todavía está en la pantalla.

Si cambio al uso de un ayudante de "renderizado" de manubrios para representar el menú, ningún enrutador parece estar dispuesto a manejar la acción. Sin embargo , el enrutador actual parece estar siempre conectado en la cadena de burbujas para un "envío" en el controlador. Por lo tanto, acabo de hacer que el controlador envíe un evento en la cadena hasta el enrutador, y obtenemos nuestra dicha de enrutamiento.

Puedes encontrar el violín aquí: http://jsfiddle.net/Malkyne/fh3qK/

Actualización 2

Aquí hay otra versión del mismo violín, solo con el ApplicationRoute (extrañamente indocumentado) que se usa para manejar directamente la acción, sin que el controlador tenga que hacer ninguna retransmisión: http://jsfiddle.net/Malkyne/ydTWZ/

Answer 4

Este hilo no es tan reciente y no sé si la mayoría de las versiones recientes de Ember presentan una solución diferente para este problema, pero en la versión 1.11 de Ember funciona bien.

La solución es la versión en línea de link-to .

Funciona igual que el helper (sí, alternará la clase active según la ruta actual) y le permite pasar parámetros dinámicos. Simulando la situación del autor, tendríamos algo así como:

component.js

mainControls: [
  { path: ''widgets.new'' },
  { name: ''Add'' },
  { classes: ''btn btn-success icon-ok-sign'' }
]

component.hbs

{{#each link in mainControls}}
  {{link-to link.name link.route class=link.classes}}
{{/each}}

Más detalles sobre este enfoque se pueden encontrar aquí .