Question

我想创建一个包装和转义内容的Handlebars块帮助器（在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()
})

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

Answer 1

自定义助手可能不得不依赖于在Ember中频繁更改的私有API - 特别是现在正在引入Glimmer渲染引擎。只使用Ember.Component，使用{{yield}}将html呈现到某个隐藏容器中，然后使用didInsertElement挂钩使用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。

如何在Ember中创建可以包装/操作内容的Handlebars块帮助器？

1 个答案: