用ember-cli阻止帮手 [英] Block helper with ember-cli

问题描述

我正在尝试制作一个简单的帮助程序，但是找不到任何关于ember-cli的文档。

UPDATED

这是帮助者：

 从ember导入Ember; 
 
 export default function uiInput（options）{
 return new Handlebars.SafeString（
'< div class =ui input>'
 + options。 fn（this）
 +'< / div>'）; 
} 
  

在模板中：

  {{＃ui-input}} 
 TEST 
 {{/ ui-input}} 
  / pre> 
 
 
输出应为：
 < div class =ui input> 
 TEST 
< / div> 
  
但我得到的输出是：
  TEST 
< div class =ui input> 
 undefined 
< / div> 
  
我做错了什么？
解决方案
 
原始答案（见下面的ember方式）
 
 
 
我想先尝试解释这里发生了什么：Ember 1.9.1）直接调用 options.fn （尽管所有代码示例依赖于这个代码示例），现在还没有将渲染的模板返回一段时间了行为）。相反，您的内容会呈现本身，这意味着它使用 options.data.view 的 appendChild 函数把东西放在他们所属的地方你可以看到这一点，例如通过在与帮助程序的代码降至第81行/ember-handlebars/lib/helpers/binding.js#L81rel =nofollow> ember-handlebars / lib / helpers / binding.js 。您还可以在此在此线程。
 
 
 
那么，你能做些什么呢？我们需要创建一个自定义视图来照顾我们所需要的。以下代码适用于我使用ember-cli。在 app / helpers / ui-input 中：
 从ember导入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，
 reverseTemplate：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都是必需的... 
 
 
 
我希望这有帮助。
 
 
 
更新：ember方式
 
 
 
我来这里回答这个问题，我固执地决定，我应该能够写我自己的帮手。我很少知道  {{yield}}  帮手。因此，正确的代码如下所示：
 
 
 
组件：
 
  // app / components / ui-input.js 
 import Ember from'ember'; 
 export default Ember.Component.extend（{
 classNames：['ui'，'input'] 
}）; 
  
模板：
 code> {{！ -  app / templates / components / ui-input.hbs  - }} 
 {{yield}} 
  
用法：
  {{＃ui-input}} 
测试
 {{/ ui-input}} 
  
 
I'm trying to make a simple block helper but can't find any documentation for ember-cli on the subject

UPDATED

Here's the helper:
import Ember from 'ember';

export default function uiInput(options) {
  return new Handlebars.SafeString(
    '<div class="ui input">'
    + options.fn(this)
    + '</div>');
}
And in the template:
{{#ui-input}}
  TEST
{{/ui-input}}
And the output should be:
<div class="ui input">
  TEST
</div>
But the output I'm getting is:
TEST
<div class="ui input">
  undefined
</div>
What am I doing wrong?
解决方案
Original answer (see below for the ember way)

I first want to try to explain what is happening here: Ember (currently 1.9.1) does not return rendered templates as strings any more for quite some time now when calling options.fn directly (despite all of the code samples out there that rely on this behavior). Instead, your content is rendering 'itself', meaning that it uses options.data.view's appendChild function to put things where they belong. You can see this in action e.g. by following the with helper's code down to line 81 in ember-handlebars/lib/helpers/binding.js. You can also find a previous discussion on this in this thread.

So, what can you do about it? We need to create a custom view to take care of what we need. The following code works for me using ember-cli. In 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);
}
Maybe not all the viewOptions are necessary...

I hope this helps.

Update: the ember way

When I came here to answer this question, I was stubbornly determined that I should be able to write my own helpers. Little did I know about the {{yield}} helper. The correct code would thus look like this:

Component:
// app/components/ui-input.js
import Ember from 'ember';
export default Ember.Component.extend({
    classNames: ['ui', 'input']
});
Template:
{{!-- app/templates/components/ui-input.hbs --}}
{{yield}}
Usage:
{{#ui-input}}
    Test
{{/ui-input}}


                        
这篇关于用ember-cli阻止帮手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！