Rendering dynamically generated links {{link-to}} in a Handberbar Ember.js template expression

Question

I have an Ember template that displays text with a Handlebar expression, i.e. {{caption}} . The text that is being rendered contains hashtags, each of which I need to make clickable and go to a specific route in the Ember application.

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

I would like to use the Ember helper method {{#link-to}} for each hashtag instead, but I cannot figure out how to do this. Is it possible for Handlebars to parse link-to tags in a {{caption}} expression template?

Answer 1

Well, you could do it with a computed property

Signature:

This is my #hashtag headline.

In the 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 Signature

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

Computable Properties @Emberjs

Answer 2

The problem that I see in this case cannot associate variables (and auxiliary results) with binding to an assistant. The work I will use is to use actions and move your auxiliary logic to the controller.

Define the transition to action in the application route:

 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

Have you considered client HTML compilation ?

I think you will need to install the necessary helpers (i.e. link-to ) and pass the values ​​of the variables. This test may be useful there.