STE Helpers

The Simple Template Engine (STE) has been enhanced with several powerful features to provide more flexibility and control over template rendering. These new features include advanced conditional logic, looping through arrays, and the ability to negate conditions. Below is a detailed documentation of these new capabilities, along with simple examples for each.

Conditional Logic

if

Evaluates a condition and includes the content if the condition is true.

Syntax:

{{#if condition}}
    <!-- Content to include if condition is true -->
{{/if}}

Example:

{{#if showTitle}}
    <h1>
        {{title}}
    </h1>
{{/if}}

if with else

Evaluates a condition and includes the content if the condition is true, otherwise includes the content within the else block.

Syntax:

{{#if condition}}
    <!-- Content to include if condition is true -->
{{#else}}
    <!-- Content to include if condition is false -->
{{/if}}

Example:

{{#if isLoggedIn}}
    <p>Welcome back, {{username}}!</p>
{{#else}}
    <p>Please log in.</p>
{{/if}}

if with elseif

Evaluates multiple conditions in sequence and includes the content of the first true condition.

Syntax:

{{#if condition1}}
    <!-- Content to include if condition1 is true -->
{{#elseif condition2}}
    <!-- Content to include if condition2 is true -->
{{#elseif condition3}}
    <!-- Content to include if condition3 is true -->
{{/if}}

Example:

{{#if userRole == 'admin'}}
    <p>Admin Panel</p>
{{#elseif userRole == 'editor'}}
    <p>Editor Dashboard</p>
{{/if}}

if with elseif and else

Evaluates multiple conditions in sequence and includes the content of the first true condition. If none of the conditions are true, includes the content within the else block.

Syntax:

{{#if condition1}}
    <!-- Content to include if condition1 is true -->
{{#elseif condition2}}
    <!-- Content to include if condition2 is true -->
{{#else}}
    <!-- Content to include if none of the above conditions are true -->
{{/if}}

Example:

{{#if userRole == 'admin'}}
    <p>Admin Panel</p>
{{#elseif userRole == 'editor'}}
    <p>Editor Dashboard</p>
{{#else}}
    <p>User Dashboard</p>
{{/if}}

Looping

each

Loops through an array and includes the content for each item in the array. For arrays of objects, placeholders within the loop can access the object's properties using dot notation. Nested loops can be handled by incrementing the each number.

Syntax:

{{#each array}}
    <!-- Content to include for each item in the array -->
{{/each}}

For nested loops:

<!-- Start outer loop -->
{{#each array}}
    <!-- Content for each item in the array -->
    <!-- Start inner loop -->
    {{#each1 nestedArray}}
        <!-- Content for each item in the nestedArray -->
    {{/each1}}
    <!-- End inner loop -->
{{/each}}
<!-- End outer loop -->

Example with simple array:

{{#each numbers}}
    <p>
        {{this}}
    </p>
{{/each}}

Example with array of objects:

{{#each users}}
    <p>
        {{name}} - {{email}}
    </p>
{{/each}}

Example with nested arrays:

<ul>
    {{#each categories}}
        <li>
            {{categoryName}}
            <ul>
                {{#each1 items}}
                    <li>
                        {{this}}
                    </li>
                {{/each1}}
            </ul>
        </li>
    {{/each}}
</ul>

Example with complex nested arrays:

<ul>
    {{#each data.items}}
        <li>
            {{name}}
            <ul>
                {{#each1 subitems}}
                    <li>
                        {{subname}}
                        <ul>
                            {{#each2 details}}
                                <li>
                                    {{this}}
                                </li>
                            {{/each2}}
                        </ul>
                    </li>
                {{/each1}}
            </ul>
        </li>
    {{/each}}
</ul>

@index

The @index placeholder can be used within #each loops to access the current index of the iteration. This is useful for displaying the position of each item in the array.

Syntax:

{{#each array}}
    <!-- Content to include for each item in the array -->
    {{@index}}: {{this}}
{{/each}}

Example with simple array:

{{#each numbers}}
    <p>
        {{@index}}: {{this}}
    </p>
{{/each}}

Example with array of objects:

{{#each users}}
    <p>
        {{@index}}: {{name}} - {{email}}
    </p>
{{/each}}

Example with nested arrays:

<ul>
    {{#each categories}}
        <li>
            {{@index}}: {{categoryName}}
            <ul>
                {{#each1 items}}
                    <li>
                        {{@index}}: {{this}}
                    </li>
                {{/each1}}
            </ul>
        </li>
    {{/each}}
</ul>

Negation

not

Evaluates a condition and includes the content if the condition is false.

Syntax:

{{#not condition}}
    <!-- Content to include if condition is false -->
{{/not}}

Example:

{{#not isLoggedIn}}
    <p>
        Please log in to continue.
    </p>
{{/not}}

Conditional Operators

STE supports common conditional operators within the if and elseif conditions for more complex logic.

• && (logical AND)
• || (logical OR)
• == (equality)
• != (inequality)
• > (greater than)
• < (less than)
• >= (greater than or equal to)
• <= (less than or equal to)

Example:

{{#if age >= 18 && country == 'USA'}}
    <p>Welcome, adult user from the USA!</p>
{{#elseif age < 18 || country != 'USA'}}
    <p>Access restricted for non-adult users or users outside the USA.</p>
{{/if}}

Dot notation

STE allows you to access nested properties with dot notation: .
Dot notation can be used within the each, if, elseif and not directives with or without conditional operators.

Example:

{{#if user.isLoggedIn}}
    <p>
        Welcome back, {{user.userName}}!
    </p>
{{/if}}

Example:

{{#if user.isLoggedIn && path == "/user-profile"}}
    <div id="user-data">
        <ul id="user-info">
            <li>{{user.profile.userFullName}}</li>
            <li>{{user.profile.email}}</li>
            <li>{{user.profile.phone}}</li>
        </ul>

        <ul id="user-address">
            <li>{{user.profile.address.city}}</li>
            <li>{{user.profile.address.state}}</li>
            <li>{{user.profile.address.country}}</li>
        </ul>
    </div>
{{/if}}

These enhancements make STE a powerful and flexible template engine suitable for a wide range of templating needs. Whether you need simple conditional logic or complex loops and conditionals, STE has you covered.