Injecteer Twig in JS met Assetic (.js.twig power)
Webbureau » Digitaal nieuws » Injecteer Twig in JS met Assetic (.js.twig power)

Injecteer Twig in JS met Assetic (.js.twig power)

Ten eerste is dit artikel een minutenverslag houwen die ik een paar dagen geleden heb gemaakt.

Ben geen groot voorstander vanactief, is het voor mij verplicht om het te gebruiken voor de projecten die we momenteel in mijn bedrijf ontwikkelen. En dus het gebruik van actief moet mij een maximale dienst bewijzen, zoals alle gereedschappen.

Een probleem ? Een oplossing !

Hier is mijn probleem. We hebben allemaal de behoefte gehad om een ​​route in een JS-bestand te bouwen. Voor dit probleem hebben we allemaal een pseudo-oplossing gevonden.

  1. U injecteert in uw pagina (HTML) een JS-variabele met inhoud Takje. Deze variabele wordt gebruikt in een JavaScript-bestand dat wordt geladen via actief. Effectief maar moeilijk te lezen en niet erg gebruiksvriendelijke.
    1
    2
    3
    4
    5
    6
    7
    8
    // vertakkingssjabloon
    <script>
    var mijnVar = « {{ path(‘my_route’) }}";
    </script>
    // javascript-bestand
    $("#sort").on("wijzigen", function() {
    venster.locatie.href = mijnVar + $(dit).val();
  2. U gebruikt FOSJsRoutingBundle en u gebruikt een catalogus met routes in een bestand JS gegenereerd door de bundel. Voordeel, routes kunnen heel eenvoudig worden gegenereerd, met contextgerelateerde parameters. Nadeel, het gebruik van een bundel aanvullend, en de verplichting om de wegen gebruiksklaar te maken bij de optie ontmaskeren=waar. Dit kan mogelijk enkele routes blootleggen in het bestand dat alle blootgestelde routes bevat.
    Soms het gebruik van FOSJsRoutingBundel is een beetje zoals een bazooka gebruiken om een ​​vlieg te doden: het kost veel als je niet veel hoeft te doen. Het alternatief, proberen te injecteren Takje in zijn JS.

In welk geval van gebruik en wat zijn de limieten?

Wees voorzichtig, dit houwen mag niet ten koste van alles worden gebruikt, aangezien het gebruik ervan zeer beperkt is.

actief compileert JavaScript-bestanden op een manier die volledig losstaat van de huidige context. Ik bedoel context met huidig ​​verzoek. Als in het bestand JS je kunt van alles en nog wat proberen, bij het genereren van het bestand zijn alleen bepaalde variabelen beschikbaar.

  • De globale variabelen van Takje
  • functies en filters Takje kan worden gebruikt
  • Routes zijn beschikbaar en kunnen worden gegenereerd
    MAÏS !! context is niet beschikbaar, dus had niet verwacht de huidige verzoekparameters te gebruiken via variabelen Takje In elk geval.

U kunt dus routes genereren zonder dynamische parameters of met statische parameters, of zelfs globale parameters gebruiken zoals die in de parameter.yml.

Alles over hoe je het moet instellen

U moet een filter maken Takje zodat actief weet wat u met uw bestanden moet doen. Je kunt het erin plaatsen 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 AppbundelFilteren;
gebruiken actiefAanwinstAssetInterface;
gebruiken actiefFilterenFilterInterface;
gebruiken symfonyBundelTwigBundelTakje Motor;
/ **
* @auteur Baptist Donaux@gmail.com>
*/
klasse TwigFilter gereedschap FilterInterface
{
privaat $sjablonen;
publiek functie __constructie(TwigEngine $templating)
{
$ This->sjablonen = $sjablonen;
}
publiek functie filterBelasting(AssetInterface $activum)
{}
publiek functie filterDump(AssetInterface $activum)
{
$content = $asset->getContent();
$inhoud = $ This->templating->render($asset->getSourceRoot()."/".$asset->getSourcePath());
$asset->setContent($content);
}
}

U moet dit filter declareren. Dit is een service die we zullen markeren als een filter vanactief. Je kunt het aangeven in app/config/services.yml.

1
2
3
4
5
6
7
diensten:
assetic.filter.takje:
klasse: AppbundeleFilterTwigFilter
argumenten:
- @sjabloon
tags:
- { naam: "assetic.filter", ook bekend als: "takje" }

In uw sjabloon waar je een bestand wilt gebruiken zoals .js.takje, declareert u gewoon het filter actief.

1
2
3
4
5
{% javascripten filter=”takje”
'@AppBundle/Resources/public/js/file.js.twig'
%}
<script type dan: ="tekst/javascript" src=« {{ asset_url }}« ></script>
{% eindjavascripts %}

hier is het bestand bestand.js.takje gebruikt in mijn geval.

1
2
3
$(" #spreuk ").Wij("wijziging", functie() {
venster.locatie.href= "{{ path('mijn_route', {}) }}" + $(dit).val();
});

Zodra het bestand is gegenereerd, is hier de weergave.

1
2
3
$(" #spreuk ").Wij("wijziging", functie() {
venster.locatie.href= "/mijn_route" + $(dit).val();
});

Conclusie, waarom niet?

Het gebruik van deze truc moet echt worden gemeten, want als het mogelijk is om een ​​paar variabelen of een paar eenvoudige routes te injecteren, kunnen de problemen snel belangrijker worden. In deze gevallen is deze oplossing mogelijk niet voldoende.

Deze oplossing wil dat ook laten zienactief kan oplossingen voor problemen voorstellen, oplossingen die knorren, Slok ou Brunch kan niet altijd bieden.

★ ★ ★ ★ ★