ht-if directive reference
Overview
The ht-if directive 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 directive being used to template the <header> element.
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset='utf-8'>
5 <title ht-apply>${ page.title, site.title }</title>
6 </head>
7 <body>
8 <header ht-if='${ page.title }'>
9 <h1 ht-apply>${ page.title }</h1>
10 </header>
11 <article ht-apply>${ page.content, "Hello world." }</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 directive can be used with any HTML element.
1<meta ht-apply ht-if='${ data.opengraph }' name='og:title' content='${ data.opengraph.title }'>
Directive syntax
The ht-if directive supports a variety of conditional expressions consisting of the following components:
- Variables: all
ht-ifexpressions must include at least one${ ... }template variable. - Operator:
ht-ifexpressions may use a single operator, including:- the
!unary operator - a supported binary operator (
==,!=,~=, and!~) - a supported membership operator (
in, andnot in)
- the
- Literal values:
ht-ifexpressions may use literal values as conditional operands
Existence expressions
The most basic ht-if directive is a ht-if='${ ... }' existence expression.
Existence expressions evaluate true as long as the template variable returns a truthy value.
In HyperTemplates the number 0 is considered truthy, and "" empty strings are considered falsy.
Example
1<meta ht-apply ht-if='${ page.redirect }' http-equiv='refresh' content='0; url=${ page.redirect }'>
In this example, the target <meta> element will be removed if page.redirect is not set.
Unary expressions
HyperTemplates supports the unary ! operator, which can be used to negate an existence expression.
Example
1<title ht-apply ht-if='!${ page.title }'>${ site.title }</title>
2<title ht-apply ht-if='${ page.title }'>${ site.title } | ${ page.title }</title>
In this example, we are using the ! operator to check if page.title is not set.
If page.title is not set, or if it has no value, then the first <title> element is used and the second is discarded.
Binary expressions
HyperTemplates supports ==, !=, ~=, and !~ [binary operators].
A binary operator compares two values.
The values being compared are called operands, which can be [template variables] or literal values.
All binary expressions must contain at least one template variable operand.
Examples
Compare a template variable with a literal value using the equality operator (==).
1<title ht-if='${ page.path } == "/"'>Home</title>
Compare two template variables using the inequality operator (!=).
1<section ht-include='fragments/example' ht-if='${ page.foo } != ${ page.bar }'><section>
Evaluate a template variable using a mathing regular expression operator (~=).
1<section ht-include='fragments/related-posts' ht-if='${ page.path } =~ "^/blog/"'></section>
Membership expressions
HyperTemplates supports the in and not in membership operators.
Membership expressions must use the <operand> <operator> <collection> syntax.
Membership expression may use [template variables] or literal values as operands.
Membership expressions must use a template variable for the colection.
Examples
1<section ht-include='fragments/testimonials' ht-if='${ page.service } in ${ data.testimonials.categories }'></section>
In this example, the testimonial section will be removed if the value of ${ page.service } is not in the data.testimonial.categories collection.
Logical operators
Logical OR operator
The ht-if expressions support the logical OR operator.
The OR operator splits ht-if expressions into statements.
Statements are evaluated from left to right until a statement evaluates to true.
If the end of a logical OR expression is reached an no statement evaluated to true, the result is false.
Examples
1<a ht-if='${ page.foo } == "bar" OR ${ page.foo } == "baz"' href='#'>
2 <!-- link content -->
3</a>
In this example, the <a> element will be retained if the value of ${ page.foo } is "bar" or "baz".
Logical AND operations
Multiple ht-if directives can be added to a single element to express logical AND operations.
Logical AND operations evaluate ht-if directives in HTML attribute order until an expression evaluates to false.
Every ht-if expression in a logical AND operation must evaluate to true, otherwise the result is false.
Example
1<a ht-if='${ page.foo } == "bar"' ht-if='${ page.bar } == "baz"' href='#'>
2 <!-- link content -->
3</a>
In this example, the <a> element will be retained if the value of ${ page.foo } is "bar", AND the value of ${ page.bar } is "baz".