Injizieren Sie Twig in JS mit Assetic (.js.twig power)
Erstens ist dieser Artikel ein Minutenbericht hacken die ich vor ein paar Tagen gemacht habe.
Kein starker Befürworter von seinVermögenswert, ist es für mich obligatorisch, es für die Projekte zu verwenden, die wir derzeit in meinem Unternehmen entwickeln. Und daher die Verwendung von Vermögenswert muss mir, wie alle Werkzeuge, maximale Dienste leisten.
Zusammenfassung
Ein Problem ? Eine Lösung !
Hier ist mein Problem. Wir alle hatten das Bedürfnis, eine Route in einer JS-Datei zu erstellen. Für dieses Problem haben wir alle eine Pseudolösung gefunden.
- Sie fügen in Ihre Seite (HTML) eine JS-Variable mit Inhalt ein Zweig. Diese Variable wird in einer JavaScript-Datei verwendet, die über geladen wird Vermögenswert. Effektiv, aber schwer zu lesen und nicht sehr benutzerfreundlich.
12345678// Verzweigungsvorlage<Skript>jung myVar = « {{ path(‘my_route’) }}";</Skript>// Javascript-Datei$("#sort").on("change", function() {window.location.href = meineVar + $(this).val(); - Sie verwenden FOSJsRoutingBundle und Sie verwenden einen Katalog von Routen in einer Datei JS erzeugt durch die bündeln. Vorteil, Routen können sehr einfach mit kontextbezogenen Parametern generiert werden. Nachteil, die Verwendung von a bündeln zusätzlich und die Verpflichtung, die Straßen mit der Option für benutzbar zu erklären exponieren = wahr. Dadurch können möglicherweise einige Routen in der Datei verfügbar gemacht werden, die alle verfügbar gemachten Routen enthält.
Manchmal die Verwendung von FOSJsRoutingBundle ist ein bisschen so, als würde man eine Fliege mit einer Panzerfaust töten: Es kostet viel, wenn man nicht viel tun muss. Die Alternative, versuchen zu spritzen Zweig in seinem JS.
In welchem Anwendungsfall und wo liegen die Grenzen?
Seien Sie vorsichtig, das hacken sollte nicht um jeden Preis verwendet werden, da seine Verwendung sehr begrenzt ist.
Vermögenswert kompiliert JavaScript-Dateien völlig losgelöst vom aktuellen Kontext. Ich meine Kontext durch aktuelle Anfrage. Wenn in der Datei JS Sie können versuchen, alles und jedes zu verwenden, beim Generieren der Datei sind nur bestimmte Variablen verfügbar.
- Die globalen Variablen von Zweig
- Funktionen und Filter Zweig kann verwendet werden
- Routen sind verfügbar und können generiert werden
SONDERN !! Kontext ist nicht verfügbar, daher wurde nicht erwartet, aktuelle Anforderungsparameter über Variablen zu verwenden Zweig Auf jeden Fall.
Sie können daher Routen ohne dynamische Parameter oder mit statischen Parametern generieren oder sogar globale Parameter verwenden, wie sie in die injiziert werden Parameter.yml.
Alles darüber, wie man es einrichtet
Sie müssen einen Filter erstellen Zweig so dass Vermögenswert wissen, was mit Ihren Dateien zu tun ist. Du kannst es einlegen 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
|
Namensraum AppBundleFilter;
- VermögenswertVermögenswertAssetInterface;
- VermögenswertFilterFilterSchnittstelle;
- SymfoniebündelnZweigBündelZweigEngine;
/ **
* @Autor Baptist Donaux@gmail.com>
*/
Klasse ZweigFilter implementiert FilterSchnittstelle
{
privat $Vorlagen;
Öffentlichkeit Funktion __bauen(TwigEngine $Template)
{
$ This-> Vorlage = $ Vorlage;
}
Öffentlichkeit Funktion filterLaden(AssetInterface $asset)
{}
Öffentlichkeit Funktion filterDump(AssetInterface $asset)
{
$content = $asset->getContent();
$content = $ This->Template->Rendering($asset->getSourceRoot()."/".$asset->getSourcePath());
$asset->setContent($content);
}
}
|
Sie müssen diesen Filter deklarieren. Dies ist ein Dienst, den wir als Filter kennzeichnen werdenVermögenswert. Sie können es deklarieren app/config/services.yml.
|
1
2
3
4
5
6
7
|
Leistungen:
assetic.filter.twig:
Klasse: AppBundleFilterTwigFilter
Argumente:
- @Vorlage
tags:
- { Name: „assetic.filter“, auch bekannt als: "Zweig" }
|
In deinem Vorlage wo Sie eine Datei wie verwenden möchten .js.zweig, deklarieren Sie einfach den Filter Vermögenswert.
|
1
2
3
4
5
|
{% Javascripts filter="Zweig"
'@AppBundle/Resources/public/js/file.js.twig'
%}
<Skript tippe=„Text/Javascript“ src=« {{ asset_url }}« ></Skript>
{% Endjavascripts %}
|
Hier ist die Datei file.js.twig in meinem Fall verwendet.
|
1
2
3
|
$(" #Fluch ").Wir("ändern", Funktion() {
Fenster.location.href= "{{ path('my_route', {}) }}" + $(fehlen uns die Worte.).val();
});
|
Sobald die Datei generiert wurde, ist hier das Rendering.
|
1
2
3
|
$(" #Fluch ").Wir("ändern", Funktion() {
Fenster.location.href= „/meine_route“ + $(fehlen uns die Worte.).val();
});
|
Fazit, warum nicht?
Die Verwendung dieses Tricks muss wirklich maßvoll sein, denn wenn er es erlaubt, ein paar Variablen oder ein paar einfache Routen einzufügen, können die Probleme schnell wichtiger werden. In diesen Fällen reicht diese Lösung möglicherweise nicht aus.
Das soll auch diese Lösung zeigenVermögenswert kann Lösungen für Probleme vorschlagen, Lösungen, die Grunzen, Schluck ou Brunch kann nicht immer anbieten.
