ht-attrs

`ht-attrs` attribute reference

Overview
Example
Specification

Overview

The ht-attrs attribute causes HyperTemplates to annotate target HTML elements with one or more HTML attributes.

Example

This example shows the ht-attrs attribute being used to template the page description <meta> element.

layout.html

 1<html>
 2    <head>
 3        <meta charset='utf-8'>
 4        <title>Acme Inc.</title>
 5        <meta name='description' content='Home of Acme Inc.' ht-attrs='content:site.description'>
 6    </head>
 7    <body>
 8        <article>
 9            <p>Lorem ipsum, hipsters get some.</p>
10        </article>
11    </body>
12</html>

This template will cause the page description <meta> element content attribute to be populated with the value of the template data page.description or site.description property, or else do nothing (resulting in the default value "Home of Acme Inc." being used).

Specification

Supported elements

The ht-attrs attribute can be used with any HTML element.

1<a ht-attrs='href:page.author.href,site.author.href' ht-content='page.author.name'></a>

Attribute syntax

The ht-attrs attribute defines target HTML element attributes, expressed as a semicolon-separated list of name:value pairs. The value is a comma-separated list of dot-notation style references to one or more template data properties.

ht-attrs='href:link.href,link.url;target:link.target'

In the following example, the <meta> element ht-attrs attribute configures a single named attribute: content. The <link> element ht-attrs attribute configures three named attributes: rel, href, and type.

1<meta name='description' ht-attrs='content:site.description'>
2<link rel='icon' ht-attrs='rel:site.favicon.rel;href:site.favicon.href;type:site.favicon.type'>

NOTE: in this example, if the template data site.favicon.rel property is not defined, the <link> element will use the default value of "icon" (as configured by the rel='icon' attribute).

Default values

The ht-attrs attribute will only cause attributes to be added to a target element if the specified template data property is found. In cases where no value is found, HyperTemplates ignores the attribute.

In scenarios where a default or fallback value is desired, simply set the element attribute in the template.

1<meta name='author' content='ACME Inc' ht-attrs='content:page.author.name'>

In this example, if the template data page.author.name property does not exist, HyperTemplates will do nothing. The end result will be a valid <meta> attribute with a value of "ACME Inc" (as configured by the content attribute).

Attribute names

The ht-attrs attribute can optionally specify the name of the attribute to be added to the target element. The ht-attrs attribute syntax is name:value. If no attribute name is specified, an ordinal value will be used (e.g. data-attr-0, data-attr-1, etc).

1<meta name='author' ht-attrs='content:page.author.name,site.author.name'>

In this example, HyperTemplates will set an element attribute named content to the value of the template data page.author.name or site.author.name property, or else do nothing.

Multiple attributes

The ht-attrs attribute can be used to configure multiple attributes on the target element. See attribute syntax for more information.

ht-attrs attribute reference