View

Express Sweet uses Handlebars as its view template engine.
This section describes the basic usage of the view on Express Sweet.
See the here for more information on how to use Handlebars.

Configuration

The view (template engine) configuration is defined in the config/view.js file.
Click here to download a sample ESM configuration and
here to download a sample CJS configuration.
Explanation of Values
Name Config Description
views_dir: string The directory path where the view will be placed.
The default is the views directory directly under the application root.
partials_dir: string The directory path where the reusable templates are located.
The default is the views/partials directory directly under the application root.
Reusable templates are automatically loaded when you launch the Express Sweet application and can be called from other templates.
layouts_dir: string The directory path where the reusable base template is located.
The default is the views/layout directory directly under the application root.
default_layout: string The path to the layout file used by default.
The default is the views/layout/default.* File directly under the application root.
The extension of the default layout file is replaced with the extension specified by extension.
extension: string Extension for templates and partials files.
The default is .hbs.
beforeRender: (req: express.Request, res: express.Response) => Promise<void>|void Hook function just before the view is rendered.
For example, you can set your own local variables that can be used within the view. 
beforeRender: (req, res) => {
  res.locals.extra = 'Extra';
}

Syntax

To mark where layout should insert page.
{{{body}}}
To declare a block placeholder in layout.
{{{block "script"}}}
To define block content in a page.
{{#contentFor "script"}}
  CONTENT HERE
{{/contentFor}}

Layout

There are three ways to use a layout, listed in precedence order.
  1. Declarative within a page. Use handlebars comment. 
    {{!< LAYOUT}}
    Layout file resolution. 
    If path starts with '.'
  LAYOUT is relative to template
Else If `layoutsDir` is set
  LAYOUT is relative to `layoutsDir`
Else
  LAYOUT from path.resolve(dirname(template), LAYOUT)
  2. As an option to render.
    This creates a potential security vulnerability.
    Do not use this option in conjunction with passing user submitted data to res.
    render e.g. res.render('index', req.query).
    This allows users to read arbitrary files from your filesystem. 
    res.render('veggies', {
  title: 'My favorite veggies',
  veggies: veggies,
  layout: 'layout/veggie'
});
    This option also allows for layout suppression (both the default layout and when specified declaratively in a page) by passing in a falsey Javascript value as the value of the layout property. 
    res.render('veggies', {
  title: 'My favorite veggies',
  veggies: veggies,
  layout: null // render without using a layout template
});
    Layout file resolution. 
    If path starts with '.'
  layout is relative to template
Else If `layoutsDir` is set
  layout is relative to `layoutsDir`
Else
  layout from path.resolve(viewsDir, layout)
  3. Lastly, use defaultLayout if specified in hbs configuration options.

    Layouts can be nested: just include a declarative layout tag within any layout template to have its content included in the declared "parent" layout.
    Be aware that too much nesting can impact performances, and stay away from infinite loops.

Comparison Helper

Function Description
eq() Determine whether or not two values are equal (===).
Parameters:
  • val1: any
    First value to be compared with second.
  • val2: any
    Second value to be compared with first.
Return:
  • boolean Returns true if the value and type are the same, false if they are different.
{{!-- results in: false --}}
{{eq '3' 3}}

{{#if (eqw foo 'bar')}}
  Hello
{{/if}}
eqw() Determine whether or not two values are equal (==) i.e. weak checking.
Parameters:
  • val1: any
    First value to be compared with second.
  • val2: any
    Second value to be compared with first.
Return:
  • boolean Returns true if the values are the same, false if they are different.
{{!-- results in: true --}}
{{eqw '3' 3}}

{{#if (eqw foo 'bar')}}
  Hello
{{/if}}
neq() Determine whether or not two values are not equal (!==).
Parameters:
  • val1: any
    First value to be compared with second.
  • val2: any
    Second value to be compared with first.
Return:
  • boolean Returns true if the value and type are different, false if they are the same.
{{!-- results in: true --}}
{{neq 4 3}}

{{#if (neq foo 'bar')}}
  Hello
{{/if}}
neqw() Determine whether or not two values are not equal (!=) weak checking.
Parameters:
  • val1: any
    First value to be compared with second.A
  • val2: any
    Second value to be compared with first.
Return:
  • boolean Returns true if the values are different, false if they are the same.
{{!-- results in: false --}}
{{neqw '3' 3}}

{{#if (neqw foo 'bar')}}
  Hello
{{/if}}
lt() Check for less than condition (a < b).
Parameters:
  • val1: any
    First value to be compared with second.
  • val2: any
    Second value to be compared with first.
Return:
  • boolean Returns true if the first value is less than the second value, false otherwise.
{{!-- results in: true --}}
{{lt 2 3}}

{{#if (lt 2 5)}}
  Hello
{{/if}}
lte() Check for less than or equals condition (a <= b).
Parameters:
  • val1: any
    First value to be compared with second.
  • val2: any
    Second value to be compared with first.
Return:
  • boolean Returns true if the first value is less than or equal to the second value, false otherwise.
{{!-- results in: true --}}
{{lte 2 3}}

{{#if (lte 2 5)}}
  Hello
{{/if}}
gt() Check for greater than condition (a > b).
Parameters:
  • val1: any
    First value to be compared with second.
  • val2: any
    Second value to be compared with first.
Return:
  • boolean Returns true if the first value exceeds the second value, false otherwise.
{{!-- results in: false --}}
{{gt 2 3}}

{{#if (gt 5 6)}}
  Hello
{{/if}}
gte() Check for greater than or equals condition (a >= b).
Parameters:
  • val1: any
    First value to be compared with second.
  • val2: any
    Second value to be compared with first.
Return:
  • boolean Returns true if the first value is greater than or equal to the second value, false otherwise.
{{!-- results in: true --}}
{{gte 3 3}}

{{#if (gte 10 2)}}
  Hello
{{/if}}
not() Logical NOT of any expression.
Parameters:
  • val: any
    Any expression.
Return:
  • boolean Returns the logical negation of the value.
{{!-- results in: false --}}
{{not true}}

{{!-- results in: true --}}
{{not false}}

{{#if (not (eq foo 'bar'))}}
  Hello
{{/if}}
ifx() Helper to imitate the ternary '?:' conditional operator.
Parameters:
  • condition: boolean
    Satisfying condition for getting first value. Either true of false.
  • val1: any
    First value to be displayed as result.
  • val2: any
    Second value to be displayed as result. Defaults to an empty string.
Return:
  • any Returns the result of the ternary operator.
{{!-- results in: foo --}}
{{ifx true 'foo' 'bar'}}

{{!-- results in: bar --}}
{{ifx false 'foo' 'bar'}}

{{!-- results in: 6 --}}
{{ifx (eq value 1) 5 6}}

{{!-- results in: 6 --}}
{{ifx (not (eq value 1)) 5 6}}

{{!-- The third parameter is optional, and by default it will be blank string ('') --}}
{{!-- results in: active --}}
{{ifx true 'active'}}

{{!-- results in: '' --}}
{{ifx false 'active'}}
empty() Check if it is empty.
If the value is an array, returns true if there are no elements.
If the value is a string, the leading and trailing spaces are trimmed and then checked.
Parameters:
  • value: any
    Character strings, arrays, objects, etc. to be checked.
Return:
  • boolean Returns true if the value is empty, false otherwise.
{{!-- results in: false --}}
{{empty [5, 6]}}

{{#if (empty 'foo')}}
  Hello
{{/if}}

{{!-- results in: false --}}
{{empty 'Hello'}}

{{!-- results in: true --}}
{{empty ''}}

{{!-- results in: true --}}
{{empty ' '}}
notEmpty() Check that it is not empty.
If the value is an array, returns true if there is an element.
If the value is a string, the leading and trailing spaces are trimmed and then checked.
Parameters:
  • val: any
    Character strings, arrays, objects, etc. to be checked.
Return:
  • boolean Returns true if the value is not empty, false otherwise.
{{!-- results in: true --}}
{{notEmpty [5, 6]}}

{{#if (notEmpty 'foo')}}
  Hello
{{/if}}

{{!-- results in: true --}}
{{notEmpty 'Hello'}}

{{!-- results in: false --}}
{{notEmpty ''}}

{{!-- results in: false --}}
{{notEmpty ' '}}
count() Determine the length of an array.
Parameters:
  • items: any[]
    Array whose elements to be counted.
Return:
  • number|false Returns the length of the array if the value is an array, false if the value is not an array.
{{!-- results in: 2 --}}
{{count [5, 6]}}
and() Returns the boolean AND of two or more parameters passed i.e it is true iff all the parameters are true.
Parameters:
  • ...params: any[]
    Any number of boolean parameters.
Return:
  • boolean Returns the result of the logical product.
{{!-- results in: true --}}
{{and true true}}

{{!-- results in: false --}}
{{and false true}}

{{#if (and value1 value2)}}
  {{!-- do something --}}
{{else}}
  {{!-- do something else --}}
{{/if}}
or() Returns the boolean OR of two or more parameters passed i.e it is true if any of the parameters is true.
Parameters:
  • ...params: any[]
    Any number of boolean parameters.
Return:
  • boolean Returns the result of the OR.
{{!-- results in: true --}}
{{or true false}}

{{!-- results in: false --}}
{{or false false}}

{{#if (or value1 value2)}}
  {{!-- do something --}}
{{else}}
  {{!-- do something else --}}
{{/if}}
coalesce() Returns the first non-falsy value from the parameter list.
Works quite similar to the SQL's COALESCE() function, but unlike this checks for the first non-false parameter.
Parameters:
  • ...params: any[]
    Any number of parameters.
Return:
  • any Returns the first non-false element of the parameter.
{{!-- results in: foo bar --}}
{{coalesce 'foo bar' 'foob' 'unknown'}}

{{!-- results in: foob --}}
{{coalesce '' 'foob' 'unknown'}}
includes() Returns boolean if the array contains the element strictly or non-strictly.
Parameters:
  • items: any[]
    The array.
  • val: any
    The value to be checked for existence in the array.
  • strict: boolean
    FALSE for non-strict checking. TRUE by default.
Return:
  • boolean Returns true if the array contains the specified value, false otherwise.
{{!-- results in: true --}}
{{includes [1, 2, 3] 2}}

{{!-- results in: false --}}
{{includes [1, 2, 3] '2'}}

{{!-- results in: false --}}
{{includes [1, 2, 3] '2' true}}

{{!-- results in: true --}}
{{includes [1, 2, 3] '2' false}}

{{#if (includes [1, 2, 3] '2')}}
   {{!-- Do something --}}
{{/if}}

{{ifx (includes [1, 2, 3] '2') 'yes' 'no'}}
regexMatch() Returns true if the given str matches the given regex.
Parameters:
  • val: string
    The string against which to match the regular expression.
  • pattern: string
    The text of the regular expression.
  • flags?: string
    Regular expression flags, such as global and case-insensitive searches. The default is none (undefined).
Return:
  • boolean true if there is a match between the regular expression and the string str. Otherwise, false.
{{!-- results in: true --}}
{{regexMatch 'foobar' 'foo'}}

{{!-- results in: false --}}
{{regexMatch 'bar' 'foo'}}

{{!-- results in: false --}}
{{regexMatch 'foobar' '^foo$'}}

{{!-- results in: true --}}
{{regexMatch 'Visit Here' 'here' 'i'}}

{{!-- results in: false --}}
{{regexMatch 'Visit Here' 'here'}}

{{!-- results in: Match --}}
{{#if (regexMatch 'foobar' 'foo')}}
  Match
{{/if}}

HTML Helper

Function Description
cacheBusting() Returns the Assets path containing the file update time parameter.
Parameters:
  • filePath: string
    Paths of Assets files such as CSS and JS in public directories.
  • baseUrl: string
    Application Origin URL. The default is none (undefined).
Return:
  • string Returns the Assets file path with the update date and time parameters.
{{!-- results in: example.com/assets/style.css?1620526340463 --}}
{{cacheBusting '/assets/style.css' '//example.com'}}

Object Helper

Function Description
jsonStringify() Stringify an object using JSON.stringify.
Parameters:
  • val: any
    The value to convert to a JSON string.
  • indent: number
    The number of space characters to use as whitespace.
Return:
  • string A JSON string representing the given value, or undefined.
{{jsonStringify val}}
jsonParse() Parses the given string using JSON.parse.
Parameters:
  • val: any
    Object to stringify.
Return:
  • any JavaScript value or object described by a string.
{{jsonParse val}}

String Helper

Function Description
replace() Returns a new string with some or all matches of a pattern replaced by a replacement.
Parameters:
  • val: string
    String.
  • find: string
    The string to be replaced.
  • replace: string
    The string to replace.
Return:
  • string Character string after replacement.
{{replace 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?' 'dog' 'monkey'}}
split() Split `string` by the given `character`.
Parameters:
  • val: string
    String.
  • separator: string
    A character that delimits the substrings in this string. Default is a comma.
Return:
  • string[] An Array of strings, split at each point where the separator occurs in the given string. The default is a comma.
{{!-- results in: ['a', 'b', 'c'] --}}
{{split "a,b,c" ","}}

{{!-- results in: <div>a</div><div>b</div><div>c</div> --}}
{{#each (split list ',')}}
  <div>{{this}}</div>
{{/each}}
formatBytes() Convert bytes to just the right units(KB, MB, GB, TB, PB, EB, ZB, YB).
Parameters:
  • bytes: number
    Bytes.
  • decimals?: number
    Number of decimal places to display. Default is 0.
Return:
  • string Returns a value with units.
{{!-- results in: 1 KB --}}
{{formatBytes 1024}}

{{!-- results in: 1.21 KB --}}
{{formatBytes 1234 2}}

{{!-- results in: 1.205 KB --}}
{{formatBytes 1234 3}}

{{!-- results in: 0 Bytes --}}
{{formatBytes 0}}

Date Helper

Function Description
formatDate() Use moment to format the date.
Parameters:
Return:
  • string Returns formatted date.
{{!-- results in: 2021/10/24 --}}
{{formatDate 'YYYY/MM/DD' "2021-10-24T02:13:06.610Z"}}

{{!-- results in: 2021/10/24 --}}
{{formatDate 'YYYY/MM/DD' "2021-10-24T02:13:06.610Z" 'jp'}}

{{!-- results in: 2021/10/24 --}}
{{formatDate 'YYYY/MM/DD' "2021-10-24T02:13:06.610Z" 'es'}}

Number Helper

Function Description
number2locale() Returns the language-sensitive representation of a number as a string.
Parameters:
  • val: number|string
    Target number or numeric string.
  • locales: string|undefined
    A string with a BCP 47 language tag, or an array of such strings.
    Corresponds to the locales parameter of the Intl.NumberFormat() constructor.
    In implementations without Intl.NumberFormat support, this parameter is ignored and the host's locale is usually used.
Return:
  • string A string with a language-sensitive representation of the given number.
{{!-- results in: 123,456.789 --}}
{{number2locale 123456.789}}

{{!-- German uses comma as decimal separator and period for thousands. --}}
{{!-- results in: 123.456,789 --}}
{{number2locale 123456.789 'de-DE'}}

Math Helper

Function Description
add() Calculates the sum of two numbers.
Parameters:
  • val1: number|string
    The first number.
  • val2: number|string
    The second number.
Return:
  • number
{{!-- results in: 3 --}}
{{add 1 2}}
sub() Calculates the difference of the given values.
Parameters:
  • val1: number|string
    The first number.
  • val2: number|string
    The second number.
Return:
  • number
{{!-- results in: 3 --}}
{{sub 5 2}}
multiply() Calculate the multiplication of the given values.
Parameters:
  • val1: number|string
    The first number.
  • val2: number|string
    The second number.
Return:
  • number
{{!-- results in: 10 --}}
{{multiply 5 2}}
divide() Compute the division of the given values.
Parameters:
  • val1: number|string
    The first number.
  • val2: number|string
    The second number.
Return:
  • number
{{!-- results in: 5 --}}
{{divide 10 2}}
ceil() Round up the value.
Parameters:
  • val: number|string
    Number to be rounded to nearest greater integer.
Return:
  • number
{{!-- results in: 6 --}}
{{ceil 5.6}}
floor() Rounds down a number.
Parameters:
  • val: number|string
    Number to be rounded to nearest lower integer.
Return:
  • number
{{!-- results in: 5 --}}
{{floor 5.6}}
abs() Returns an absolute value.
Parameters:
  • val: number|string
    Number to perform absolute value operation on.
Return:
  • number
{{!-- results in: 5.6 --}}
{{abs -5.6}}