2

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?

Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133

2 Answers2

4

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'}}
luisacevedo
  • 242
  • 2
  • 7
1

consider looking at: https://github.com/WMeldon/ember-cli-todos/blob/master/app/components/edit-todo.js it should have an idiomatic ember-cli todo setup

Stefan Penner
  • 1,087
  • 8
  • 10
  • Thank you for your reply, Stef. I know that this can be done with components and i do plan to use them. But my goal here is not to implement a task but rather learn how do to certain thing (suggested by emberjs.com/guides) with ember-cli. Can you suggest how to do a "custom view helper" with ember-cli? http://emberjs.com/api/classes/Ember.Handlebars.html#toc_custom-view-helper-example – Andrey Mikhaylov - lolmaus May 30 '14 at 19:05
  • I'm running into the exact same problem. Does ember-cli support custom view helpers? The documentation would make it seem not. – Matt Baker Jun 21 '14 at 17:26