EJS-Templates

Der Inhalt dieses Moduls wird per JavaScript EJS-Template gerendert.

Erklärung

<div data-js-dummy-ejs="…">
    <button>
        Benutzer hinzufügen
    </button>
    <div class="js-list">
        EJS-Template wird gerendert&hellip;
    </div>
</div>

Der Inhalt von <div class="js-list"> wird wie folgt befüllt.

const users = [
    {name: 'Max Mustermann', age: 42, …},
    {name: 'Erika Mustermann', age: 38, …},
];

const template = S.ejs.render('user-list', {users});

this.elements.$list.html(template);

Der Aufruf S.ejs.render() übergibt Variablen an das jeweilige Template, wobei sich der Name vom Dateinamen user-list.ejs ableitet.

<%# Es ist auch möglich andere Templates einzunbinden %>

<% for (const user of users) { %>
    <%- render('user', {user}) %>
<% } %>

Dieses Template führt pro user ein weiteres Template aus.

const users = [
    {name: 'Max Mustermann', age: 42, …},
    {name: 'Erika Mustermann', age: 38, …},
];

let template = '';

for (const user of users)
{
    template += S.ejs.render('user', {user});
}

this.elements.$list.html(template);

<div class="mod-dummy-ejs-user" data-js-dummy-ejs-user>
    <h2><%= user.name %></h2>

    <% if (user.attributes instanceof Array) { %>
        <p>
            <strong>Eigenschaften</strong>:
            <%= user.attributes.join(', ') %>
        </p>
    <% } %>
</div>

Syntax

EJS ist am ehesten mit PHP vergleichbar. Alles zwischen <% und %> wird als reines JavaScript behandelt.

Es entfällt nicht nur das Erlernen einer neuen Syntax, sondern auch die damit verbundenen Einschränkungen. Denn was zum Beispiel mit Handlebars nicht möglich ist, kann mit reinem JavaScript natürlich problemlos realisiert werden.

• <% … %> Kontrollstruktur ohne Ausgabe
  • Vergleichbar mit PHP: <?php … ?>

• <%- … %> Ausgabe
  • Alternative: <% echo(…) %>
  • Vergleichbar mit PHP: <?= … ?> oder <?php echo … ?>

• <%= … %> Ausgabe (HTML kodiert)
  • Alternative: <%- escape(…) %>
  • Alternative: <% echo(escape(…)) %>
  • Vergleichbar mit PHP: <?= htmlspecialchars(…) ?>

• <%# … %> Kommentar ohne Ausgabe
  • Alternative: <%// … %>
  • Alternative: <%/* … */%>
  • Vergleichbar mit PHP: <?php // … ?>

Funktionen

• <% echo(1 + 2); %>
  • Gibt einen String aus

• <% escape('<b>HTML</b>'); %>
  • Wandelt alle geeigneten Zeichen in entsprechende HTML-Entities um
  • Aus & < > ' " wird & < > ' "
  • Kann auch außerhalb über S.ejs.escape(…) verwendet werden
  • Vergleichbar mit PHP: htmlspecialchars(…)

• <% render('template-name', {…}); %>
  • Bindet ein angegebenes Template ein
  • Kann auch außerhalb über S.ejs.render('template-name', {…}); verwendet werden

• <% embed('/assets/svg/icon-sample.svg', {…}); %>
  • Bindet eine angegebene Bilddatei "Inline" ein
  • Hinweis: Da es sich hier um eine Präprozessor-Direktive handelt, können keine Laufzeit-Variablen verwendet werden