Injicer Twig i JS med Assetic (.js.twig power)
For det første er denne artikel en minutrapport hack som jeg lavede for et par dage siden.
Ikke at være en stærk fortaler forAssetisk, er det obligatorisk for mig at bruge det på de projekter, som vi er i gang med at udvikle i min virksomhed. Og derfor brugen af Assetisk skal yde mig en maksimal service, ligesom alle værktøjer.
Et problem ? En løsning !
Her er mit problem. Vi har alle haft behov for at bygge en rute i en JS-fil. På dette problem har vi alle fundet en pseudo-løsning.
- Du tilfører din side (HTML) en JS-variabel med indhold Twig. Denne variabel vil blive brugt i en JavaScript-fil indlæst via Assetisk. Effektiv, men svær at læse og ikke særlig brugervenlig.
12345678// gren skabelon<script>var myVar = « {{ path(‘my_route’) }}";</script>// javascript-fil$("#sort").on("change", function() {window.location.href = myVar + $(this).val(); - Du bruger FOSJsRoutingBundle, og du bruger et katalog over ruter i en fil JS genereret af bundte. Fordel, ruter kan genereres meget nemt med kontekstrelaterede parametre. Ulempe, brugen af en bundte yderligere, og pligt til at erklære vejene brugbare med muligheden blotlægge=sandt. Dette kan potentielt afsløre nogle ruter i filen, der indeholder alle eksponerede ruter.
Nogle gange brugen af FOSJsRoutingBundle er lidt som at bruge en bazooka til at dræbe en flue: det koster meget, når du ikke skal gøre meget. Alternativet, at prøve at injicere Twig i hans JS.
I hvilket tilfælde af brug, og hvad er grænserne?
Vær forsigtig, det her hack bør ikke bruges for enhver pris, da brugen er meget begrænset.
Assetisk kompilerer JavaScript-filer på en måde, der er fuldstændig adskilt fra den aktuelle kontekst. Jeg mener kontekst med aktuel anmodning. Hvis i filen JS du kan prøve at bruge alt og hvad, når du genererer filen, vil kun visse variabler være tilgængelige.
- De globale variabler af Twig
- funktioner og filtre Twig Kan bruges
- Ruter er tilgængelige og kan genereres
MAJS!! kontekst er ikke tilgængelig, så jeg forventede ikke at bruge aktuelle anmodningsparametre via variabler Twig I hvert fald.
Du kan derfor generere ruter uden dynamiske parametre eller med statiske parametre eller endda bruge globale parametre som dem, der er injiceret i parameter.yml.
Alt om, hvordan man sætter det op
Du skal oprette et filter Twig således at Assetisk ved, hvad du skal gøre med dine filer. Du kan placere den i src/AppBundle/Filter.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
navnerum AppBundlefiltre;
brug AssetiskAssetAssetInterface;
brug AssetiskfiltreFiltergrænseflade;
brug SymfonyBundleKvistbundtTwigEngine;
/ **
* @forfatter Baptist Donaux@gmail.com>
*/
klasse TwigFilter redskaber Filtergrænseflade
{
private $skabelon;
offentlige funktion __konstruere(TwigEngine $templating)
{
$ dette->skabelon = $skabelon;
}
offentlige funktion filterLoad(AssetInterface $asset)
{}
offentlige funktion filterDump(AssetInterface $asset)
{
$content = $asset->getContent();
$indhold = $ dette->skabelon->render($asset->getSourceRoot()."/".$asset->getSourcePath());
$asset->setContent($indhold);
}
}
|
Du skal deklarere dette filter. Dette er en tjeneste, som vi vil mærke som værende et filter afAssetisk. Du kan erklære det i app/config/services.yml.
1
2
3
4
5
6
7
|
tjenester:
assetic.filter.twig:
klasse: AppBundleFilterTwigFilter
argumenter:
- @skabelon
tags:
- { navn: "assetic.filter", a.k.a.: "Kvist" }
|
I din skabelon hvor du vil bruge en fil som .js.kvist, vil du blot erklære filteret Assetisk.
1
2
3
4
5
|
{% javascripts filter=”kvist”
'@AppBundle/Resources/public/js/file.js.twig'
%}
<script typen="tekst/javascript" src=« {{ asset_url }}« ></script>
{% endjavascripts %}
|
her er filen file.js.twig brugt i mit tilfælde.
1
2
3
|
$(" #stave ").vi("lave om", funktion() {
vindue.location.href= "{{ sti('min_rute', {}) }}" + $(denne).val();
});
|
Når filen er genereret, er gengivelsen her.
1
2
3
|
$(" #stave ").vi("lave om", funktion() {
vindue.location.href= "/min_rute" + $(denne).val();
});
|
Konklusion, hvorfor ikke?
Brugen af dette trick skal virkelig måles, for hvis det giver mulighed for at injicere nogle få variable eller et par simple ruter, kan problemerne hurtigt blive vigtigere. I disse tilfælde er denne løsning muligvis ikke nok.
Det har denne løsning også til formål at viseAssetisk kan foreslå løsninger på problemer, løsninger der Grunt, Gulp ou Brunch kan ikke altid tilbyde.