Using a helper to parse text into link-to

[catc]

I need some way of returning the {{link-to }} component from a helper. I'm trying to parse a paragraph by replacing all hashtagged words with a link to a specific route and the param as a hashtag. So for example:

// something like
This is a great article about #cats and #dogs, such a great read.

// becomes
This is a great article about {{link-to '#cats' 'search' 'cats'}} and {{link-to '#dogs' 'search' 'dogs'}}, such a great read.

I was wondering if it's possible to do using a simple helper. The only other way I could think of doing this is by using a componenent, splitting the paragraph by hashtagged words, and then looping through the array of parts to return either normal text or a link.

Something I tried - jsfiddle

[taras]

I would advice against using {{link-to}} helper this way because to make what you're describing work, you would need to convert every string like this into a template at run time. This is unnecessary amount of work for what you're trying to achieve.

I suggest that you create a component that will find hashtags, wrap them in a <span> and trigger an action when the user clicks on the component.

Here is a JSBin that shows a LinkToHashtag Component that does this.

The important part is this

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      'This is a great article about #cats and #dogs, such a great read.',
      'The quick brown #fox jumps over the lazy #dog'
    ];
  },
  actions: {
    searchHashtag: function(hashTag) {
      // transition to search
      this.transitionTo('search', hashTag);
    }
  }
});

App.LinkToHashtagComponent = Ember.Component.extend({
  linked: Ember.computed('text', {
    get: function() {
      var text = this.get('text');
      // replace hashtag with a <span>
      return text.replace(/#(\S*)/g,'<span class="hash-tag-link" data-value="$1">#$1</span>');
    }
  }),
  click: function(e) {
    var target = $(e.target);
    if (target.hasClass('hash-tag-link')) {
      // extract value from the data-value attribute
      var hashtag = target.data('value');
      // send the action to the route
      this.sendAction('on-click', hashtag);
    }
  }
});

[catc]

That actually works pretty well, thanks @taras .