Come utilizzare le variabili stringa negli helper ember (linkTo o partial)?

Question

Ho bisogno di impostare una serie di collegamenti di menu nel router e quindi renderli nel modello usando #each. Ma sembra #linkTo helper non ha riconosciuto le variabili. Come posso risolvere questo?

Router:

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'} ]) 
    } 
}) 

collegamenti di rendering in applicazioni modello:

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

Messaggio di errore: la versione

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

Ember:

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

Answer 1

Se si sta ancora lottando con l'opzione di Ken, si consiglia di provare qualcosa di simile:

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

E quindi avrete bisogno di una funzione goToLink per gestire l'azione. Si può mettere sulla vostra collezione, ma se non lo fai, si suppone che bolla fino al gestore di percorso, che, in teoria, dovrebbe rendere le cose davvero semplice:

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

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

Si può leggere di più su azioni , qui: http://emberjs.com/guides/templates/actions/

Aggiornamento

ho messo insieme un violino per voi, utilizzando la versione più recente Ember.

Ho apportato una lieve variazione al mio suggerimento sopra, a causa di alcune limitazioni tecniche che ho scoperto.

In particolare, la route sembra essere in grado di gestire le azioni per i controller creati internamente dalla route. Questo è un problema per il nostro menu di navigazione, dal momento che stai cambiando rotte, mentre è ancora sullo schermo.

Se sono passato a utilizzare un helper "render" di Handlebars per eseguire il rendering del menu, nessun router sembra essere disposto a gestire l'azione. Tuttavia,, il router corrente sembra essere sempre collegato alla catena a bolle per un "invio" sul controller. Quindi, ho appena fatto in modo che il controller invii un evento sulla catena al router, e otteniamo la nostra beatitudine di routing.

È possibile trovare il violino, qui: http://jsfiddle.net/Malkyne/fh3qK/

Update 2

Ecco un'altra versione dello stesso violino, solo con la (stranamente non documentato) ApplicationRoute utilizzato per gestire direttamente l'azione, senza che il controller debba eseguire alcuna inoltro: http://jsfiddle.net/Malkyne/ydTWZ/

Answer 2

Non è possibile utilizzare variabile all'interno linkto aiutante, è necessario utilizzare bindAttr su un tag di ancoraggio al posto

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

Answer 3

A partire da Ember.js RC6, è possibile configurare Ember per cercare rotte come proprietà piuttosto che interpretarle come valori codificati. A partire da RC6.1, ciò richiede una variabile di ambiente da definire:

ENV.HELPER_PARAM_LOOKUPS = true 

prima che Ember.js sia caricato. Per maggiori dettagli, vedere la seguente richiesta di pull: Quoteless route param in linkTo performs lookup

Ecco un esempio completo che lavora come un jsFiddle:

Example: Using a variable in a #linkTo helper in Ember

Answer 4

Questo thread non è così recente e non so se la maggior parte delle versioni più recenti di Ember presenta una soluzione diversa per questo problema, ma nella versione 1.11 di Ember funziona perfettamente.

La soluzione è la in linea versione link-to.

Funziona esattamente come l'helper (sì, consente di alternare la classe active in base al percorso corrente) e consente di passare i parametri dinamici. Simulazione situazione dell'autore, avremmo qualcosa come:

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

Maggiori dettagli intestano questo approccio può essere trovato here.