Ingebouwde sjabloonevenementen

Finch injecteert een set ingebouwde variabelen en hulpfuncties in elk Jinja-sjabloon. Deze zijn toegankelijk via speciale prefixes, naast je eigen addParam()-data.

Globale variabelen

{{ isLocalDebug }}   {# true wanneer de app in debugmodus draait #}
{{ data }}          {# map met alle params toegevoegd via rq.addParam() #}
{{ session }}       {# server-side sessie-map #}
{{ $rq }}           {# het Request-object #}

Asset-hulpmiddelen

{{ assets.js() }}      {# rendert alle <script>-tags die zijn toegevoegd via rq.addAsset() #}
{{ assets.css() }}     {# rendert alle <link>-tags #}
{{ assets.dataJs() }}  {# rendert data-attributen voor toegang vanuit JS #}

Route- en URL-hulpmiddelen (`$e`)

{{ $e.route }}                              {# het gerenderde pad van de gematchte route, bijv. '/users/42' — het specifieke path/extraPath dat overeenkwam met dit verzoek #}
{{ $e.routePath }}                          {# het canonieke volledige padpatroon van de route, bijv. '/users/{id}' (altijd via het primaire `path`, ook als een `extraPath` de match was) #}
{{ $e.routeKey }}                           {# de `key` van de route, bijv. 'users.show' — NIET hetzelfde als $e.route #}
{{ $e.isKey('root.panel') }}                {# true als de key van de huidige route overeenkomt #}
{{ $e.hasKey(['root.panel', 'root.form']) }} {# true als de key van de huidige route een van de opgegeven keys is #}

{{ $e.routeUrl('key') }}                           {# URL voor een benoemde route #}
{{ $e.routeUrl('users.show', {'id': '42'}) }}       {# URL met padparameters #}
{{ $e.routeUrl('search', {}, {'q': 'hello'}) }}     {# URL met queryparameters #}

{{ $e.uri }}            {# volledige request-URI, percent-encoded als één string #}
{{ $e.uriString }}      {# volledige request-URI, NIET gecodeerd #}
{{ $e.path }}           {# alleen het request-pad, percent-encoded als één string #}
{{ $e.pathString }}     {# alleen het request-pad, NIET gecodeerd #}
{{ $e.isPath('/example/form') }}  {# true als het huidige pad overeenkomt #}
{{ $e.endpoint }}       {# het gematchte endpoint-pad #}

{{ $e.url('/about') }}                    {# bouw een absolute URL vanuit een pad #}
{{ $e.urlParam('/users', {'id': '5'}) }}   {# URL met toegevoegde queryparameters #}
{{ $e.urlToLanguage('fa') }}              {# huidige URL omgezet naar een andere taal #}

Ondanks de namen zijn $e.uri/$e.path percent-encoded strings, geen Dart-Uri-object en geen lijst van padsegmenten — gebruik $e.uriString/$e.pathString wanneer je de ruwe, ongecodeerde waarde nodig hebt.

{{ $e.getCookie('theme', 'light') }}  {# lees een cookie met een standaardwaarde; altijd een gewone (niet-versleutelde) leesbewerking #}

Language Helpers

{{ $e.ln }}            {# huidige taalcode, bijv. 'en' #}
{{ $e.langs }}         {# lijst van alle geconfigureerde talen: [{code, label, contry}] #}

$e.dir en de velden label/contry binnen elke $e.langs-entry worden niet gelezen uit een gewone "dir"-sleutel in je taalbestand — ze zoeken specifieke vertaalsleutels op met de naam language.<code>_dir, language.<code>_label en language.<code>_contry (let op: contry, niet country — dit is een echte spelfout in het framework zelf, geen typfout in deze documentatie). Als deze sleutels niet bestaan in je taalbestanden, valt .tr.write() stilzwijgend terug op het teruggeven van de sleutel zelf, waardoor {{ $e.dir }} letterlijk de tekst language.en_dir zou renderen in plaats van ltr.

De taalbestanden van Finch's eigen voorbeeldproject definiëren alleen een gewone "dir"-sleutel en definiëren deze language.*-sleutels niet, waardoor $e.dir/$e.langs[].label/$e.langs[].contry standaard onopgelost renderen. De layout van het voorbeeldproject zelf omzeilt dit door in plaats daarvan {{ $t('dir') }} te gebruiken (een directe opzoeking van de gewone "dir"-sleutel) — zie het complete voorbeeld in Templates. Voeg zelf de sleutels language.<code>_dir/_label/_contry toe aan elk taalbestand, of geef de voorkeur aan $t('dir') / je eigen vertaalsleutels boven $e.dir en de velden label/contry van $e.langs.

Hulpprogramma's

{{ $e.widgetPath('partials/nav') }}   {# voegt de geconfigureerde widget-extensie toe aan een pad, bijv. 'partials/nav.j2.html' — voegt widgetsPath niet vooraf toe #}
{{ $e.randomString(8) }}             {# willekeurige string van 8 tekens (standaardlengte is 4 indien weggelaten) #}
{{ $e.toString(value) }}             {# converteer elke waarde naar een string #}

Vertaling

{{ $t('logo.title') }}                          {# vertaal een sleutel #}
{{ $t('greeting', {'name': user.name}) }}       {# vertalen met parameters #}

Geneste gegevensnavigatie

{{ $n('user/address/city', 'Unknown') }}  {# navigeer veilig door geneste params #}

Debug-dump

{{ dump(data) }}   {# dump een variabele visueel in de browser (alleen debug) #}

Aangepaste lokale events

Definieer je eigen globale functies in app.dart met Request.localEvents:

Request.localEvents.addAll({
  'currentYear': () => DateTime.now().year,
  'appName': () => 'My App',
});

Gebruik ze in sjablonen met de $l.-prefix:

<footer>© {{ $l.currentYear() }} {{ $l.appName() }}</footer>

Op deze pagina