Template Helpers

Usage

Template helpers are special utilities that are available across all templates and provide utilities like classMap, formatDate, concat stringify that can be used to format values for output.

Literate Coding

Helpers can often mimic the functionality of simple javascript expressions but can be used to improve the readability of your templates, or reduce their reliance on inlined javascript.

{#if hasAny arrayItems}
  ...
{/if}

{#if arrayItems.length > 0}
  ...
{/if}

Shared Utilities

Helpers also provide common utilities from utils which make it easier to manipulate data without writing additional methods in your component

With Helper

{stringify complexData}

Without Helper

{outputString complexData}

const createComponent = ({  }) => ({
  outputString(value) {
    return JSON.stringify(value);
  }
});

Helper Example

In this example formatDate is used to format the display of a date set in the components state.

{formatDate currentTime 'h:mm:ss a'}

Helpers Functions

Logical

exists

Checks if a value is not empty.

{#if exists valueToCheck}
  Value exists
{/if}

isEmpty

Checks if a value is empty.

{#if isEmpty collectionToCheck}
  Collection is empty
{/if}

hasAny

Checks if an array has any elements.

{#if hasAny arrayToCheck}
  Array has elements
{/if}

both

Checks if both a and b are truthy.

{#if both conditionA conditionB}
  Both conditions are true
{/if}

either

Checks if either a or b is truthy.

{#if either conditionA conditionB}
  At least one condition is true
{/if}

maybe

Returns trueExpr if expr is truthy, falseExpr otherwise.

{maybe condition 'True result' 'False result'}

String

stringify

Converts a value to JSON string.

{stringify objectToStringify}

concat

Concatenates all arguments.

{concat firstName ' ' lastName}

capitalize

Capitalizes the first letter of text.

{capitalize textToCapitalize}

titleCase

Converts text to title case.

{titleCase textToTitleCase}

tokenize

Tokenizes a string.

{tokenize stringToTokenize}

Array and Object

join

Joins array elements with a delimiter.

{join itemsArray ', ' true}

joinComma

Joins array elements with commas.

{joinComma itemsArray true false}

arrayFromObject

Converts an object to an array for use with {#each}

{arrayFromObject objectToConvert}

object

Can be used to pass arbitary data as an object to other functions.

{object key=valueForKey}

range

Returns an array with range

{#each range 1 6}
  {this}
{/each}

CSS

classes

Joins CSS classes, the second param spaceAfter adds a space after the final class name.

{classes classNamesArray true}

classIf

Conditionally applies a CSS class.

{classIf isActive 'active' 'inactive'}

classMap

Applies multiple CSS classes based on conditions.

{classMap (object active=isActive disabled=isDisabled)}

activeIf

Adds ‘active’ class if expression is truthy.

{activeIf isCurrentPage}

selectedIf

Adds ‘selected’ class if expression is truthy.

{selectedIf isOptionSelected}

disabledIf

Adds ‘disabled’ class if expression is truthy.

{disabledIf isElementDisabled}

checkedIf

Adds ‘checked’ class if expression is truthy.

{checkedIf isOptionChecked}

Comparison

not

Checks negation (!)

{#if not someCondition}
  Some condition is not true
{/if}

is

Checks equality (==).

{#if is valueA valueB}
  Values are equal
{/if}

notEqual

Checks inequality (!=).

{#if notEqual valueA valueB}
  Values are not equal
{/if}

isEqual

Checks strict equality (===).

{#if isEqual valueA valueB}
  Values are strictly equal
{/if}

isNotEqual

Checks strict inequality (!==).

{#if isNotEqual valueA valueB}
  Values are strictly not equal
{/if}

greaterThan

Checks if a > b.

{#if greaterThan numberA numberB}
  A is greater than B
{/if}

lessThan

Checks if a < b.

{#if lessThan numberA numberB}
  A is less than B
{/if}

greaterThanEquals

Checks if a is greater than or equal to b.

{#if greaterThanEquals numberA numberB}
  A is greater than or equal to B
{/if}

lessThanEquals

Checks if a is less than or equal to b.

{#if lessThanEquals numberA numberB}
  A is less than or equal to B
{/if}

Numeric and Date

numberFromIndex

Returns a + 1.

{numberFromIndex indexValue}

maybePlural

Adds plural suffix if value is not 1.

{maybePlural itemCount 's'}

formatDate

Formats a date.

{formatDate dateToFormat 'YYYY-MM-DD' (object timezone='UTC')}

formatDateTime

Formats a date with time.

{formatDateTime dateTimeToFormat 'YYYY-MM-DD HH:mm' (object timezone='local')}

formatDateTimeSeconds

Formats a date with time and seconds.

{formatDateTimeSeconds dateTimeToFormat 'YYYY-MM-DD HH:mm:ss' (object timezone='America/New_York')}

Debug

log

Logs arguments to console.

{log 'Debug message' (object data=dataToLog)}

debugger

Triggers debugger.

{debugger}

debugReactivity

Debugs reactivity.

{debugReactivity}