Vnesite Twig v JS z Assetic (.js.twig power)
Prvič, ta članek je kratko poročilo kramp ki sem ga naredila pred nekaj dnevi.
Ne biti močan zagovornikAssetic, ga obvezno uporabljam pri projektih, ki jih trenutno razvijamo v svojem podjetju. In zato uporaba Assetic mi mora ponuditi maksimalno storitev, tako kot vsa orodja.
Problem ? Rešitev!
Tukaj je moj problem. Vsi smo imeli potrebo zgraditi pot v datoteki JS. Za to težavo smo vsi našli psevdo rešitev.
- V svojo stran (HTML) vstavite spremenljivko JS z vsebino Vejica. Ta spremenljivka bo uporabljena v datoteki JavaScript, naloženi prek Assetic. Učinkovito, a težko berljivo in ne preveč Uporabniku prijazen.
12345678// predloga veje<script>var mojaVar = « {{ path(‘my_route’) }}";</script>// datoteka javascript$("#sort").on("sprememba", funkcija() {window.location.href = myVar + $(this).val(); - Uporabljate FOSJsRoutingBundle in uporabljate katalog poti v datoteki JS ki jih je ustvaril snop. Prednost je, da je poti mogoče ustvariti zelo enostavno s parametri, povezanimi s kontekstom. Slabost, uporaba a snop dodatno, ter obveznost razglasitve cest za uporabne z možnostjo expose=true. To lahko potencialno razkrije nekatere poti v datoteki, ki vsebuje vse izpostavljene poti.
Včasih uporaba FOSJsRoutingBundle je podobno kot uporaba bazuke za ubijanje muhe: veliko stane, ko vam ni treba narediti veliko. Druga možnost je poskus injiciranja Vejica v njegovem JS.
V katerem primeru uporabe in kakšne so omejitve?
Bodite previdni, to kramp ne bi smeli uporabljati za vsako ceno, saj je njegova uporaba zelo omejena.
Assetic prevaja datoteke JavaScript na način, ki je popolnoma ločen od trenutnega konteksta. S trenutno zahtevo mislim na kontekst. Če je v datoteki JS lahko poskusite uporabiti vse in karkoli, pri generiranju datoteke bodo na voljo le določene spremenljivke.
- Globalne spremenljivke Vejica
- funkcije in filtri Vejica je lahko uporabljen
- Poti so na voljo in jih je mogoče ustvariti
AMPAK!! kontekst ni na voljo, zato nisem pričakoval uporabe trenutnih parametrov zahteve prek spremenljivk Vejica V vsakem primeru.
Zato lahko ustvarite poti brez dinamičnih parametrov ali s statičnimi parametri ali celo uporabite globalne parametre, kot so tisti, ki so vstavljeni v parameter.yml.
Vse o tem, kako ga nastaviti
Ustvariti morate filter Vejica za to Assetic vedeti, kaj storiti s svojimi datotekami. Lahko ga postavite v 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
|
imenski prostor AppBundlefilter;
uporaba AsseticAssetAssetInterface;
uporaba AsseticfilterFilterInterface;
uporaba SimfonijaSveženjTwigBundleTwigEngine;
/ **
* @avtor Baptist Donaux@gmail.com>
*/
razred TwigFilter izvedbe FilterInterface
{
zasebna $templating;
javnega funkcija __konstruirati(TwigEngine $templateing)
{
$ to->templating = $templating;
}
javnega funkcija filterLoad(AssetInterface $asset)
{}
javnega funkcija filterDump(AssetInterface $asset)
{
$content = $asset->getContent();
$vsebina = $ to->templating->render($asset->getSourceRoot()."/".$asset->getSourcePath());
$asset->setContent($content);
}
}
|
Ta filter morate prijaviti. To je storitev, ki jo bomo označili kot filterAssetic. Lahko ga prijavite v app/config/services.yml.
1
2
3
4
5
6
7
|
storitve:
assetic.filter.twig:
razred: AppBundleFilterTwigFilter
argumenti:
- @template
tags:
- { ime: “assetic.filter”, alias: "vejica" }
|
V svojem Predloga kjer želite uporabiti datoteko, kot je .js.twig, boste preprosto deklarirali filter Assetic.
1
2
3
4
5
|
{% javascripts filter=”vejica”
'@AppBundle/Resources/public/js/file.js.twig'
%}
<script tip=“besedilo/javascript” src=« {{ asset_url }}« ></script>
{% endjavascripts %}
|
tukaj je datoteka file.js.twig uporabljeno v mojem primeru.
1
2
3
|
$(" #urok ").mi("sprememba", funkcija() {
okno.location.href= "{{ path('my_route', {}) }}" + $(ta).val();
});
|
Ko je datoteka ustvarjena, je tukaj upodabljanje.
1
2
3
|
$(" #urok ").mi("sprememba", funkcija() {
okno.location.href= “/my_route” + $(ta).val();
});
|
Zaključek, zakaj pa ne?
Uporabo tega trika je treba res premeriti, kajti če omogoča vnos nekaj spremenljivk ali nekaj preprostih poti, so lahko težave hitro pomembnejše. V teh primerih ta rešitev morda ne bo zadostovala.
Tudi ta rešitev želi to pokazatiAssetic lahko predlaga rešitve za težave, rešitve, ki grunt, Opiti ou brunch ne more vedno ponuditi.