Inject Twig do JS s Assetic (.js.twig power)
Po prvé, tento článok je minútová správa kopnutie ktoré som vyrobil pred pár dňami.
Nebyť silným zástancomAssetic, je pre mňa povinné ho použiť na projektoch, ktoré práve v mojej firme rozvíjame. A preto použitie Assetic musí mi poskytnúť maximálnu službu, ako všetky nástroje.
Problém ? Riešenie !
Tu je môj problém. Všetci sme mali potrebu vytvoriť trasu v súbore JS. Na tento problém sme všetci našli pseudo-riešenie.
- Do svojej stránky (HTML) vložíte premennú JS s obsahom Vetvička. Táto premenná sa použije v súbore JavaScript načítanom cez Assetic. Efektné, ale ťažko čitateľné a nie veľmi užívateľsky príjemný.
12345678// šablóna pobočky<scenár>var myVar = « {{ path(‘my_route’) }}";</scenár>// súbor javascript$("#sort").on("zmena", function() {window.location.href = myVar + $(this).val(); - Používate FOSJsRoutingBundle a používate katalóg trás v súbore JS generované vonia. Výhodou je, že trasy je možné generovať veľmi jednoducho s kontextovými parametrami. Nevýhoda, použitie a vonia dodatočnú a povinnosť vyhlásiť cesty za použiteľné s opciou vystaviť=pravda. To môže potenciálne odhaliť niektoré trasy v súbore obsahujúcom všetky vystavené trasy.
Niekedy použitie FOSJsRoutingBundle je to trochu ako použitie bazuky na zabitie muchy: stojí to veľa, keď toho veľa nepotrebujete. Alternatívou je pokus o injekciu Vetvička v jeho JS.
V akom prípade použitia a aké sú limity?
Pozor, toto kopnutie by sa nemal používať za každú cenu, pretože jeho použitie je veľmi obmedzené.
Assetic kompiluje súbory JavaScript spôsobom úplne oddeleným od aktuálneho kontextu. Súčasnou požiadavkou myslím kontext. Ak je v súbore JS môžete skúsiť použiť čokoľvek a všetko, pri generovaní súboru budú dostupné len určité premenné.
- Globálne premenné Vetvička
- funkcie a filtre Vetvička môže byť použité
- Trasy sú dostupné a dajú sa vygenerovať
KUKURICA!! kontext nie je k dispozícii, takže sa neočakávalo použitie aktuálnych parametrov požiadavky prostredníctvom premenných Vetvička V každom prípade.
Môžete teda generovať trasy bez dynamických parametrov alebo so statickými parametrami, alebo dokonca použiť globálne parametre, ako sú tie, ktoré sú vložené do parameter.yml.
Všetko o tom, ako to nastaviť
Musíte vytvoriť filter Vetvička za to Assetic vedieť, čo robiť so svojimi súbormi. Môžete ho umiestniť 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
|
namespace AppBundlefilter;
použitie AsseticAktívumAssetInterface;
použitie AsseticfilterFilterInterface;
použitie SymfonyBalíkTwigBundleTwigEngine;
/ **
* @autor Baptista Donaux@gmail.com>
*/
trieda TwigFilter náradie FilterInterface
{
súkromný $templating;
verejnosť funkcie __konštrukcia(TwigEngine $templating)
{
$ toto->templating = $templating;
}
verejnosť funkcie filterLoad(AssetInterface $asset)
{}
verejnosť funkcie filterDump(AssetInterface $asset)
{
$content = $asset->getContent();
$obsah = $ toto->templating->render($asset->getSourceRoot()."/".$asset->getSourcePath());
$asset->setContent($obsah);
}
}
|
Tento filter musíte deklarovať. Toto je služba, ktorú označíme ako filterAssetic. Môžete to deklarovať v app/config/services.yml.
1
2
3
4
5
6
7
|
služby:
assetic.filter.twig:
trieda: AppBundleFilterTwigFilter
argumenty:
- @šablóna
tagy:
- { názov: "astický.filter", a.k.a: "vetvička" }
|
Vo vašom šablóna kde chcete použiť súbor ako .js.twig, filter jednoducho deklarujete Assetic.
1
2
3
4
5
|
{% javascripty filter = "vetvička"
'@AppBundle/Resources/public/js/file.js.twig'
%}
<scenár typ="text/javascript" src=« {{ asset_url }}« ></scenár>
{% endjavascripts %}
|
tu je súbor file.js.twig použité v mojom prípade.
1
2
3
|
$(" # kúzlo ").my("zmena", funkcie() {
okno.location.href= "{{ cesta('my_route', {}) }}" + $(toto).val();
});
|
Po vygenerovaní súboru je tu vykreslenie.
1
2
3
|
$(" # kúzlo ").my("zmena", funkcie() {
okno.location.href= „/moja_cesta“ + $(toto).val();
});
|
Záver, prečo nie?
Použitie tohto triku musí byť skutočne odmerané, pretože ak umožňuje vstreknúť niekoľko premenných alebo niekoľko jednoduchých ciest, problémy môžu byť rýchlo dôležitejšie. V týchto prípadoch toto riešenie nemusí stačiť.
Toto riešenie má tiež za cieľ ukázaťAssetic dokáže navrhnúť riešenia problémov, riešenia, ktoré zachrochtání, Dúšok ou olovrant nemôže vždy ponúknuť.