Question

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

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

我想为每个标签使用Ember的{{#link-to}}辅助方法，但似乎无法弄清楚如何做到这一点。 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/

Computed properties @ Emberjs

Answer 2

我看到这样做的问题是无法将变量（和帮助器结果）绑定到链接到帮助器。我将使用的工作是使用操作并将辅助逻辑移动到控制器中。

在应用程序路径中定义transitionTo操作：

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

模板：

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

您是否考虑过client-side HTML compilation？

我认为您需要安装必要的帮助程序（即link-to）并传入变量值。 test可能对此有所帮助。

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

3 个答案: