Đưa Twig vào JS bằng Assetic (.js.twig power)
Đại lý web » Tin tức kỹ thuật số » Đưa Twig vào JS bằng Assetic (.js.twig power)

Đưa Twig vào JS bằng Assetic (.js.twig power)

Đầu tiên, bài viết này là một báo cáo phút tấn mà tôi đã thực hiện vài ngày trước.

Không phải là một người ủng hộ mạnh mẽ củaGiả định, tôi bắt buộc phải sử dụng nó cho các dự án mà chúng tôi hiện đang phát triển trong công ty của mình. Và do đó, việc sử dụng Giả định phải cung cấp cho tôi một dịch vụ tối đa, giống như tất cả các công cụ.

Vấn đề ? Một giải pháp !

Đây là vấn đề của tôi. Tất cả chúng ta đều có nhu cầu xây dựng một tuyến đường trong tệp JS. Đối với vấn đề này, tất cả chúng ta đều đã tìm ra một giải pháp giả.

  1. Bạn đưa vào trang của mình (HTML) một biến JS có nội dung Cành. Biến này sẽ được sử dụng trong tệp JavaScript được tải qua Giả định. Hiệu quả nhưng khó đọc và không hay lắm sử dụng.
    1
    2
    3
    4
    5
    6
    7
    8
    // mẫu nhánh
    <kịch bản>
    myVar = « {{ path(‘my_route’) }}";
    </kịch bản>
    // tập tin javascript
    $("#sort").on("change", function() {
    window.location.href = myVar + $(this).val();
  2. Bạn đang sử dụng FOSJsRoutingBundle và bạn đang sử dụng danh mục các tuyến đường trong một tệp JS được tạo ra bởi bó lại. Ưu điểm, các tuyến có thể được tạo rất dễ dàng, với các tham số liên quan đến ngữ cảnh. Bất lợi, việc sử dụng một bó lại bổ sung và nghĩa vụ tuyên bố các con đường có thể sử dụng được với tùy chọn lộ = đúng. Điều này có khả năng có thể làm lộ một số tuyến trong tệp chứa tất cả các tuyến đã lộ.
    Đôi khi việc sử dụng FOSJsRoutingBundle hơi giống với việc sử dụng bazooka để giết một con ruồi: tốn rất nhiều tiền khi bạn không cần phải làm gì nhiều. Thay thế, cố gắng tiêm Cành trong anh ấy JS.

Trong trường hợp sử dụng, và các giới hạn là gì?

Hãy cẩn thận, điều này tấn không nên được sử dụng bằng mọi giá vì công dụng của nó rất hạn chế.

Giả định biên dịch các tệp JavaScript theo cách tách biệt hoàn toàn khỏi ngữ cảnh hiện tại. Ý tôi là bối cảnh theo yêu cầu hiện tại. Nếu trong tập tin JS bạn có thể thử sử dụng mọi thứ và mọi thứ, khi tạo tệp, chỉ một số biến nhất định sẽ khả dụng.

  • Các biến toàn cục của Cành
  • chức năng và bộ lọc Cành có thể được sử dụng
  • Các tuyến có sẵn và có thể được tạo
    NGÔ !! bối cảnh không khả dụng, vì vậy không mong muốn sử dụng các tham số yêu cầu hiện tại, thông qua các biến Cành Trong bất kỳ trường hợp nào.

Do đó, bạn có thể tạo các tuyến đường không có tham số động hoặc có tham số tĩnh hoặc thậm chí sử dụng các tham số toàn cục, chẳng hạn như các tham số được đưa vào tham số.yml.

Tất cả về cách thiết lập

Bạn cần tạo bộ lọc Cành để Giả định biết phải làm gì với các tập tin của bạn. Bạn có thể đặt nó trong src/AppBundle/Bộ lọc.

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
<?php
không gian tên Gói ứng dụngLọc;
sử dụng Giả địnhTài sảngiao diện nội dung;
sử dụng Giả địnhLọcBộ lọcGiao diện;
sử dụng SymfonyBó lạicành cây bóCànhĐộng Cơ;
/ **
* @tác giả Rửa tội Donaux@gmail.com>
*/
tốt nghiệp lớp XNUMX Cành câyBộ lọc thực hiện Bộ lọcGiao diện
{
riêng $ khuôn mẫu;
công khai chức năng __xây dựng(TwigEngine $ khuôn mẫu)
{
$ cái này-> khuôn mẫu = $ khuôn mẫu;
}
công khai chức năng bộ lọcTải(Giao diện tài sản $ tài sản)
{}
công khai chức năng bộ lọcDump(Giao diện tài sản $ tài sản)
{
$content = $asset->getContent();
$ content = $ cái này->templating->render($asset->getSourceRoot()."/".$asset->getSourcePath());
$asset->setContent($content);
}
}

Bạn phải khai báo bộ lọc này. Đây là một dịch vụ mà chúng tôi sẽ gắn thẻ là một bộ lọc củaGiả định. Bạn có thể khai báo nó trong app / config / services.yml.

1
2
3
4
5
6
7
dịch vụ:
tài sản.filter.twig:
lớp học: AppBundleFilọcCànhBộ Lọc
tranh luận:
@bản mẫu
tags:
{ tên: “assetic.filter”, bí danh: “cành cây” }

Trong của bạn mẫu nơi bạn muốn sử dụng một tập tin như .js.twig, bạn chỉ cần khai báo bộ lọc Giả định.

1
2
3
4
5
{% javascript bộ lọc = "cành cây"
'@AppBundle/Resources/public/js/file.js.twig'
%}
<kịch bản kiểu=“văn bản/javascript” src=« {{ asset_url }}« ></kịch bản>
{% endjavascripts %}

đây là tập tin tệp.js.twig được sử dụng trong trường hợp của tôi.

1
2
3
$(" #Đánh vần ").chúng tôi("thay đổi", chức năng() {
cửa sổ.location.href= "{{đường dẫn('my_route', {}) }}" + $(điều này.val();
});

Sau khi tệp được tạo, đây là kết xuất.

1
2
3
$(" #Đánh vần ").chúng tôi("thay đổi", chức năng() {
cửa sổ.location.href= "/tuyến đường của tôi" + $(điều này.val();
});

Kết luận, tại sao không?

Việc sử dụng thủ thuật này phải thực sự được đo lường bởi vì nếu nó cho phép đưa vào một vài biến số hoặc một vài lộ trình đơn giản, các vấn đề có thể nhanh chóng trở nên quan trọng hơn. Trong những trường hợp này, giải pháp này có thể không đủ.

Giải pháp này cũng nhằm mục đích cho thấy rằngGiả định có thể đề xuất các giải pháp cho các vấn đề, giải pháp mà Tiếng càu nhàu, Nuốt chửng ou Bưa ăn không phải lúc nào cũng có thể cung cấp.

★ ★ ★ ★ ★