Javascript 如何在Ember中创建可以包装/操作内容的把手块辅助对象？

我想创建一个手柄块帮助器（用于余烬应用程序），用于包装和转义内容。我原以为这会相对简单，但我花了几个小时在上面，却一无所获。我想要这个：

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

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

我能得到的最接近的结果是：

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

---

但这只是直接输出块中的内容。我不能包装或操纵它。我错过了什么明显的东西吗？当然，这并不像看上去那么困难。

自定义帮助程序可能必须依赖于在Ember中频繁更改的私有API—特别是现在，随着Glimmer渲染引擎的引入。您最好只使用

Ember.Component

，使用

{yield}

将html呈现到某个隐藏的容器中，然后使用

didInsertElement

钩子使用jQuery手动操作DOM，例如

x-code.hbt

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

x-code.js

并将其用作

{{{x-code}
嘿

{{/x-code}

---

示例。

我已经阅读了指南。这个例子是针对一个非块帮助器的。如果除了包装内容之外，还可以通过某种方式操纵内容，那么将其作为一个具有

yield

的组件进行操作是可以接受的，但我不相信有。我想它一定是个帮手。像这样的东西怎么样：？然而，当前的金丝雀上有一个弃用警告，我必须在最新版本的余烬中找到正确的方法…我想这是最后的办法，尽管它真的很简陋：（我不熟悉Ember/Handlebar有什么原因这么难做到吗？我；我能够从组件中删除所有标记。根本原因是Ember以神奇的方式为您自动完成许多事情（例如，根据属性更改自动更新DOM）。然而，这给底层基础设施带来了相当多的复杂性。主要问题是，呈现引擎正在从Ember 1.0->2.0进行重大重构；虽然公共API向后兼容，但私有API和行为可能会在不同版本之间发生重大变化，这使得很难让帮助程序保持不变r DOM渲染是最新的…这将有望随着我们进入Ember 2.0（今年夏天）而改变

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

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