Twig'i Assetic (.js.twig gücü) ile JS'ye enjekte edin
Web ajansı » Dijital haberler » Twig'i Assetic (.js.twig gücü) ile JS'ye enjekte edin

Twig'i Assetic (.js.twig gücü) ile JS'ye enjekte edin

İlk olarak, bu makale bir tutanak raporudur. kesmek ki birkaç gün önce yaptım.

güçlü bir savunucusu olmamakasetik, şu anda şirketimde geliştirmekte olduğumuz projelerde kullanmak benim için zorunludur. Ve bu nedenle, kullanımı asetik tüm araçlar gibi bana maksimum hizmet vermeli.

Bir sorun ? Bir çözüm !

İşte benim sorunum. Hepimiz bir JS dosyasında bir rota oluşturma ihtiyacı duyduk. Bu soruna hepimiz sözde bir çözüm bulduk.

  1. Sayfanıza (HTML) içeriğe sahip bir JS değişkeni enjekte edersiniz Dal. Bu değişken, aracılığıyla yüklenen bir JavaScript dosyasında kullanılacaktır. asetik. Etkili ama okuması zor ve çok değil kullanıcı dostu.
    1
    2
    3
    4
    5
    6
    7
    8
    // şube şablonu
    <senaryo>
    var benimVar = « {{ path(‘my_route’) }}";
    </senaryo>
    // javascript dosyası
    $("#sort").on("değiştir", function() {
    window.location.href = myVar + $(this).val();
  2. FOSJsRoutingBundle kullanıyorsunuz ve bir dosyada bir yol kataloğu kullanıyorsunuz JS tarafından oluşturulan demet. Avantajı, bağlamla ilgili parametrelerle rotalar çok kolay bir şekilde oluşturulabilir. Dezavantajı, kullanımı demet ek ve seçenek ile kullanılabilecek yolları beyan etme zorunluluğu ifşa = doğru. Bu, açığa çıkan tüm rotaları içeren dosyadaki bazı rotaları potansiyel olarak açığa çıkarabilir.
    Bazen kullanımı FOSJ'lerYönlendirme Paketi biraz sineği öldürmek için bazuka kullanmaya benzer: fazla bir şey yapmanız gerekmediğinde çok pahalıya mal olur. Alternatif, enjekte etmeye çalışmak Dal onun içinde JS.

Hangi durumlarda kullanılır ve limitleri nelerdir?

Dikkatli ol, bu kesmek kullanımı çok sınırlı olduğu için ne pahasına olursa olsun kullanılmamalıdır.

asetik JavaScript dosyalarını geçerli bağlamdan tamamen bağımsız bir şekilde derler. Mevcut istek ile bağlamı kastediyorum. dosyada ise JS her şeyi kullanmayı deneyebilirsiniz, dosyayı oluştururken yalnızca belirli değişkenler kullanılabilir.

  • küresel değişkenler Dal
  • fonksiyonlar ve filtreler Dal kullanılabilir
  • Rotalar mevcuttur ve oluşturulabilir
    MISIR !! içerik mevcut değil, bu nedenle mevcut istek parametrelerini değişkenler aracılığıyla kullanmayı beklemiyordum Dal Her halükârda.

Bu nedenle, dinamik parametreler olmadan veya statik parametrelerle rotalar oluşturabilir veya hatta sisteme enjekte edilenler gibi genel parametreleri kullanabilirsiniz. parametre.yml.

Nasıl kurulacağı hakkında her şey

Bir filtre oluşturmanız gerekiyor Dal böylece asetik dosyalarınızla ne yapacağınızı bilin. içine yerleştirebilirsin src/AppBundle/Filtre.

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
ad Uygulama Paketifiltre;
kullanım asetikVarlıkVarlık Arayüzü;
kullanım asetikfiltreFiltre Arayüzü;
kullanım Symfony'nindemetDal Paketidal motoru;
/ **
* @yazar Baptist Donaux@gmail.com>
*/
sınıf Dal Filtresi uygular Filtre Arayüzü
{
özel $şablonlama;
halka açık işlev __yapı(TwigEngine $şablon oluşturma)
{
bu $->şablon = $şablon;
}
halka açık işlev filtre Yükü(AssetInterface $varlık)
{}
halka açık işlev filtre dökümü(AssetInterface $varlık)
{
$içerik = $varlık->getContent();
$içerik = bu $->templateing->render($asset->getSourceRoot()."/".$asset->getSourcePath());
$varlık->setContent($content);
}
}

Bu filtreyi bildirmelisiniz. Bu, filtre olarak etiketleyeceğimiz bir hizmettir.asetik. içinde ilan edebilirsiniz app/config/services.yml.

1
2
3
4
5
6
7
hizmetler:
assetic.filter.twig:
sınıf: Uygulama PaketieFilterTwigFilter
argümanlar:
- @şablon
etiketler:
- { isim: “astic.filter”, diğer adıyla: "dal" }

Sizin şablon gibi bir dosyayı kullanmak istediğiniz yerde .js.dal, sadece filtreyi bildireceksiniz asetik.

1
2
3
4
5
{% javascriptler filtre=”dal”
"@AppBundle/Resources/public/js/file.js.twig"
%}
<senaryo tip=“metin/javascript” src=« {{ asset_url }}« ></senaryo>
{% sonjavascriptler %}

dosya burada dosya.js.twig benim durumumda kullanıldı.

1
2
3
$(" #hecelemek ").Biz("değiştirmek", işlev() {
pencere.konum.href= "{{ path('my_route', {}) }}" + $( Re-Tweet).val();
});

Dosya oluşturulduktan sonra, oluşturma işlemi burada gerçekleşir.

1
2
3
$(" #hecelemek ").Biz("değiştirmek", işlev() {
pencere.konum.href= “/yolum” + $( Re-Tweet).val();
});

Sonuç, neden olmasın?

Bu numaranın kullanımı gerçekten ölçülmelidir, çünkü birkaç değişken veya birkaç basit yol enjekte etmeye izin verirse, problemler hızla daha önemli olabilir. Bu durumlarda bu çözüm yeterli olmayabilir.

Bu çözüm aynı zamanda şunu da göstermeyi amaçlamaktadır:asetik sorunlara çözümler önerebilir, hırıltı, Yudum ou Brunch her zaman teklif edemez.

★ ★ ★ ★ ★