在Ember.js Handlebar模板表达式中呈现动态生成的{{link-to}}链接

Question

我有一个Ember模板,它使用Handlebar表达式渲染文本,即{{caption}}.正在呈现的文本中包含主题标签,每个标签都需要点击,然后转到Ember应用程序中的特定路径.

我创建了一个帮助程序来解析文本,并用一个链接指向必要的路径并用hashtag替换每个hashtag,所以现在Handlebar表达式如下所示:{{clickable-hashtags caption}}.但是,帮助程序使用常规HTML <a href>标记创建链接,并使用Ember.Handlebars.SafeString返回.

我想{{#link-to}}为每个hashtag 使用Ember的帮助方法,但似乎无法弄清楚如何做到这一点.Handlebars是否可以解析link-to模板{{caption}}表达式中的标签？

Answer 1

好吧,你可以用计算属性来做

标题:

这是我的#hashtag标题

在控制器中:

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

模板:

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

结果

这是我的#hashtag 标题

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

计算属性@Emberjs