Back to Top

@cloudfour/hbs-helpers master

Handlebars helpers used for various Cloud Four projects.

and(left, right, options)

Output a block (or its inverse) based on whether or not both of the supplied arguments are truthy.

Parameters

Name Type Description
left
right
options Object

Examples

var a = true;
var b = 1;
var c = false;

{{#and a b}}✔︎{{else}}✘{{/and}} //=> ✔︎
{{#and b c}}✔︎{{else}}✘{{/and}} //=> ✘

Returns

String

around(items, center, padding, block)

Slices a list based on a center-point and a maximum amount of "padding" before and after. Useful for pagination.

Supports an optional offset hash option in case your center value isn't matching up with your array indexes.

Parameters

Name Type Description
items Array
  • Collection to iterate over.
center Number
  • The center-point of the collection (for example, current page).
padding Number
  • The amount of items to allow before or after the center.
block Object

Examples

<ul>
  {{#around pages 5 2 offset=-1}}
    <li><a href="/page/{{num}}">Page {{num}}</a></li>
  {{/around}}
</ul>

{{! Output: }}
<ul>
  <li><a href="/page/3">Page 3</a></li>
  <li><a href="/page/4">Page 4</a></li>
  <li><a href="/page/5">Page 5</a></li>
  <li><a href="/page/6">Page 6</a></li>
  <li><a href="/page/7">Page 7</a></li>
</ul>

Returns

String

average(arr)

Average an array of numeric values.

Parameters

Name Type Description
arr Array

Examples

var numbers = [1, 2, 3];
var products = [{rating: 1}, {rating: 2}, {rating: 3}];

{{average ratings}} //=> 2
{{average products key="rating"}} //=> 2

Returns

Number

Returns the average of all values.

capitalize(str)

Capitalize the first letter of a String.

Parameters

Name Type Description
str String
  • String to capitalize. Other types will be converted.

Returns

String

capitalizeWords(str)

Capitalize each word in a String. Works with punctuation and international characters.

Parameters

Name Type Description
str String
  • String to capitalize. Other types will be converted.

Returns

String

compare(left, operator, right, options)

Compare two values using logical operators.

Parameters

Name Type Description
left
operator String
right
options Object

Returns

String Boolean

formatted html if block, true/false if inline

concat(items)

Concatenate items into a single string.

Parameters

Name Type Description
items

Examples

{{concat "foo" "bar"}} //=> "foobar"

Returns

string

defaultTo(value)

Output the first provided value that exists, or fallback to a default if none do.

Parameters

Name Type Description
value

Examples

var doesExist = 'Hello';

{{defaultTo doesExist "Goodbye"}} // => "Hello"
{{defaultTo doesNotExist "Goodbye"}} // => "Goodbye"
{{defaultTo doesNotExist}} // => ""
{{defaultTo doesNotExist doesExist "Goodbye"}} // => "Hello"

Returns

String

iterate()

Repeat a block a given amount of times.

Examples

{{#iterate 10}}
  <li>Index: {{@index}} Count: {{@count}}</li>
{{/iterate}}

Returns

Void

math(left, operator, right, options)

Perform mathematical operations on one or two values.

Parameters

Name Type Description
left
operator String
right
options Object

Returns

Number

maybe()

Output a block randomly (50% chance of being output). Useful for prototyping multiple content scenarios, outputting one or two "dummy" blocks of markup.

Examples

{{#maybe}}
  Heads!
{{else}}
  Tails!
{{/maybe}}

Returns

Void

or(left, right, options)

Output a block (or its inverse) based on whether or not either of the supplied arguments are truthy.

Parameters

Name Type Description
left
right
options Object

Examples

var a = true;
var b = 1;
var c = false;
var d = 0;

{{#or a c}}✔︎{{else}}✘{{/or}} //=> ✔︎
{{#or b c}}✔︎{{else}}✘{{/or}} //=> ✔︎
{{#or c d}}✔︎{{else}}✘{{/or}} //=> ✘

Returns

String

random([method=integer], options)

Generate a random integer or any other type of random content supported by Chance.js.

Parameters

Name Type Description
method=integer String
  • Chance method to use.
 Optional
options Object
options.hash Object
  • Additional options to pass to method.

Examples

{{random}} //=> 1839473434
{{random min=5 max=10}} //=> 7
{{random "state"}} //=> WA
{{random "dollar" max=20}} //=> $17.42

Returns

randomItem(items)

Return only one random item. If only one argument is provided and it is an array, it will return a random item from that array. Otherwise it will return one of the arguments.

Parameters

Name Type Description
items

Examples

var beatles = ["John", "Paul", "George", "Ringo"];
{{randomItem beatles}} //=> "George"

{{randomItem "John" "Paul" "George" "Ringo"}} //=> "Ringo"

Returns

One random item.

module.exports(name, options)

Returns the contents of the SVG at the specified path, with any attributes passed along via the hash included on the root element.

Inspired by https://github.com/aredridel/npm-handlebars-helper-svg

Parameters

Name Type Description
name String
  • The path to the SVG. The extension may be omitted.
options Object

Examples


  {{svg "foo/test.svg"}}

  {{svg "foo/test"}}

  {{svg "foo/test" class="foo" width="24" height="24"}}

  {{#svg "foo/test" aria-labelledby="foo-title"}}
    <title id="foo-title">Hello world</title>
  {{/svg}}

Returns

String

create([settings])

Returns a new instance of the svg helper with settings applied. Useful for defining a base path for the project so you don't have to specify it for every usage of the helper.

Parameters

Name Type Description
settings Object Optional
settings.basePath String
  • Base path for file lookups.
 Optional
settings.extName String
  • Extension to use when it is omitted.
 Optional
settings.omitAttr Array
  • Attributes to strip from the SVG root element.
 Optional

Examples


  var svgHelper = require('path/to/module').create({
    basePath: './src/assets/images'
  });

Returns

Void

timestamp([context])

Format a date or time using Moment.js.

Defaults to UTC mode since most use-cases in markup-land do not take timezones into account, which results in some counter-intuitive output and inconsistent behavior.

Parameters

Name Type Description
context Date String Number Array Object Optional

Examples

{{timestamp "2015-10-21" format="MMM Do, YYYY"}} //=> "Oct 21st, 2015"

{{timestamp "Oct 21 15" inputFormat="MMM DD YY" format="YYYY-MM-DD"}} //=> "2015-10-21"

{{timestamp "2000-01-01" format="YYYY" utc=false}} //=> "1999"

Returns

String

toFixed(num)

Format number to two fixed decimal points (like a price).

Parameters

Name Type Description
num Number String

Examples

{{toFixed 1}} //=> 1.00

Returns

String

toFraction(value)

Format a decimal as a fractional HTML entity if possible.

Parameters

Name Type Description
value Number

Examples

{{toFraction 1.25}} //=> "1¼"
{{toFraction 3.1666}} //=> "3⅙"
{{toFraction 2.7}} //=> 2.7

Returns

String Number

toJSON(str)

Converts a string to JSON; useful when used in helper sub-expressions.

Parameters

Name Type Description
str String

Examples

{{#each (toJSON '[1,2,3]')}}{{this}}{{/each}} //=> '123'

Returns

Array Object

toSlug(str)

Format a string as a lowercase, URL-friendly value.

Parameters

Name Type Description
str String

Examples

{{toSlug "Well, hello there!"}} //=> "well-hello-there"

Returns

String

toTitle(name)

Strip leading alphanumeric characters plus spaces from a string. Useful for converting filenames to more usable strings or IDs.

Parameters

Name Type Description
name String

Examples

{{toTitle "01 Introduction"}} //=> "Introduction"

Returns

String