ht-if attribute

`ht-if` attribute reference

Overview

The ht-if attribute retains the target HTML element if the defined conditional expression evaluates to true. If the conditional expression evaluates to false, the target HTML element is removed.

Example

This example shows the ht-if attribute being used to template the <header> element.

layout.html

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <meta charset='utf-8'>
 5        <title ht-content='page.title,site.title'></title>
 6    </head>
 7    <body>
 8        <header ht-if='page.title'>
 9            <h1 ht-content='page.title'></h1>
10        </header>
11        <article ht-content='page.content'></article>
12    </body>
13</html>

The highlighted portion of this template will cause HyperTemplates to populate the <h1> element with the value of the template data page.title property, or else remove the parent <header> element if page.title is not present.

Example output index.html

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

1{
2    site: {
3        title: "Conditional templating is fun!",
4    },
5    page: {
6        content: "Lorem ipsum, hipsters get some"
7    }
8}

The <header> element will be removed because the example template data did not contain a page.title property.

 1<!DOCTYPE html>
 2<html lang='en-US'>
 3    <head>
 4        <meta charset='utf-8'>
 5        <title>Conditional templating is fun!</title>
 6    </head>
 7    <body>
 8        <article>Lorem ipsum, hipsters get some.</article>
 9    </body>
10</html>

Specification

Supported elements

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

1<meta name='og:title' ht-if='data.opengraph' ht-attrs='content:data.opengraph.title'>

Attribute syntax

The ht-if attribute defines templating conditions expressed as a semicolon-separated list of property==value pairs (delineated by the == characters).

The property is a comma-separated list of dot-notation style references to one or more template data properties. If multiple properties are defined for a given conditional expression, the first non-empty property will be used.

The value is a comma-separated list of values (e.g. a string, integer, float, etc). If no value is provided, the ht-if attribute will evaluate true as long as the template data property exists, and the property value is not an empty string. If multiple values are defined for a given conditional expression, only one of the values must match for the condition to be evaluated as true.

Example

1<address ht-if='page.author.kind,site.author.kind==organization,company,business' ht-content='page.author.address'></address>

In this example, HyperTemplates will retain the <address> element if the value of the page.author.kind or site.author.kind template data property matches one of the the expected conditional values of organization, company, or business.

Inclusive templating

The ht-if attribute is used for inclusive templating. If the condition evaluates as true, the target HTML element is included. See ht-not for exclusive templating.

Conditional values

The ht-if attribute can optionally define a comma-separated list of one or more expected conditional values (see attribute syntax).

To explain how conditional values are evaluated, consider the following example template data.

 1{
 2    page: {
 3        title: "Introducing: HyperTemplates",
 4        author: {
 5            name: "Herd Works Inc.",
 6            href: "https://herd.works",
 7            kind: "organization",
 8        },
 9        tags: [
10            "blog",
11            "announcement"
12        ]
13    }
14}

Given this example template data, the conditional expression ht-if='page.author.kind' would evaluate true because the template data property exists and it not empty. However, the conditional expression ht-if='page.author.kind==person' would evaluate false because the page.author.kind property has a value of "organization", not "person".

Conditional expressions and arrays

When a conditional expression with a conditional value is used on a property that is an array, such as the page.tags property in this example, the value is compared to all of the values in the array. Please note the following examples based on the sample data shown above:

ht-if='page.tags' would evaluate true because the page.tags array is not empty
ht-if='page.tags==announcement' would evaluate true because page.tags contains the value announcement
ht-if='page.tags==news' would evaluate false because page.tags does not contain the value news

ht-if attribute reference