Rendern dynamisch generierter {{link-to}} Links in einem Ember.js Lenkervorlagen-Ausdruck

Question

Ich habe eine Ember-Vorlage, die Text mit einem Lenker-Ausdruck rendert, d. H. {{caption}}. Der Text, der gerendert wird, enthält Hashtags, von denen ich klickbar machen muss, und gehe zu einer bestimmten Route in der Ember-App.

Ich habe einen Helfer erstellt, um den Text zu parsen und jeden Hashtag durch einen Link zu der notwendigen Route in Kombination mit dem Hashtag zu ersetzen, so dass der Ausdruck "Lenker" nun wie folgt aussieht: {{clickable-hashtags caption}}. Der Helfer erstellt die Links jedoch mit regulären HTML-Tags <a href>, die mit Ember.Handlebars.SafeString zurückgegeben werden.

Ich möchte stattdessen Embers {{#link-to}} Hilfsmethode für jeden Hashtag verwenden, aber ich kann nicht herausfinden, wie das geht. Ist es möglich, dass Lenker die link-to Tags innerhalb des Ausdrucks {{caption}} der Vorlage analysieren?

Answer 1

Nun, man es mit einer berechneten Eigenschaft tun konnte

Die Bildunterschrift:

Das ist meine #hashta g Bildunterschrift

In Controller:

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

Vorlage:

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

Ergebnis

Das ist mein #hashtag Bildunterschrift

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

Computed properties @ Emberjs

Answer 2

Das Problem, das ich dabei sehe, ist nicht in der Lage, Variablen (und Hilfsergebnissen) an den Link-to-Helfer zu binden. Die Arbeit, die ich verwenden würde, wäre, Aktionen zu verwenden und Ihre Hilfslogik in den Controller zu verschieben.

Definieren Sie die transitionTo Aktion in der Anwendung Route:

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

Vorlage:

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

Haben Sie tun client-side HTML compilation in Betracht gezogen?

Ich denke, Sie müssen die notwendigen Helfer installieren (d. H. link-to) und Variablenwerte übergeben. Diese test kann helfen, dorthin zu gelangen.