使用 ember-cli 阻止助手

Question

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

更新

这是助手：

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>

我做错了什么？

Answer 1

我使用的是 ember-cli 0.1.4。当我在块符号中尝试您的 ui 样式助手时：

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

我在控制台中收到一个 javascript 错误：

Assertion failed: registerBoundHelper-generated helpers do not support use with Handlebars blocks.    

但是，对你的助手稍作调整，这对我有用：

帮手：

import Ember from 'ember';

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

模板：

{{ui-input 'TEST'}}

得到这个输出：

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

Answer 2

原始答案（灰烬方式见下文）

我首先想解释一下这里发生了什么：当直接调用options.fn 时，Ember（当前为 1.9.1）在相当长的一段时间内不再将呈现的模板作为字符串返回（尽管所有代码示例都已删除）那里依赖这种行为）。相反，您的内容正在呈现“自身”，这意味着它使用options.data.view 的appendChild 函数将内容放在它们所属的位置。您可以在实际中看到这一点，例如按照with 助手的代码一直到ember-handlebars/lib/helpers/binding.js 中的第81 行。您还可以找到关于此in this thread 的先前讨论。

那么，你能做些什么呢？我们需要创建一个自定义视图来处理我们需要的内容。以下代码适用于我使用 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}} 助手知之甚少。因此，正确的代码如下所示：

组件：

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

模板：

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

用法：

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