车把助手作为标签

Question

使用正则表达式，我将字符串中的**text in bold** 替换为<strong>text in bold</strong>，然后在我的EmberJS 模板上使用{{{message}}} 显示message。问题是我还想用{{#link-to "hashtag" "anyhashtag"}} 替换#anyhashtag，它只适用于{{message}}。

所以我的想法是创建一个{{strong}}text in bold{{/strong}} 助手，它也会更安全，但显然助手只能像{{strong "text in bold"}} 那样工作，如果我有粗体或更复杂字符串的链接，它将无法工作。

我可以做一个符合我想法的助手吗？

谢谢！

Answer 1

这是一个有点令人困惑的问题，但我认为这就是您所要求的：

Ember.Handlebars.registerHelper("strong", function (options) {
  options.hash.layout = Ember.Handlebars.compile("<strong>{{yield}}</strong>");
  return Ember.Handlebars.helpers.view.call(this, Ember.View, options);
});

工作demo。

---

实际上，更好的变体是这样的：

Ember.Handlebars.registerHelper("strong", function (options) {
  options.hash.tagName = "strong";
  return Ember.Handlebars.helpers.view.call(this, Ember.View, options);
});

这避免了将<strong> 包装成<div>。如果您需要更复杂的包装器，第一个版本会很有用。更新demo。

---

您似乎正在尝试从用户提供的内容创建动态模板。您不能通过将模板字符串插入{{{}}} 构造来做到这一点。 'Triple-mustache' 用于原始 html 输出，它没有处理其中的额外模板代码的能力。

很遗憾，你也不能直接通过属性编译它。 Handlebars 编译器实际上是在生成一个函数，然后需要使用一堆与 Ember 相关的上下文来调用它才能生成 html。

解决所有这些问题的最佳方法（据我所知）再次是通过视图。像这样：

App.ApplicationController = Ember.Controller.extend({
  text: "text in bold",

  html: function() {
    return Ember.Handlebars.compile("{{#strong}}" + this.get('text') + "{{/strong}}");
  }.property("text")
});

<script type="text/x-handlebars">
  <div>Working: {{#strong}}text in bold{{/strong}}</div>
  <div>Working: {{view Ember.View template=html tagName="span"}}</div>
</script>

这将显示正确的值，但如果您更改它就不会更新。要获取实时更新，请执行以下操作：

App.UpdatableView = Ember.View.extend({
  templateChanged: function () {
    this.rerender();
  }.observes("template")
});

<script type="text/x-handlebars">
  <div>Working: {{#strong}}text in bold{{/strong}}</div>
  <div>Working: {{view App.UpdatableView templateBinding=html tagName="span"}}</div>

  <!-- Type here to see changes -->
  {{input type="text" value=text}}
</script>

更新了现场演示here。

更新：当然，既然我明白了你想要做什么，我意识到你并不真正需要答案的第一部分，{{strong}} helper。