Rendering dynamically generated {{link-to}} links in an Ember.js Handlebar template expression

Question

I have an Ember template that is rendering text with a Handlebar expression, i.e. {{caption}}. The text being rendered has hashtags in it, each of which I need to make clickable, and going to a specific route in the Ember app.

I created a helper to parse the text and replace each hashtag with a link to the necessary route combined with the hashtag, so now the Handlebar expression looks like: {{clickable-hashtags caption}}. However, the helper creates the links using regular HTML <a href> tags, and this is returned using Ember.Handlebars.SafeString.

I would like to use Ember's {{#link-to}} helper method for each hashtag instead, but can't seem to figure out how to do that. Is it possible for Handlebars to parse out the link-to tags within the template's {{caption}} expression?

Answer 1

Well, you could do it with an computed property

The caption:

This is my #hashtag caption

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

Template:

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

Result

This is my #hashtag caption

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

Computed properties @ Emberjs