
Enter a search term above to see results...
Enter a search term above to see results...
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.
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}
Helpers also provide common utilities from utils which make it easier to manipulate data without writing additional methods in your component
{stringify complexData}
{outputString complexData}
const createComponent = ({ }) => ({ outputString(value) { return JSON.stringify(value); }});
In this example formatDate
is used to format the display of a date set in the components state.
{formatDate currentTime 'h:mm:ss a'}
Checks if a value is not empty.
{#if exists valueToCheck} Value exists{/if}
Checks if a value is empty.
{#if isEmpty collectionToCheck} Collection is empty{/if}
Checks if an array has any elements.
{#if hasAny arrayToCheck} Array has elements{/if}
Checks if both a and b are truthy.
{#if both conditionA conditionB} Both conditions are true{/if}
Checks if either a or b is truthy.
{#if either conditionA conditionB} At least one condition is true{/if}
Returns trueExpr if expr is truthy, falseExpr otherwise.
{maybe condition 'True result' 'False result'}
Converts a value to JSON string.
{stringify objectToStringify}
Concatenates all arguments.
{concat firstName ' ' lastName}
Capitalizes the first letter of text.
{capitalize textToCapitalize}
Converts text to title case.
{titleCase textToTitleCase}
Tokenizes a string.
{tokenize stringToTokenize}
Joins array elements with a delimiter.
{join itemsArray ', ' true}
Joins array elements with commas.
{joinComma itemsArray true false}
Converts an object to an array for use with {#each}
{arrayFromObject objectToConvert}
Can be used to pass arbitary data as an object to other functions.
{object key=valueForKey}
Returns an array with range
{#each range 1 6} {this}{/each}
Joins CSS classes, the second param spaceAfter
adds a space after the final class name.
{classes classNamesArray true}
Conditionally applies a CSS class.
{classIf isActive 'active' 'inactive'}
Applies multiple CSS classes based on conditions.
{classMap (object active=isActive disabled=isDisabled)}
Adds ‘active’ class if expression is truthy.
{activeIf isCurrentPage}
Adds ‘selected’ class if expression is truthy.
{selectedIf isOptionSelected}
Adds ‘disabled’ class if expression is truthy.
{disabledIf isElementDisabled}
Adds ‘checked’ class if expression is truthy.
{checkedIf isOptionChecked}
Checks negation (!)
{#if not someCondition} Some condition is not true{/if}
Checks equality (==).
{#if is valueA valueB} Values are equal{/if}
Checks inequality (!=).
{#if notEqual valueA valueB} Values are not equal{/if}
Checks strict equality (===).
{#if isEqual valueA valueB} Values are strictly equal{/if}
Checks strict inequality (!==).
{#if isNotEqual valueA valueB} Values are strictly not equal{/if}
Checks if a > b.
{#if greaterThan numberA numberB} A is greater than B{/if}
Checks if a < b.
{#if lessThan numberA numberB} A is less than B{/if}
Checks if a is greater than or equal to b.
{#if greaterThanEquals numberA numberB} A is greater than or equal to B{/if}
Checks if a is less than or equal to b.
{#if lessThanEquals numberA numberB} A is less than or equal to B{/if}
Returns a + 1.
{numberFromIndex indexValue}
Adds plural suffix if value is not 1.
{maybePlural itemCount 's'}
Formats a date.
{formatDate dateToFormat 'YYYY-MM-DD' (object timezone='UTC')}
Formats a date with time.
{formatDateTime dateTimeToFormat 'YYYY-MM-DD HH:mm' (object timezone='local')}
Formats a date with time and seconds.
{formatDateTimeSeconds dateTimeToFormat 'YYYY-MM-DD HH:mm:ss' (object timezone='America/New_York')}
Logs arguments to console.
{log 'Debug message' (object data=dataToLog)}
Triggers debugger.
{debugger}
Debugs reactivity.
{debugReactivity}