Ember.js 将字符串模板转换为可用的余烬模板

我的api为我提供了模板字符串，如“[[user]]在6幅图像上发表了评论”，然后是数据对象，如{user:{val:'Daniel'，id:''.'}

我正试图找出如何制作一个助手，将其转换为一个可用的HTMLBars模板，为用户添加一个指向组件的链接，并输出它。因此，本质上让助手返回如下内容

'{{link-to user.val 'user' user.id}} commented on 6 images'

这在模板中实际上是可用的

---

我尝试了一些类似于Ember.htmlbar.template“{{link to…}}注释了…”的东西，但不确定如何从那里开始。我需要包含ember模板编译器吗？我想尽量避免它，因为它会给vendor.js增加几百kbs。如果有什么变化，我也会使用ember cli。

您通常不想直接创建HTMLBars模板。尝试重构代码，以便使用组件或路由模板

您可以创建自定义帮助器：

// app/helpers/custom-template.js
import Ember from 'ember';

export function customTemplate([ template, data ]) {
  return template.replace(/\[\[(.*?)\]\]/, (_, id) => data[id].val);
}

export default Ember.Helper.helper(customTemplate);

您可以像我一样自己实现逻辑，也可以使用手柄

用法：

{{custom-template commentTemplate commentData}}

export default Ember.Controller.extend({
  commentTemplate: '[[user]] commented on 6 images',
  commentData: {
    user: {val: 'Daniel', id: '...'}
  }
});

{{custom-template templateString=commentTemplate data=commentData}}

export default Ember.Controller.extend({
  commentTemplate: '[[user]] commented on 6 images',
  commentData: {
    user: {val: 'Daniel', id: '123'}
  }
});

使现代化 可以将模板分解为链接和非链接数组，然后按顺序渲染它们

// app/components/custom-template.js
import Ember from 'ember';

export default Ember.Component.extend({
  parts: function() {
    return this.get('templateString').split(/(\[\[.*?\]\])/).map(token => {
      let match = token.match(/\[\[(.*?)\]\]/);
      if (match) {
        let type = match[1];
        let { val, id } = this.get('data')[type] || {};
        return {
          isLink: true,
          type, // 'user'
          val, // 'Daniel'
          id // '123'
        };
      }
      return token;
    });
  }.property('templateString')
});


// app/templates/components/custom-template.hbs
{{#each parts as |part|}}
  {{#if part.isLink}}
    {{link-to part.val part.type part.id}}
  {{else}}
    {{part}}
  {{/if}}
{{/each}}

用法：

{{custom-template commentTemplate commentData}}

export default Ember.Controller.extend({
  commentTemplate: '[[user]] commented on 6 images',
  commentData: {
    user: {val: 'Daniel', id: '...'}
  }
});

{{custom-template templateString=commentTemplate data=commentData}}

export default Ember.Controller.extend({
  commentTemplate: '[[user]] commented on 6 images',
  commentData: {
    user: {val: 'Daniel', id: '123'}
  }
});

输出：

<div class="ember-view" id="ember389">
    <a class="ember-view ember-transitioning-in" href="/user/123" id="ember397">Daniel</a>
     commented on 6 images
</div>

---

问题是我需要返回字符串中的一些文本作为一个字符串，这是主要的障碍。所以模板应该输出和呈现，就好像我在做{{link to'Daniel''用户'Daniel}}对6幅图像发表了评论一样