ember-cli: creating a helper that would render a view?

Question

I'm trying to reproduce Ember-TodoMVC with ember-cli. I'm stuck with this part.

I've created a view like this:

app/views/action-edit.coffee

ActionEditView = Ember.TextField.extend
  didInsertElement: -> @$().focus()

`export default ActionEditView`

When i use it in an Emblem template directly, e. g. view "action-view", it works fine: a text field is rendered.

But emberjs.com/guides suggests creating a helper to render the view.

I found this remark: "Remember that you must register your helpers by exporting makeBoundHelper" on ember-cli website. After fiddling for a while struggling to understand how ES6 modules work, i ended up with this code that does not produce any JS errors:

app/helpers/action-edit.coffee

`import ActionEditView from 'loltodo/views/action-edit'`

`export default Ember.Handlebars.makeBoundHelper(ActionEditView)`

When i use it like this in an Emblem template: action-edit, Ember outputs this in browser console:

[✓] helper:action-edit ......................................... loltodo/helpers/action-edit vendor/ember/ember.js:3521

So i assume the helper gets hooked up fine.

The problem is that it renders blank!

I also tried this:

app/helpers/action-edit.coffee

`import ActionEditView from 'loltodo/views/action-edit'`

`export default Ember.Handlebars.helper('action-edit', ActionEditView)`

It results in error "undefined is not a function" in this line.

So the question is: how do i create a helper that render a view with ember-cli to reproduce this step of the Ember-TodoMVC tutorial?

Answer 1

Like Stefan says: the docs describe this so here are the steps:

1. from command prompt run ember generate helper "luis-highlight" make sure your helper name has a dash.. ember-cli does not want conflict with html tags (if no dash then it does not work).

2. inside helpers/luis-hightlight.js write this:

   import Ember from 'ember';
   
   export default Ember.Handlebars.makeBoundHelper(function(value) {
     return new Ember.Handlebars.SafeString('<span class="hightlitht">' + value + '</span>');
   });
   

3. call helper from template:

   {{luis-hightlight 'embercli is great'}}