javascript - 如何在 Ember 中创建一个可以包装/操作内容的 Handlebars block 助手？

Question

我想创建一个 Handlebars block 助手(在 Ember 应用程序中使用)来包装和转义内容。我以为这会相对简单，但我花了几个小时却一无所获。我想要这个:

{{#code}}
  <p>Hey!</p>
{{/code}}

变成这样:

<pre>
  <code>
    &lt;p&gt;Hey!&lt;/p&gt;
  </code>
</pre>

我能得到的最接近的是:

Em.Handlebars.registerHelper('code', function(options) {
  options.fn()
})

但这只是立即输出 block 中的内容。我无法包裹它或操纵它。我错过了一些明显的东西吗？当然，这不会像看起来那么困难。

Answer 1

自定义助手可能必须依赖私有(private) API，该 API 在 Ember 中经常发生变化 - 特别是现在，随着 Glimmer 渲染引擎的推出。您可能会更好地使用 Ember.Component，使用 {{yield}} 将 html 渲染到某个隐藏容器中，然后使用 didInsertElement code> 钩子(Hook)使用 jQuery 手动操作 DOM，例如

x-code.hbt

<div class="to-escape" style="display: none">{{yield}}</div>
<pre>
  <code>        
  </code>
</pre>

x-code.js

App.XCodeComponent = Ember.Component.extend({
  didInsertElement: function() {
    var value = this.$('.to-escape').html();
    this.$('code').text(value);
  }
});

并将其用作

{{#x-code}}
  <p>Hey!</p>
{{/x-code}}

示例 JsBin .