Template Gids

Welkom bij de Finch Template Gids! Deze gids legt uit hoe je templates gebruikt in je Finch-applicatie. Of je nu een ervaren ontwikkelaar bent of net begint, Finch biedt krachtige hulpmiddelen om server-side HTML-rendering te vereenvoudigen.

Wat is een template?

Een template in Finch is een bestand dat de HTML-structuur van een pagina bevat. Het kan ook placeholders bevatten voor gegevens die tijdens runtime worden ingevuld. Templates worden gebruikt om HTML-pagina's te genereren die naar de client worden gestuurd.

Jinja Template Engine

Finch gebruikt de Jinja template-engine voor het renderen van views. Het templating-systeem biedt krachtige functies voor het creëren van dynamische webpagina's met een duidelijke scheiding tussen logica en presentatie.

Templatesyntaxis

Finch gebruikt Jinja-syntaxis voor het renderen van views. De syntaxis is vergelijkbaar met Jinja. Hier is een voorbeeld:

{{ variable }}           <!-- Basale variabele-uitvoer -->
{{ object.property }}    <!-- Toegang tot objecteigenschappen -->

Voor meer informatie over de syntaxis, zie de Jinja Template Engine documentatie.

Of raadpleeg de Jinja Package Dart documentatie.

Een eenvoudig voorbeeld van een template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ heading }}</h1>
  <p>{{ content }}</p>
  {% for item in items %}
    <p>{{ item }}</p>
  {% endfor %}
</body>
</html>

Aangepaste event-functies toevoegen aan templates (Jinja)

Je kunt aangepaste event-functies toevoegen aan templates via de Request.localEvents map. Deze map bevat alle custom event-functies die je in templates kunt gebruiken. Bijvoorbeeld, om een functie toe te voegen die het huidige jaar retourneert:

final localEvents = {
  'currentYear': () => DateTime.now().year,
};

Request.localEvents.addAll(localEvents);

En daarna gebruik je het in je template:

<p>Het huidige jaar is {{ $l.currentYear() }}</p>

Aangepaste filters toevoegen aan templates (Jinja)

final localLayoutFilters = {
  'customDate': (value) => DateFormat('yyyy-MM-dd').format(value),
};

Request.addLocalLayoutFilters(localLayoutFilters);

Je kunt het filter in je template gebruiken zoals:

<p>{{ date | customDate }}</p>

Op deze pagina