Asset-beheer
Finch heeft een ingebouwd asset-beheersysteem waarmee je JS- en CSS-bestanden overal kunt registreren en ze vervolgens in sjablonen kunt renderen.
Configuratie
Stel publicDir in FinchConfigs in om statische bestanden te serveren:
FinchConfigs(
publicDir: './public',
)
Assets toevoegen
Registreer assets in een controller of middleware:
import 'package:finch/finch_ui.dart';
// Een asset toevoegen
rq.addAsset(AssetType.js, '/public/js/app.js');
rq.addAsset(AssetType.css, '/public/css/app.css');
// Meerdere assets tegelijk toevoegen
rq.addAssets(AssetType.js, [
'/public/js/vendor.js',
'/public/js/app.js',
]);
Assets renderen in sjablonen
Gebruik de assets-methoden in Jinja-sjablonen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mijn app</title>
{# Alle geregistreerde <link>-tags renderen #}
{{ assets.css() }}
</head>
<body>
{% block content %}{% endblock %}
{# Alle geregistreerde <script>-tags renderen #}
{{ assets.js() }}
</body>
</html>
De methoden assets.css() en assets.js() renderen alle geregistreerde assets:
<link rel="stylesheet" href="/public/css/app.css">
<script src="/public/js/vendor.js"></script>
<script src="/public/js/app.js"></script>
Voorwaardelijke assets
Je kunt per controlleractie verschillende assets gebruiken:
class DashboardController extends FinchController {
@override
Future<String> index() async {
rq.addAsset(AssetType.css, '/public/css/dashboard.css');
rq.addAsset(AssetType.js, '/public/js/charts.js');
return rq.renderView(path: 'dashboard/index');
}
@override
Future<String> show() async {
rq.addAsset(AssetType.css, '/public/css/detail.css');
return rq.renderView(path: 'dashboard/show');
}
}