Dynamic Contracts

Overview

ToughClicks supports Dynamic Contracts through support for Handlebars.js templating. In order to use this feature, start by modifying your Document's Terms to include valid Handlebars.js expressions. Once set, you'll need to set your "Dynamic Data" in the ToughClicks JS Library.

Variables

For simple variables, we recommend using Handlebar's basic expressions:

<p>{{firstname}} {{lastname}}</p>

{
  firstname: "Yehuda",
  lastname: "Katz",
}

<p>Yehuda Katz</p>

For Terms relying on many expressions, it may be helpful to use path expressions:

{{person.firstname}} {{person.lastname}}

{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

Yehuda Katz

Clause Swapping

For Clause Swapping, we recommend using Handlebar's built-in IF helper.

<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{/if}}
</div>

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz",
}

<div class="entry">
<h1>Yehuda Katz</h1>
</div>

Setting your Dynamic Data

To set your Dynamic Data in the ToughClicks JS Library, prior to calling render() you can pass your DyanmicData object to tc.setDynamicData(object). For example:

tc.setDynamicData({
  Person: {
    Email: "[email protected]",
    Name: "Daniel Litvak"
  }
});

tc.render();