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

Question

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

我创建了一个帮助程序来解析文本并用 link 替换每个主题标签到与主题标签相结合的必要路线，所以现在 Handlebar 表达式看起来像：{{clickable-hashtags caption}}。但是，帮助程序使用常规 HTML <a href> 标记创建 links，并使用 Ember.Handlebars.SafeString 返回。

我想为每个主题标签使用 Ember 的 {{#link-to}} 辅助方法，但似乎不知道该怎么做。 Handlebars 是否可以在模板的 {{caption}} 表达式中解析出 link-to 标签？

Answer 1

我看到这样做的问题是无法将变量（和助手结果）绑定到 link-to 助手。我将使用的解决方法是使用操作并将您的辅助逻辑移动到控制器中。

在应用程序路由中定义 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 2

好吧，你可以用计算属性

标题：

This is my #hashtag caption

在控制器中：

   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}}

结果

This is my #hashtag caption

JS斌：http://emberjs.jsbin.com/kohubu/1/

Computed properties @ Emberjs

Answer 3

你考虑过client-side HTML compilation吗？

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

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

Rendering dynamically generated {{link-to}} links in an Ember.js Handlebar template expression

javascript

handlebars.js

ember.js

ember-cli