Templates

Synergy takes your HTML template and replaces the tokens inside it with data from your model, updating your UI whenever that data changes.

In a Synergy template, a token is identified by surrounding it with double curly braces.

Text

Let's take a look at how token replacement works with some simple text.

Model:

{
  name: 'Ericka';
}

Template:

<p>hello {{ name }}!</p>

Output:

<p>hello Ericka!</p>

Attributes

You can use tokens in the same way for both text and attribute nodes.

Model:

{
  textColor: 'gold',
};

Template:

<p style="color: {{ textColor }}">ok</p>

Output:

<p style="color: gold;">ok</p>

Boolean attributes

Some HTML attributes are known as boolean attributes, which means that they're considered to be true if present, or false if absent.

Boolean values can be toggled by binding to a boolean value.

Model:

{
  hidden: true;
}

Template:

<div hidden="{{ hidden }}"></div>

Output:

<div hidden></div>

ARIA attributes

Some ARIA attributes accept the string values "true" and "false". These aren't boolean attributes, but Synergy let's you bind to booleans and it will treat them accordingly.

Model:

{
  title: 'more information';
  expanded: false;
}

Template:

<button aria-expanded="{{ expanded }}">{{ title }}</button>
<div hidden="{{ !expanded }}"></div>

Output:

<button aria-expanded="false">{{ title }}</button>
<div hidden></div>

Logical NOT (!)

As per the example above, you can prefix boolean properties with the exclamation mark to convert a truthy value to a falsy value, and vice versa.

Model:

{
  authenticated: true;
}

Template:

<div hidden="{{ authenticated }}">Log in</div>
<div hidden="{{ !authenticated }}">Log out</div>

Output:

<span hidden>Log in</span><span>Log out</span>
NEXTClass & Style PREVIOUSAPI