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: "Kimberley"
}

Template:

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

Output:

<p>hello Kimberley!</p>

Attributes

Attributes that you want to bind to properties of your viewmodel must be prefixed with the colon mark (:).

Model:

{
  textColor: 'gold',
}

Template:

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

Output:

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

Singular Named Property

If you only need to bind an attribute to a single property of your viewmodel then you can simply reference that property by name, without the need for the curly braces.

Model:

{
  classes: ["pt-6", "space-y-4"],
}

Template:

<p id="foo" :class="classes">ok</p>

Output:

<p id="foo" class="pt-6 space-y-4">ok</p>

Shorthand / Same Name

If your property has the same name as the attribute you want to bind it to then you can use the shorthand notion.

Model:

{
  width: "100%",
  height: "100%",
  fill: "black"
}

Template:

<rect :width :height :fill />

Output:

<rect width="100%" height="100%" fill="black" />

Boolean attributes

Some HTML attributes are known as boolean attributes and 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></div>

Output:

<div hidden></div>

ARIA attributes

Some ARIA attributes accept the string values "true" and "false". These aren't boolean attributes but you can still bind them to booleans and Synergy will apply them as string values.

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 examples above, you can prefix boolean properties with an 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>