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方式）

我首先要尝试解释这里发生的事情：Ember（目前为1.9.1）在直接调用options.fn时已经有很长时间没有将渲染模板作为字符串返回（尽管所有代码都是如此）在那里依靠这种行为的样本）。相反，您的内容正在呈现“＃”;这意味着它使用options.data.view的{{1}}功能将内容置于其所属的位置。你可以看到这个例子，例如将appendChild帮助程序代码跟随ember-handlebars/lib/helpers/binding.js中的第81行。您还可以找到之前关于此in this thread的讨论。

那么，你能做些什么呢？我们需要创建一个自定义视图来处理我们需要的东西。以下代码适用于我使用ember-cli。在with：

app/helpers/ui-input

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

我希望这会有所帮助。

更新：余烬方式

当我来到这里回答这个问题时，我固执地决定我应该能够写下自己的帮手。我对{{yield}}助手了解得很少。因此，正确的代码如下所示：

组件：

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);
}

模板：

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

用法：

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

Answer 2

我对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>

使用ember-cli阻止助手

2 个答案:

原始答案（见下面的ember方式）

更新：余烬方式