ht-apply directive

`ht-apply` directive reference

Overview

The ht-apply directive performs variable substitution on the target HTML elements attributes and child text nodes.

Example

This example shows the ht-apply directive being used to template the <title> element.

layout.html

 1<html lang='en-US'>
 2    <head>
 3        <meta charset='utf-8'>
 4        <title ht-apply>${site.title} | ${page.title}</title>
 5        <meta ht-apply name='description' content='${ page.description, "" }'>
 6    </head>
 7    <body>
 8        <header></header>
 9        <main></main>
10        <footer></footer>
11    </body>
12</html>

Example output index.html

Let's see what happens when we process this template with the following [template data].

1{
2    site: {
3        title: "HyperTemplates"
4    },
5    page: {
6        title: "ht-apply directive",
7        description: "ht-apply directive reference documentation"
8    }
9}

The <title> and <meta name='description'> elements are updated with the variables substituted:

 1<html lang='en-US'>
 2    <head>
 3        <meta charset='utf-8'>
 4        <title>HyperTemplates | ht-apply directive</title>
 5        <meta name='description' content='ht-apply directive reference documentation'>
 6    </head>
 7    <body>
 8        <header></header>
 9        <main></main>
10        <footer></footer>
11    </body>
12</html>

Specification

Supported elements

The ht-apply directive can be used with any HTML element, including void elements.

1<meta ht-apply name='description' content='${ page.description, "Placeholder description." }' />

Directive syntax

The ht-apply directive is an HTML boolean attribute. If it is present, HyperTemplates will process the element as a nested layout template.

Example:

1<title ht-apply='false'>${ page.title }</pull-quote>

This example demonstrates that ht-apply directives are invoked by the presence of the ht-apply attribute (i.e. ht-apply attribute values are ignored).

Implicit variable substitution

The ht-apply directive is implied by the ht-template directive, so it is not necessary to set the ht-apply attribute to invoke variable substitution on ht-template elements.

Example

In this example, it is not necessary to add the ht-apply directive to the <a> element. Variable substitution is implied by ht-template.

1<header>
2    <nav>
3        <menu>
4            <a ht-template='link:data.nav.links' href='${ link.href }'>
5        </menu>
6    </nav>
7</header>