Block helper with ember-cli

Question

I'm trying to make a simple helper block, but can't find the documentation for ember-cli on the topic

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 result should be:

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

But the conclusion I get is:

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

What am I doing wrong?

Answer 1

Original answer (see below for electronic mode)

First, I want to try to explain what is happening here: Ember (currently 1.9.1) no longer returns processed templates as strings for quite some time now by directly calling options.fn (despite the fact that all code samples are displayed there, which rely on this behavior). Instead, your content displays "self", which means that it uses the options.data.view appendChild function to put things where they belong. You can see it in action, for example. following with helper code to line 81 in ember-handlebars / lib / helpers / binding.js . You can also find the previous discussion of this in this thread .

So what can you do about it? We need to create our own view in order 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); } 

Perhaps not all viewOptions are necessary ...

Hope this helps.

Update: ember path

When I came here to answer this question, I stubbornly decided that I could write my assistants. I knew little about the {{yield}} helper. Thus, the correct code would 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}} 

Using:

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

Answer 2

I am on ember-cli 0.1.4. When I try your ui-style helper in block notation:

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

I get a javascript error in the console saying this:

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

however, this works for me with a little tweak for your assistant:

helpers:

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

template:

 {{ui-input 'TEST'}} 

getting this result:

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