在ember.js车把模板表达式中，动态生成{{link to}}链接动态生成

Question

i有一个伴随模板，它正在渲染带有车把表达式的文本，即 {{caption}}。渲染的文本中有主题标签，我需要单击，然后转到Ember应用中的特定路线。

我创建了一个助手来解析文本，并用指向必要路由的链接与主题标签替换每个标签，因此现在，车把表达式看起来像：{{clickable-hashtags caption}}。但是，助手使用常规HTML <a href>标签创建链接，并使用Ember.handlebars.safestring返回。

我想为每个主题标签使用Ember的{{#link-to}}助手方法，但似乎无法弄清楚如何做到这一点。车把是否可以在模板的{{caption}}表达式中解析link-to标签？

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

Answer 2

我看到的问题是无法将变量（和助手结果）绑定到链接到助手的问题。我要使用的工作将是使用动作并将您的助手逻辑移至控制器中。

在应用程序路线中定义了转换操作：

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

您是否考虑过进行客户端HTML汇编？

我认为您需要安装必要的助手（即link-to）并传递可变值。该测试可能会有所帮助。