Expressions

Using Expressions

Expressions let you access variables and methods from your data context as well as template helpers that can be used to output dynamic values in your html.

Expressions are a reactive context meaning they will automatically update when the underlying value changes.

Expression Syntax

It is recommended to check out the expression evaluation example to see expression evaluation in practice.

Expressions support two separate syntaxes, spaced arguments or “semantic style” and regular javascript style arguments.

Semantic Style

Spaced arguments do not require parenthesis or commas, simply include a space between arguments

{doSomething arg1 arg2}

If theres a preferred evaluation order you will need to add parenthesis

{doSomething arg1 (doSomethingElse arg1) }

Javascript Style

You can also simply specify any valid javascript inside an expression

{ doSomething(arg1, arg2) }

Any valid javascript can be used inside an expression

{ doSomething(arg1 + 2, arg2 + 3)}

Including nested objects

{ doSomething({a: 1, b: 2}) }

Mixed Style

It’s okay to mix between Semantic and Javascript style expressions. If you need to embed a javascript expression inside a SUI one just wrap it in parenthesis.

{ doSomething (arg1 + 2) (arg2 + 3) {a: 1, b: 2} }

How Expressions are Evaluated

Finding Data

Template expressions are evaluated against the template’s data context which includes the values and functions that are invokable for a template.

Your data context includes settings, state, template helpers, values set on your component instance, and in the special case of subtemplates data passed in directly.

Expressions are evaluated right to left with variables being read from the component’s data context

{concat firstName ' ' lastName}

evaluates to

concat(firstName, ' ', lastName);

For an explanation of how a component’s data context is determined see component data context

Evaluation Order

If an intermediary function is found it will pass the result through

{titleCase concat firstName ' ' lastName}

evaluates to

titleCase(concat(firstName, ' ', lastName))

Parenthesis

If parenthesis are used it will respect the evaluation order

{formatDate (getDate now) 'h:mm'}

evaluates to

formatDate(getDate(now), 'h:mm'))

Expression Locations

Attributes

If an attribute expression includes quotes it will output as a string regardless of the expression value.

For instance

<a data-number="{getZero}">

will output as

<a data-number="0"></a>

Boolean Attribute

If an attribute expression omits quotes the entire attribute will be removed if the expression is falsey

<input type="checkbox" checked={isChecked} />

If isChecked == true will output

<input type="checkbox" checked />

and if isChecked == false it will omit the attribute altogether

<input type="checkbox" />