Assets

Assets in Finch zijn JavaScript- en CSS-bestanden die dynamisch in paginasjablonen worden geïnjecteerd. In plaats van in elk sjabloon <script>- en <link>-tags hard te coderen, registreren controllers assets voor het huidige verzoek. Het sjabloon geeft ze vervolgens allemaal in één keer weer via een enkele placeholder.

Dit is nuttig voor paginaspecifieke scripts en stijlen: een pagina die een datatable-bibliotheek gebruikt, laadt de JS/CSS van die bibliotheek alleen wanneer dat daadwerkelijk nodig is.

Hoe het werkt

1. Een controller roept rq.addAsset() aan om één of meer assets te registreren voor de huidige respons.
2. Het Jinja-sjabloon roept {{ assets.js() }} en {{ assets.css() }} aan om de geregistreerde tags weer te geven.
3. Finch rendert op die posities de juiste <script>- of <link>-tags.

Assets toevoegen

Assets worden toegevoegd binnen een controllermethode, vlak voordat de view wordt gerenderd:

Future<String> showPage() async {
  // Eén JavaScript-bestand toevoegen
  rq.addAsset(Asset(
    path: '/public/js/datatable.min.js',
    type: AssetType.js,
  ));

  // Een CSS-bestand toevoegen
  rq.addAsset(Asset(
    path: '/public/css/datatable.min.css',
    type: AssetType.css,
  ));

  return rq.renderView(path: 'pages/books');
}

Gebruik rq.addAssets() om meerdere assets tegelijk toe te voegen:

rq.addAssets([
  Asset(path: '/public/js/chart.js',   type: AssetType.js),
  Asset(path: '/public/css/chart.css', type: AssetType.css),
  Asset(path: '/public/js/utils.js',   type: AssetType.js),
]);

AssetType-waarden

Assets weergeven in sjablonen

Plaats de asset-placeholders in je basislayoutsjabloon. CSS hoort in de <head> zodat het laadt voordat de pagina wordt gerenderd. JavaScript hoort vlak vóór </body> om te voorkomen dat het laden van de pagina wordt geblokkeerd:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>{{ $t('logo.title') }}</title>

    <!-- Geeft alle geregistreerde CSS <link>-tags weer -->
    {{ assets.css() }}
  </head>
  <body>

    {% block content %}{% endblock %}

    <!-- Geeft alle geregistreerde JS <script>-tags weer -->
    {{ assets.js() }}
  </body>
</html>

Als er geen assets van een bepaald type zijn geregistreerd, wordt de placeholder gerenderd als een lege string.

Statische bestanden serveren

Assets zijn statische bestanden die worden geserveerd vanuit je publicDir. Configureer de publieke map in FinchConfigs:

FinchConfigs configs = FinchConfigs(
  publicDir: pathTo(env.get('PUBLIC_DIR', './public')),
);

Alle bestanden binnen publicDir zijn direct toegankelijk via hun pad. Een bestand op ./public/js/app.js wordt bijvoorbeeld geserveerd op /public/js/app.js.

Het pad van publicDir moet absoluut zijn. Gebruik pathTo() om het op te lossen ten opzichte van de projectroot.