Sjabloon

Finch gebruikt Jinja (de Python-sjabloonengine) voor het renderen van server-side HTML. Sjabloonbestanden bevinden zich in de map widgetsPath en hebben doorgaans de extensie .j2.html.

Een sjabloon renderen

Gebruik rq.renderView() in je controller:

return rq.renderView(
  path: 'home/index',     // Relatief aan widgetsPath, zonder extensie
  params: {
    'title': 'Startpagina',
    'items': ['Appel', 'Banaan'],
  },
);

Overzicht van Jinja-syntaxis

Concept	Syntaxis
Variabele	`{{ variable }}`
Opmerking	`{# Dit is een opmerking #}`
Voorwaarde	`{% if condition %} … {% endif %}`
Lus	`{% for item in list %} … {% endfor %}`
Insluiten	`{% include 'partial.j2.html' %}`
Overerving	`{% extends 'layout.j2.html' %}`
Blok definiëren	`{% block content %} … {% endblock %}`
Blok invullen	`{% block content %} … {% endblock %}`
Filter	`{{ value \| upper }}`
Commentaar	`{# ... #}`

Voorbeeld: basissjabloon

{# lib/widgets/layout/base.j2.html #}
<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
</head>
<body>
  {% block content %}{% endblock %}
</body>
</html>

Voorbeeld: kindpagina

{# lib/widgets/home/index.j2.html #}
{% extends 'layout/base.j2.html' %}

{% block content %}
  <h1>{{ title }}</h1>
  {% for item in items %}
    <p>{{ item }}</p>
  {% endfor %}
{% endblock %}

Partials insluiten

{% include 'shared/navbar.j2.html' %}

Meegeleverde sjablonen

Finch levert een standaard layout. Je kunt dit overschrijven met je eigen sjablonen in widgetsPath.

Lokale events

Sjablonen kunnen Dart-events registreren die worden uitgevoerd vóór het renderen:

// In de controller:
rq.localEvents.add(MyEvent());

class MyEvent extends LocalEvent {
  @override
  Future<void> run(Request rq) async {
    rq.addParam('currentUser', await UserModel().getCurrent(rq));
  }
}

Lokale layout-filters

Voeg aangepaste Jinja-filters toe via rq.localLayoutFilters:

rq.localLayoutFilters['shorten'] = (value, args) {
  return value.toString().substring(0, 50);
};

Gebruik in sjabloon:

{{ longText | shorten }}

Ingebouwde variabelen

Finch injecteert automatisch de volgende variabelen bij elke sjabloonrender:

Variabele	Beschrijving
`$language`	Huidige taalcode (`'en'`, `'nl'`, ...)
`$e`	Template-event-object met hulpmethoden
`$t`	Vertaalfunctie — `{{ $t('key') }}`
`$n`	Geneste navigatie

Op deze pagina