ht-content attribute

`ht-content` attribute reference

Overview

The ht-content attribute inserts text or HTML content from template data into the target HTML element.

Example

This example shows the ht-content attribute being used to template the <title> and <h1> elements.

layout.html

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <meta charset='utf-8'>
 5        <title ht-content='page.title,site.title'>Placeholder Title</title>
 6    </head>
 7    <body>
 8        <header>
 9            <h1 ht-content='page.title'>Hello, world.</h1>
10        </header>
11        <article>
12            <p>Lorem ipsum, hipsters get some.</p>
13        </article>
14    </body>
15</html>

This template will cause the <title> element to be populated with the value of the template data page.title or site.title property, or else do nothing (resulting in the the default value "Placeholder title" being used). The <h1> element will be populated with the value of the page.title property, or else do nothing (resulting in the default value "Hello, world." being used).

Example output index.html

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

1{
2    site: {
3        title: "Acme, Inc"
4    }
5}

Notice that this example template data object does have a site.title property, but does not have a page.title property. The <title> element child Text node ("Placeholder Title") will be replaced by the value of site.title. What will happen to the <h1> element?

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <meta charset='utf-8'>
 5        <title>Acme, Inc</title>
 6    </head>
 7    <body>
 8        <header>
 9            <h1>Hello, world.</h1>
10        </header>
11        <article>
12            <p>Lorem ipsum, hipsters get some.</p>
13        </article>
14    </body>
15</html>

The <h1> element was not modified because the example template data did not contain a value for page.title. This simple example demonstrates how to configure default values using HyperTemplates – just include them in the template using HTML!

Specification

Supported elements

The ht-content attribute can be used with any HTML element that can have child nodes. The ht-content attribute should not be used with void elements.

1<h1 ht-content='page.title'></h1>

Attribute syntax

The ht-content attribute provides content templating instructions, expressed as a single format:value pair, where value is a comma-separated list of dot-notation style references to one or more template data properties.

1<h1 ht-content='html:page.title,site.title'></h1>

See content formats for more information.

Default values

The ht-content attribute will only insert content in the 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 add the default content in the template as child nodes.

1<title ht-content='page.title'>ACME Inc</title>

In this example, if the template data page.title property does not exist, HyperTemplates will do nothing. The end result will be a valid <title> element with a value of "ACME Inc" (a child Text node).

Content formats

The ht-content attribute can optionally specify the format of the content to be inserted into the layout. The supported formats are text, html, and markdown. If no format is specified, the content is treated as plain text and inserted as a Text node.

1<article ht-content='markdown:page.content'></article>

In this example, markdown:page.content configures HyperTemplates to parse the value of page.content as Markdown. The rendered Markdown (i.e. HTML elements) are then appended as child nodes to the content element, in a similar manner as the Javascript appendChild() method.

NOTE: Unsupported formats are ignored, effectively resulting in the default behavior (plain text format).