Rendering di collegamenti {{link-to}} dinamicamente generati in un'espressione del modello di manubrio Ember.js

Question

Ho un modello di brace che esegue il rendering del testo con un'espressione del manubrio, ad esempio {{caption}}. Il testo da renderizzare contiene hashtag, ognuno dei quali devo rendere cliccabile, e andare a un percorso specifico nell'app Ember.

Ho creato un helper per analizzare il testo e sostituire ogni hashtag con un collegamento al percorso necessario combinato con l'hashtag, quindi ora l'espressione del manubrio è simile a: {{clickable-hashtags caption}}. Tuttavia, l'helper crea i collegamenti usando normali tag HTML <a href> e questo viene restituito usando Ember.Handlebars.SafeString.

Vorrei utilizzare il metodo di supporto di Ember {{#link-to}} per ogni hashtag, ma non riesco a capire come farlo. È possibile che Handlebars analizzi i tag link-to all'interno dell'espressione {{caption}} del modello?

Answer 1

Beh, si potrebbe fare con una proprietà calcolata

La didascalia:

Questo è il mio #hashta g caption

In regolatore:

computedCaption: function() { 
    var words = caption.split(" "); 
    return words.map(function (e) { 
     var isHashtag = e.charAt(0) === "#"; 
     return {isHashtag: isHashtag, text: e}; 
    }); 
    }.property("computedCaption") 

Template:

{{#each computedCaption as |cap|}} 
    {{#if cap.isHashtag}} 
     {{#link-to 'tags' cap.text}}{{cap.text}}{{/link-to}} 
    {{else}} 
    {{cap.text}} 
    {{/if}} 
{{/each}} 

Risultato

Questo è il mio #hashtag didascalia

JS Bin: http://emberjs.jsbin.com/kohubu/1/

Computed properties @ Emberjs

Answer 2

Il problema che vedo nel farlo in quel modo non è in grado di associare variabili (e risultati di aiuto) al link-to helper. Il lavoro che userei sarebbe quello di utilizzare le azioni e spostare la logica di supporto nel controller.

Definire l'azione transitionTo nel percorso di applicazione:

App.ApplicationRoute = Ember.Route.extend({ 
    events: { 
     transitionTo: function (route) { 
      this.transitionTo(route); 
     } 
    } 
}); 

Template:

{{#each item in controller.captions}} <!-- or instead use model--> 
    <li> 
     <a {{action 'transitionTo' item.route}}> <!-- without hashtags --> 
      {{item.label}} <!-- with hashtags --> 
     </a> 
    </li> 
{{/each}} 

Answer 3

Avete pensato di fare client-side HTML compilation?

Sto pensando che sarà necessario installare gli helper necessari (ad esempio link-to) e immettere valori variabili. Questo test potrebbe essere di aiuto per arrivarci.