使用 ember-cli 阻止助手

我正在尝试制作一个简单的块助手，但找不到有关该主题的 ember-cli 的任何文档

UPDATED

这是助手：

import Ember from 'ember';

export default function uiInput(options) {
  return new Handlebars.SafeString(
    '<div class="ui input">'
    + options.fn(this)
    + '</div>');
}

并在模板中：

{{#ui-input}}
  TEST
{{/ui-input}}

输出应该是：

<div class="ui input">
  TEST
</div>

但我得到的输出是：

TEST
<div class="ui input">
  undefined
</div>

我究竟做错了什么？

原始答案（ember方式见下文）

我首先想尝试解释这里发生的事情：Ember（当前为 1.9.1）在调用时相当长一段时间不再以字符串形式返回渲染模板options.fn直接（尽管所有代码示例都依赖于这种行为）。相反，您的内容正在呈现“自身”，这意味着它使用options.data.view's appendChild功能是把东西放在它们所属的地方。您可以看到它的实际效果，例如通过遵循with助手的代码到第 81 行ember-handlebars/lib/helpers/binding.js https://github.com/emberjs/ember.js/blob/v1.9.1/packages/ember-handlebars/lib/helpers/binding.js#L81。您还可以找到之前对此的讨论在这个线程中 http://discuss.emberjs.com/t/block-helper-renders-directly-to-view/1465/2.

所以你对此能做些什么？我们需要创建一个自定义视图来满足我们的需要。以下代码适用于我使用 ember-cli。在app/helpers/ui-input:

import Ember from 'ember';

var UiInputView = Ember.View.extend({
    classNames: ['ui', 'input']
});

export default function(options) {
    var view = options.data.view;
    var viewOptions = {
        shouldDisplayFunc: function() {return true;},
        template: options.fn,
        inverseTemplate: options.inverse,
        isEscaped: !options.hash.unescaped,
        templateData: options.data,
        templateHash: options.hash,
        helperName: 'block-helper'
    };
    var childView = view.createChildView(UiInputView, viewOptions);
    view.appendChild(childView);
}

也许并不是所有的 viewOptions 都是必要的......

我希望这有帮助。

更新：余烬之路

当我来这里回答这个问题时，我固执地决定我应该能够编写自己的助手。我对这个知之甚少{{yield}} http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_use-with-ember-component帮手。因此，正确的代码如下所示：

成分：

// app/components/ui-input.js
import Ember from 'ember';
export default Ember.Component.extend({
    classNames: ['ui', 'input']
});

模板：

{{!-- app/templates/components/ui-input.hbs --}}
{{yield}}

Usage:

{{#ui-input}}
    Test
{{/ui-input}}