Defs

Usage

Block

{{{##def.<name>:<arg>:
def contents
#}}}

Inline

{{##def.<name>:<arg>:def contents#}}

Examples

Using a def

Block

Take this template thats creating a complexExpression def that will render a complex expression in both layout options one & two but not in any others. Utilizing a def for this allows you to maintain one version of the logic without duplicating it in your template.

Dot Template

{{{##def.complexExpression:
const someComplexExpression = /* some complex expression */;
#}}}
{{{? tps.answers.layout === "one"}}}
/* layout one code... */

{{#def.complexExpression}}
{{{?? tps.answers.layout === 'two'}}}
/* layout two code... */

{{#def.complexExpression}}
{{{??}}}
/* default layout code... */
{{{?}}}

Result

null

Inline

Dot Template

{{##def.intro:This is my intro#}}
{{#def.intro}}

Result

null

caution

Inline defs are not recommend due to the white space they leave behind. However, we still support this syntax for legacy reasons, though it may be removed in future versions. You can achieve the same result with a block def:

Dot Template

{{{##def.intro:
This is my intro
#}}}
{{#def.intro}}

Result

null

Using def argument

You can also pass one argument to a def. This argument can be any valid javascript value.

Block

Dot Template

{{{##def.complexExpression:useTypescript:
const someComplexExpression{{? useTypescript ?? false }}: string{{?}} = /* some complex expression */;
#}}}
{{#def.complexExpression:true}}

Result

null

Inline

Dot Template

{{##def.intro:name:My name is {{= name}}#}}
{{#def.intro:"lino"}}

Result

null

caution

Inline defs are not recommend due to the white space they leave behind. However, we still support this syntax for legacy reasons, though it may be removed in future versions. You can achieve the same result with a block def:

Dot Template

{{{##def.intro:name:
My name is {{= name}}
#}}}
{{#def.intro:"lino"}}

Result

null

If you need to pass more information to the def, you can pass an object as the argument and add all the information to the object. Keep in mind that if you pass an object directly, you need to follow it with a semicolon ; or a space.

Block

Dot Template

{{{##def.someExpression:user:
const name = "{{= user.name}}";
const age = {{= user.age}};
#}}}
{{#def.someExpression:{ name: "lino", age: 24 }; }}

Result

null

Inline

Dot Template

{{##def.someExpression:user:My name is {{= user.name}} and my age is {{= user.age}}#}}
{{#def.someExpression:{ name: "lino", age: 24 }; }}

Result

null

caution

Inline defs are not recommend due to the white space they leave behind. However, we still support this syntax for legacy reasons, though it may be removed in future versions. You can achieve the same result with a block def:

Dot Template

{{{##def.intro:user:
My name is {{= user.name}} and my age is {{= user.age}}
#}}}
{{#def.intro:{ name: "lino", age: 24 }; }}

Result

null

Using a function def

You can also define defs as an javascript function.

Block

Dot Template

{{{##def.renderIntro = function(name) {
        return `My name is ${name}`;
}#}}}
{{#def.renderIntro("lino")}}

Result

null

Inline

Dot Template

{{##def.renderIntro = function(name) {
        return `My name is ${name}`;
}#}}
{{#def.renderIntro("lino")}}

Result

null

caution

Inline defs are not recommend due to the white space they leave behind. However, we still support this syntax for legacy reasons, though it may be removed in future versions. You can achieve the same result with a block def:

Dot Template

{{{##def.renderIntro = function(name) {
        return `My name is ${name}`;
}#}}}
{{#def.renderIntro("lino") }}

Result

null

Use a def in a file name

You can utilize a def if your logic gets to complex for your file name.

caution

Be aware that adding new lines to the def file will also show up in your file name.

name.def

{{? tps.answers.capitalize}}{{= tps.utils.capitalize(tps.name)}}{{??}}tps.name{{?}}

If name was nav and capitalize was true then the result would be uppercase name

Dot Template

{{#def.name}}.js

Result

null

Nav.js

If capitalize was false then the result would be a lowercase name

nav.js