CODEWITHSUNDEEP
ember.jshandlebars.jsember-cli
sheriffderek
sheriffderek

Reputation: 9043

Handlebar helper syntax in Ember CLI

In this post

Iterating over basic “for” loop using Handlebars.js

An example of a 'repeat' helper is layed out.


helper

Handlebars.registerHelper('times', function(n, block) {
    var accum = '';
    for(var i = 0; i < n; ++i)
        accum += block.fn(i);
    return accum;
});


template

{{#times 10}}
    <span>{{this}}</span>
{{/times}}

I can't seem to write this out the 'CLI' way... can someone enlighten me?

First of all, it will be it's own helper file in /helpers , and it should have a dash so the resolver recognizes it. - so I wouldn't be registering it explicitly.


Default generated helper looks like this helpers/repeat-times.js (template should be the same...)

import Ember from 'ember';

export function repeatTimes(input) {
  return input;
}

export default Ember.Handlebars.makeBoundHelper(repeatTimes);


so, no need to register, no need to set the name... I just can't find clear docs on the syntax. :/ (I took 20 or so stabs at it...)

Or should I be making a component instead? as suggested here: Block helper with ember-cli

Upvotes: 3

Views: 2947

Answers (1)

Mike H
Mike H

Reputation: 136

@Kalman is right that you can't register a bound helper with block notation, so in this case I would recommend a component, which was referenced in the comment.

However, for those that might have found this question and still want to create a handlebars helper in ember-cli, you'll want to use the makeBoundHelper function.

For example, here's a current-date helper that I use:

// app/helpers/current-date.js
import Ember from 'ember';

export default Ember.Handlebars.makeBoundHelper(function() {
  return moment().format('LL'); // Using moments format 'LL'
});

Then, in your handlebars template, you can use this:

{{current-date}}

Which yields a date like March 5, 2015

Upvotes: 4

Related Questions