ember.js – 使用ember-cli阻止助手

2024年1月30日 249次阅读

我正在尝试制作一个简单的块助手,但是找不到关于这个主题的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>

我究竟做错了什么？

最佳答案 原始答案(见下面的灰烬方式)

我首先要尝试解释这里发生的事情：Ember(目前为1.9.1)在直接调用options.fn时已经很长时间没有将渲染模板作为字符串返回(尽管所有的代码示例都依赖于关于这种行为).相反,您的内容呈现为“本身”,这意味着它使用options.data.view的appendChild函数将内容放在它们所属的位置.你可以看到这个例子,例如通过将帮助者的代码跟随到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}}
点赞