Handlebar helper inside {{#each}}

Question

I try to call a registered handlebar helper inside a {{#each}} loop. Unfortunately Ember.js complains because it tries to resolve the helper as a property of the controller rather than a helper.

Handlebars.registerHelper('testHelper', function(name) {
    return 'foo: ' + name
});

(names and content are just dummy values to show the example)

{{#each entry in App.testController}}
   <div>{{{testHelper entry.name}}}</div>
{{/each}}

The error that the Ember.js prints is:

Uncaught Error:  Handlebars error: Could not find property 'testHelper' on object <App.testController:ember254>.

How do I need to call the registered helper so that it gets recognized?

Mike Aski · Accepted Answer · 2014-08-12T14:45:36.267

9

Got it running, either with this solution,

Javascript

Handlebars.registerHelper('testHelper', function(property, options) {
  return 'foo: ' + Ember.get(options.data.view.content, property);
});

Handlebars template

<script type="text/x-handlebars" data-template-name='app-view'>
  <ul>
  {{#each entry in content}}
    <li>{{testHelper name}}</li>
  {{/each}}
  </ul>
</script>

Or even better, with this one:

Javascript

Handlebars.registerHelper('testHelper', function(property) {
  return 'foo: ' + Ember.get(this, property);
});

Handlebars template

<script type="text/x-handlebars" data-template-name='app-view'>
  <ul>
  {{#each entry in content}}
    {{#with entry}}
      <li>{{testHelper name}}</li>
    {{/with}}
  {{/each}}
  </ul>
</script>

edited Aug 12 '14 at 14:45

answered Sep 11 '12 at 10:01

Mike Aski

9,180
4
46
63

Thanks. Well don't know what I have messed up. Need to investigate. But in overall it looks like it is possible. – rit Sep 11 '12 at 10:12
these fiddles don't seems to work, did a new version of ember break this solution? – Grapho Aug 12 '14 at 13:17

score 2 · Answer 2 · answered Feb 29 '16 at 18:16

If you don't want to use a global helper then you could use a "pathed query":

{{#each entry in App.testController}}  
   <div>{{{../testHelper entry.name}}}</div>  
{{/each}}

../ is the syntax for a pathed query. It causes you to traverse up the scope tree 1 level, and access private data from a parent scope. To traverse 2 levels upwards you could do the following ../../. This is useful if you have nested for-loops.

score 0 · Answer 3 · answered Feb 25 '16 at 16:29

My helpers are written in individual files, so I modified @MikeAski's answer to be the following.

In helpers/my-helper.js:

var MyHelper = function(value) {
    return moment(value).format("MMMM Do, YYYY");
};

export
default MyHelper;

At the top of app.js:

// import modules
import myHelper from 'appkit/helpers/my-helper';

// register custom helpers
Ember.Handlebars.registerBoundHelper('myHelper', myHelper);

Then you don't even need the {{#with}} in handlebars, just use as a normal helper.

{{#each thing}}
    {{myHelper thing.foo}}
{{/each}}

Handlebar helper inside {{#each}}

3 Answers3

Linked