Skip to content

helpers/handlebars-helpers

Repository files navigation

handlebars-helpers NPM version NPM monthly downloads NPM total downloads Linux Build Status Windows Build Status

More than 130 Handlebars helpers in ~20 categories. Helpers can be used with Assemble, Generate, Verb, Ghost, gulp-handlebars, grunt-handlebars, consolidate, or any node.js/Handlebars project.

You might also be interested in template-helpers.

Install

Install with npm:

$ npm install --save handlebars-helpers

Install with yarn:

$ yarn add handlebars-helpers

Browser usage

See how to use handlebars-helpers in the browser.

Usage

The main export returns a function that needs to be called to expose the object of helpers.

Get all helpers

var helpers = require('handlebars-helpers')();
//=> returns object with all (130+) helpers

Get a specific helper collection

Helper collections are exposed as getters, so only the helpers you want will be required and loaded.

var helpers = require('handlebars-helpers');
var math = helpers.math();
//=> only the `math` helpers

var helpers = require('handlebars-helpers');
var array = helpers.array();
//=> only the `collections` helpers

Get multiple helpers collections

Helper collections are exposed as getters, so only the helpers you want will be required and loaded.

var helpers = require('handlebars-helpers')(['math', 'string']);
//=> only the `math` and `string` helpers

Optionally pass your own handlebars

var handlebars = require('handlebars');
var helpers = require('handlebars-helpers')({
  handlebars: handlebars
});

// or for a specific collection
var math = helpers.math({
  handlebars: handlebars
});

Helpers

Categories

Currently 189 helpers in 20 categories:

All helpers

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)

Visit the: code | unit tests | issues)


array

Returns all of the items in an array after the specified index. Opposite of before.

Params

  • array {Array}: Collection
  • n {Number}: Starting index (number of items to exclude)
  • returns {Array}: Array exluding n items.

Example

<!-- array: ['a', 'b', 'c'] -->
{{after array 1}}
<!-- results in: '["c"]' -->

Cast the given value to an array.

Params

  • value {any}
  • returns {Array}

Example

{{arrayify "foo"}}
<!-- results in: [ "foo" ] -->

Return all of the items in the collection before the specified count. Opposite of after.

Params

  • array {Array}
  • n {Number}
  • returns {Array}: Array excluding items after the given number.

Example

<!-- array: ['a', 'b', 'c'] -->
{{before array 2}}
<!-- results in: '["a", "b"]' -->

Params

  • array {Array}
  • options {Object}
  • returns {String}

Example

<!-- array: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] -->
{{#eachIndex array}}
  {{item}} is {{index}}
{{/eachIndex}}

Block helper that filters the given array and renders the block for values that evaluate to true, otherwise the inverse block is returned.

Params

  • array {Array}
  • value {any}
  • options {Object}
  • returns {String}

Example

<!-- array: ['a', 'b', 'c'] -->
{{#filter array "foo"}}AAA{{else}}BBB{{/filter}}
<!-- results in: 'BBB' -->

Returns the first item, or first n items of an array.

Params

  • array {Array}
  • n {Number}: Number of items to return, starting at 0.
  • returns {Array}

Example

{{first "['a', 'b', 'c', 'd', 'e']" 2}}
<!-- results in: '["a", "b"]' -->

Iterates over each item in an array and exposes the current item in the array as context to the inner block. In addition to the current array item, the helper exposes the following variables to the inner block:

  • index
  • total
  • isFirst
  • isLast Also, @index is exposed as a private variable, and additional private variables may be defined as hash arguments.

Params

  • array {Array}
  • returns {String}

Example

<!-- accounts = [
{'name': 'John', 'email': 'john@example.com'},
{'name': 'Malcolm', 'email': 'malcolm@example.com'},
{'name': 'David', 'email': 'david@example.com'}
] -->

{{#forEach accounts}}
  <a href="mailto:{{ email }}" title="Send an email to {{ name }}">
    {{ name }}
  </a>{{#unless isLast}}, {{/unless}}
{{/forEach}}

Block helper that renders the block if an array has the given value. Optionally specify an inverse block to render when the array does not have the given value.

Params

  • array {Array}
  • value {any}
  • options {Object}
  • returns {String}

Example

<!-- array: ['a', 'b', 'c'] -->
{{#inArray array "d"}}
  foo
{{else}}
  bar
{{/inArray}}
<!-- results in: 'bar' -->

Returns true if value is an es5 array.

Params

  • value {any}: The value to test.
  • returns {Boolean}

Example

{{isArray "abc"}}
<!-- results in: false -->

<!-- array: [1, 2, 3] -->
{{isArray array}}
<!-- results in: true -->

Returns the item from array at index idx.

Params

  • array {Array}
  • idx {Number}
  • returns {any} value

Example

<!-- array: ['a', 'b', 'c'] -->
{{itemAt array 1}}
<!-- results in: 'b' -->

Join all elements of array into a string, optionally using a given separator.

Params

  • array {Array}
  • separator {String}: The separator to use. Defaults to ,.
  • returns {String}

Example

<!-- array: ['a', 'b', 'c'] -->
{{join array}}
<!-- results in: 'a, b, c' -->

{{join array '-'}}
<!-- results in: 'a-b-c' -->

Returns true if the the length of the given value is equal to the given length. Can be used as a block or inline helper.

Params

  • value {Array|String}
  • length {Number}
  • options {Object}
  • returns {String}

Returns the last item, or last n items of an array or string. Opposite of first.

Params

  • value {Array|String}: Array or string.
  • n {Number}: Number of items to return from the end of the array.
  • returns {Array}

Example

<!-- var value = ['a', 'b', 'c', 'd', 'e'] -->

{{last value}}
<!-- results in: ['e'] -->

{{last value 2}}
<!-- results in: ['d', 'e'] -->

{{last value 3}}
<!-- results in: ['c', 'd', 'e'] -->

Returns the length of the given string or array.

Params

  • value {Array|Object|String}
  • returns {Number}: The length of the value.

Example

{{length '["a", "b", "c"]'}}
<!-- results in: 3 -->

<!-- results in: myArray = ['a', 'b', 'c', 'd', 'e']; -->
{{length myArray}}
<!-- results in: 5 -->

<!-- results in: myObject = {'a': 'a', 'b': 'b'}; -->
{{length myObject}}
<!-- results in: 2 -->

Alias for equalsLength

Returns a new array, created by calling function on each element of the given array. For example,

Params

  • array {Array}
  • fn {Function}
  • returns {String}

Example

<!-- array: ['a', 'b', 'c'], and "double" is a
fictitious function that duplicates letters -->
{{map array double}}
<!-- results in: '["aa", "bb", "cc"]' -->

Map over the given object or array or objects and create an array of values from the given prop. Dot-notation may be used (as a string) to get nested properties.

Params

  • collection {Array|Object}
  • prop {Function}
  • returns {String}

Example

// {{pluck items "data.title"}}
<!-- results in: '["aa", "bb", "cc"]' -->

Reverse the elements in an array, or the characters in a string.

Params

  • value {Array|String}
  • returns {Array|String}: Returns the reversed string or array.

Example

<!-- value: 'abcd' -->
{{reverse value}}
<!-- results in: 'dcba' -->
<!-- value: ['a', 'b', 'c', 'd'] -->
{{reverse value}}
<!-- results in: ['d', 'c', 'b', 'a'] -->

Block helper that returns the block if the callback returns true for some value in the given array.

Params

  • array {Array}
  • iter {Function}: Iteratee
  • {Options}: Handlebars provided options object
  • returns {String}

Example

<!-- array: [1, 'b', 3] -->
{{#some array isString}}
  Render me if the array has a string.
{{else}}
  Render me if it doesn't.
{{/some}}
<!-- results in: 'Render me if the array has a string.' -->

Sort the given array. If an array of objects is passed, you may optionally pass a key to sort on as the second argument. You may alternatively pass a sorting function as the second argument.

Params

  • array {Array}: the array to sort.
  • key {String|Function}: The object key to sort by, or sorting function.

Example

<!-- array: ['b', 'a', 'c'] -->
{{sort array}}
<!-- results in: '["a", "b", "c"]' -->

Sort an array. If an array of objects is passed, you may optionally pass a key to sort on as the second argument. You may alternatively pass a sorting function as the second argument.

Params

  • array {Array}: the array to sort.
  • props {String|Function}: One or more properties to sort by, or sorting functions to use.