Skip to content

Instantly share code, notes, and snippets.

@elidupuis
Last active December 7, 2021 02:24
  • Star 98 You must be signed in to star a gist
  • Fork 24 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save elidupuis/1468937 to your computer and use it in GitHub Desktop.
Simple Handlebars.js helpers
/*! ******************************
Handlebars helpers
*******************************/
// debug helper
// usage: {{debug}} or {{debug someValue}}
// from: @commondream (http://thinkvitamin.com/code/handlebars-js-part-3-tips-and-tricks/)
Handlebars.registerHelper("debug", function(optionalValue) {
console.log("Current Context");
console.log("====================");
console.log(this);
if (optionalValue) {
console.log("Value");
console.log("====================");
console.log(optionalValue);
}
});
// return the first item of a list only
// usage: {{#first items}}{{name}}{{/first}}
Handlebars.registerHelper('first', function(context, block) {
return block(context[0]);
});
// a iterate over a specific portion of a list.
// usage: {{#slice items offset="1" limit="5"}}{{name}}{{/slice}} : items 1 thru 6
// usage: {{#slice items limit="10"}}{{name}}{{/slice}} : items 0 thru 9
// usage: {{#slice items offset="3"}}{{name}}{{/slice}} : items 3 thru context.length
// defaults are offset=0, limit=5
// todo: combine parameters into single string like python or ruby slice ("start:length" or "start,length")
Handlebars.registerHelper('slice', function(context, block) {
var ret = "",
offset = parseInt(block.hash.offset) || 0,
limit = parseInt(block.hash.limit) || 5,
i = (offset < context.length) ? offset : 0,
j = ((limit + offset) < context.length) ? (limit + offset) : context.length;
for(i,j; i<j; i++) {
ret += block(context[i]);
}
return ret;
});
// return a comma-serperated list from an iterable object
// usage: {{#toSentence tags}}{{name}}{{/toSentence}}
Handlebars.registerHelper('toSentence', function(context, block) {
var ret = "";
for(var i=0, j=context.length; i<j; i++) {
ret = ret + block(context[i]);
if (i<j-1) {
ret = ret + ", ";
};
}
return ret;
});
// format an ISO date using Moment.js
// http://momentjs.com/
// moment syntax example: moment(Date("2011-07-18T15:50:52")).format("MMMM YYYY")
// usage: {{dateFormat creation_date format="MMMM YYYY"}}
Handlebars.registerHelper('dateFormat', function(context, block) {
if (window.moment) {
var f = block.hash.format || "MMM Do, YYYY";
return moment(Date(context)).format(f);
}else{
return context; // moment plugin not available. return data as is.
};
});
@doginthehat
Copy link

This slightly altered version of debug with show undefined if the passed value is undefined:

Handlebars.registerHelper("debug", function(optionalValue) {
  console.log("\nCurrent Context");
  console.log("====================");
  console.log(this);

  if (arguments.length > 1) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

@robfletcher
Copy link

There's a typo in the default date format at line 73: it should be "MMM Do, YYYY" (note Do rather than Mo)

@elidupuis
Copy link
Author

Thanks @robfletcher. Nice catch.

@atomsfat
Copy link

Wow, nice

@spinegar
Copy link

When passing a date to the helper I had to remove the Date Object from the helper.

return moment(context).format(f);

I also updated the helper to check if context has a truthy value and is indeed a valid date.

Handlebars.registerHelper('dateFormat', function(context, block) {
      if (window.moment && context && moment(context).isValid()) {
              var f = block.hash.format || "MMM Do, YYYY";
              return moment(context).format(f);
      }else{
              return context;   //  moment plugin is not available, context does not have a truthy value, or context is not a valid date
      }
});

@nataliebanegas
Copy link

Date(args) returns current date. Needs to be invoked as a constructor: new Date(args) to set the desired date.

@samselikoff
Copy link

Emberinos: use Ember.Handlebars.helper(... (an alias for Ember.Handlebars.registerBoundHelper).

registerHelper will just pass in the string.

@apt142
Copy link

apt142 commented Nov 6, 2013

This is fantastic! One nitpick: toSentance is misspelled. It should be toSentence

@1st
Copy link

1st commented Apr 3, 2014

It's error here, need new for Date.

return moment(Date(context)).format(f);

replace to

return moment(new Date(context)).format(f);

@panser
Copy link

panser commented Jun 10, 2015

I use this to wrap any data some function

Handlebars.registerHelper('runFunc', function(context, block) {
    var funcName = block.hash.fName;
    var resultCommand = funcName + '(' + context + ')';
    return eval(resultCommand);
});
function parseDate(data, format){
    if(data && window.moment && moment(data).isValid()) {
        var f = format || 'YYYY-MM-DD HH:mm:ss';
        return moment(data).format(f);
    }else{
        return data;
    }
}
{{runFunc annulationDate fName="parseDate"}}

@alexweissman
Copy link

@spinegar's comment on the dateFormat helper is correct. It should be:

//  format an ISO date using Moment.js
//  http://momentjs.com/
//  moment syntax example: moment(Date("2011-07-18T15:50:52")).format("MMMM YYYY")
//  usage: {{dateFormat creation_date format="MMMM YYYY"}}
Handlebars.registerHelper('dateFormat', function(context, block) {
  if (window.moment) {
    var f = block.hash.format || "MMM Do, YYYY";
    return moment(context).format(f);
  }else{
    return context;   //  moment plugin not available. return data as is.
  };
});

Note that the Date wrapper on context is removed.

The SO thread on boolean logic helpers may also be of interest here: http://stackoverflow.com/questions/8853396/logical-operator-in-a-handlebars-js-if-conditional/21915381#21915381

@crisanchez
Copy link

Hello, somebody Do you have a example to convert string to number?.

thanks a lot

@GerardSmit
Copy link

GerardSmit commented Aug 30, 2016

In Handlebars 4.0 I did get the error block is not a function when I tried to use the limit helper. This can be resolved by changing block to block.fn:

Handlebars.registerHelper('limit', function(context, block) {
    var ret = "",
        offset = parseInt(block.hash.offset) || 0,
        limit = parseInt(block.hash.limit) || 5,
        i = (offset < context.length) ? offset : 0,
        j = ((limit + offset) < context.length) ? (limit + offset) : context.length;

    for(i,j; i<j; i++) {
        ret += block.fn(context[i]);
    }

    return ret;
});

@mygittyhubby
Copy link

where to put the Handlebars.registerHelper function ? which file ? I've been searching the internet and couldn't find the answer, I kept getting "Missing Helper" error messages

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment