Question

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

您似乎正在尝试从用户提供的内容中创建动态模板。您无法通过将模板字符串插入{{{}}}构造来实现此目的。＆＃39;三小胡子＆＃39;用于原始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}}帮助。

把手助手作为标签

1 个答案: