Gọi hàm JavaScript trong twig

Xin chào, tôi có một vòng lặp trong tệp twig của mình. {% cho con trong listPositionRobot %}

Luna {{ con. getRobotName() }}

{% endfor %} Tôi muốn gán một hàm JS cho tất cả h2 được tạo với vòng lặp for này. Làm thế nào tôi có thể làm điều đó ?

Gọi hàm JavaScript từ Twig

function helloWorld(name) {
   console.log("hello " + name);
}
____1
{% block javascripts %}
    
{% endblock %}



Truyền thông tin từ Twig sang JavaScript

1
2
3

1
2
3
4
5
6
7
document.addEventListener('DOMContentLoaded', function() {
    var userRating = document.querySelector('.js-user-rating');
    var isAuthenticated = userRating.dataset.isAuthenticated;

    // or with jQuery
    //var isAuthenticated = $('.js-user-rating').data('isAuthenticated');
});
1
2
3

Kích hoạt chức năng Javascript tùy chỉnh từ mẫu cành cây

Drupal.behaviors.startTable = {
        attach: function () {

            var data = function () {
                return Handsontable.helper.createSpreadsheetData(100, 10);
            };

            var container = document.getElementById('example');

            var hot = new Handsontable(container, {
                data: data(),
                minSpareCols: 1,
                minSpareRows: 1,
                rowHeaders: true,
                colHeaders: true,
                contextMenu: true
            });


        }
    }
    

    {% block javascripts %}
        
    {% endblock %}

0
    

    {% block javascripts %}
        
    {% endblock %}

1
    

    {% block javascripts %}
        
    {% endblock %}

2

Gọi hàm PHP từ mẫu Twig

    

    {% block javascripts %}
        
    {% endblock %}

3______14
    

    {% block javascripts %}
        
    {% endblock %}

5
    

    {% block javascripts %}
        
    {% endblock %}

6
    

    {% block javascripts %}
        
    {% endblock %}

7
    

    {% block javascripts %}
        
    {% endblock %}

8
    

    {% block javascripts %}
        
    {% endblock %}

9
{% block javascripts %}
    
{% endblock %}



0
{% block javascripts %}
    
{% endblock %}



1
{% block javascripts %}
    
{% endblock %}



2
{% block javascripts %}
    
{% endblock %}



3
{% block javascripts %}
    
{% endblock %}



4
{% block javascripts %}
    
{% endblock %}



5
{% block javascripts %}
    
{% endblock %}



6

Timber (Twig) cách gọi các hàm trong wordpress

{% block javascripts %}
    
{% endblock %}



7
{% block javascripts %}
    
{% endblock %}



8
{% block javascripts %}
    
{% endblock %}



9
1
2
3
0

cành cây / cành cây. js Công khai

1
2
3
1
1
2
3
2
1
2
3
3

Cách gọi hàm php từ twig _Symfony3

1
2
3
4
1
2
3
5
1
2
3
6
1
2
3
7
1
2
3
8
1
2
3
9

0

1

2

3

Giải thích phương thức gọi đối tượng hàm JavaScript ()

4

5____46

7

8

9
1
2
3
4
5
6
7
0

Bài học tiếp theo Hướng dẫn PHP

// Lời chào. lời chào js = function(env) { twig. Mẫu. cuộc gọi (điều này, env); . //bolinfest. com/javascript/kế thừa. php) cành cây. kế thừa (lời chào, cành cây. Mẫu); . nguyên mẫu. render_ = function(stringBuffer, context, blocks) { stringBuffer. append("Xin chào"); . append("tên" trong ngữ cảnh? twig. lọc. chắc chắn (cái này. env_, context["name"], "World"). "Thế giới"); . nối thêm (". "); }

Tìm hiểu cách sử dụng Javascript trong các mẫu Twig để làm cho mã của bạn linh hoạt hơn và dễ bảo trì hơn

Mục lục

Các thành phần tệp đơn trong Twig

Tại sao chúng tôi muốn sử dụng mã Javascript trong các mẫu, cùng với HTML - thay vì lưu trữ nó trong các tệp riêng biệt?

Hãy nghĩ về thành phần bộ sưu tập hình ảnh. Thành phần như vậy chứa đánh dấu HTML, một số logic Twig, như vòng lặp

1
2
3
4
5
6
7
13 và chuyển đổi hình ảnh. Sau đó, có một lệnh gọi hàm Javascript chịu trách nhiệm về hộp đèn. Nếu chúng tôi lưu trữ tất cả những thứ đó trong một tệp, chúng tôi sẽ đạt được một số lợi thế

  • Mã Twig và JS được liên kết chặt chẽ hơn. Bạn có thể dễ dàng chuyển các biến Twig sang JS
  • Mã của bạn dễ di chuyển hơn - bạn có thể dễ dàng sử dụng lại thành phần bằng cách chỉ sao chép một tệp vào dự án khác
  • Khi bạn muốn chỉnh sửa thứ gì đó, bạn không cần tìm mã ở hai nơi riêng biệt - tệp Javascript và mẫu Twig - mà chỉ ở một nơi. Nhờ đó code dễ bảo trì hơn

Ngoài ra còn có những nhược điểm - vấn đề chính là việc sử dụng Javascript trực tiếp trong Twig sẽ lấy đi khả năng sử dụng các bộ tiền xử lý như Babel của bạn. Điều này có nghĩa là nếu bạn muốn hỗ trợ các trình duyệt cũ, bạn sẽ không thể sử dụng ES6

thẻ cành cây js

js Thẻ Twig là điều cần thiết để sử dụng JS trong Twig. Nó lấy mã JS được truyền cho nó và nối nó vào cuối mẫu, ngay trước khi kết thúc thẻ

1
2
3
4
5
6
7
14. Có thể sử dụng nhiều thẻ
1
2
3
4
5
6
7
15 - nội dung từ mỗi thẻ sẽ được nối với phần còn lại. Bạn không cần gói mã được chuyển tới
1
2
3
4
5
6
7
15 vào thẻ
1
2
3
4
5
6
7
17 -
1
2
3
4
5
6
7
15 sẽ làm điều đó cho bạn

Thẻ

1
2
3
4
5
6
7
15 có một giới hạn - nó không thể được sử dụng bên trong thẻ
1
2
3
4
5
6
7
80. Bộ nhớ đệm các phần cụ thể của mẫu lưu nội dung HTML do chúng tạo vào cơ sở dữ liệu - vì vậy mã Twig không cần chạy. Tuy nhiên, điều này ngăn thẻ
1
2
3
4
5
6
7
15 hoạt động

Thành phần Twig của bạn không cần chỉ dựa vào mã nội tuyến - nếu bạn muốn bao gồm tệp JS bên ngoài từ bên trong Twig, bạn có thể sử dụng chức năng. Liên kết đến tệp này cũng sẽ được bao gồm ở cuối mẫu

document.addEventListener('DOMContentLoaded', function() {
    var userRating = document.querySelector('.js-user-rating');
    var isAuthenticated = userRating.dataset.isAuthenticated;

    // or with jQuery
    //var isAuthenticated = $('.js-user-rating').data('isAuthenticated');
});
0

Ngoài ra còn có CSS ​​tương đương với thẻ

1
2
3
4
5
6
7
15 -
1
2
3
4
5
6
7
83. Nó hoạt động khá giống với
1
2
3
4
5
6
7
15, ngoại trừ việc đưa nội dung của nó vào phần
1
2
3
4
5
6
7
85 của trang web. Tôi không thực sự sử dụng nó - sẽ có vấn đề với bộ tiền xử lý CSS như gulp

Truyền dữ liệu từ Twig sang JS

Bây giờ mã JS của bạn tồn tại cùng với Twig, bạn có thể dễ dàng chuyển các biến Twig sang Javascript. Ví dụ

1
2
3
4
5
6
7
1

Theo quan điểm của Twig, mã JS chỉ là chuỗi văn bản - đó là lý do tại sao chúng ta chỉ có thể nối các biến Twig với văn bản tạo nên mã JS.

1
2
3
4
5
6
7
86 được sử dụng để chuyển đổi các biến Twig thành một dạng có thể được sử dụng bởi JS. Nhờ đó, Twig
1
2
3
4
5
6
7
87 sẽ biến thành JS
1
2
3
4
5
6
7
87, không phải
1
2
3
4
5
6
7
89 - điều này sẽ xảy ra nếu chúng ta chỉ xuất
1
2
3
00 vào mẫu

Cách tiếp cận như vậy sẽ hiệu quả, nhưng sẽ khá lộn xộn khi trộn Twig và JS như thế này - thoạt nhìn khó có thể nhận ra phần nào của mã là Twig và phần nào là JS. Tốt hơn là xác định các biến JS chứa dữ liệu từ Twig trước khi mã JS bắt đầu. Bạn có thể làm điều đó bằng Twig macro

1
2
3
4
5
6
7
8

Macro này có hai đối số

  • 1
    2
    3
    01 - biến twig hoặc đối tượng cần được chuyển sang JS
  • 1
    2
    3
    02 - Tên biến JS sẽ được gán giá trị biến Twig

Với macro

1
2
3
03, ví dụ của chúng ta với cảnh báo sẽ như thế này

1
2
3
0

Cái nào sẽ hiển thị mã này - giả sử rằng

1
2
3
04 chứa chuỗi "abc"

1
2
3
7

Plugin trợ giúp Javascript

Trình trợ giúp Javascript là plugin nhỏ mà tôi đã tạo để làm việc với JS trong Twig dễ dàng hơn. Tính năng chính của nó là chuyển tất cả các bản dịch tin nhắn tĩnh thành mảng javascript. Thông thường, bạn sẽ cần xác định từng thông báo theo cách thủ công, như thế này

1
2
3
8

Với plugin trình trợ giúp Javascript, bạn có thể chuyển tất cả các bản dịch tin nhắn tĩnh cùng một lúc

1
2
3
9

Tham số được truyền cho hàm là tên của mảng. Giả sử rằng bạn chỉ có hai bản dịch tin nhắn tĩnh, kết quả được hiển thị sẽ như thế này

0

Bạn cũng có thể sử dụng plugin để chuyển các biến Twig thành Javascript bằng cách sử dụng bộ lọc Twig thay vì macro

1

không gian tên thành phần

Một số thành phần chứa mã JS có thể được sử dụng trong nhiều phần của trang web cùng một lúc. Hãy nghĩ về thành phần băng chuyền. Nó hiển thị các trang trình bày bằng vòng lặp

1
2
3
4
5
6
7
13. Tập lệnh băng chuyền sử dụng cài đặt
1
2
3
06 lấy giá trị từ biến Twig
1
2
3
07

5

Như bạn có thể thấy, chúng ta đã khởi tạo carousel script trên phần tử với lớp

1
2
3
08. Điều gì xảy ra nếu cùng một thành phần băng chuyền được sử dụng đồng thời ở một nơi khác trên trang hiện đang hiển thị? . Điều này có nghĩa là việc khởi chạy tập lệnh với các cài đặt cụ thể sẽ ảnh hưởng đến hai băng chuyền cùng một lúc

Để tránh điều đó, các phần tử trong các thành phần Twig bị ảnh hưởng bởi Javascript phải đặt tên các lớp của chúng (hoặc các thuộc tính khác được JS sử dụng). Hãy thêm biến không gian tên vào ví dụ băng chuyền

1
2
3
4
5
6
7
10

Không gian tên phải được chuyển vào thành phần bằng từ khóa

1
2
3
70. Bạn cũng nên sử dụng từ khóa
1
2
3
71 để đảm bảo rằng thành phần đó được tách biệt khỏi bối cảnh biến của tệp mẹ của nó - cũng có thể có không gian tên riêng

1
2
3
4
5
6
7
11

Nếu bạn sử dụng thành phần của mình trong vòng lặp

1
2
3
4
5
6
7
13, bạn có thể sử dụng
1
2
3
73 hoặc phần tử
1
2
3
74 như một phần của biến không gian tên

1
2
3
4
5
6
7
12

Thế còn tiền tố

1
2
3
75 mà lớp carousel có thì sao? . Nhờ đó, chức năng tạo kiểu và javascript được tách rời và việc thay đổi các lớp liên quan đến javascript sẽ không phá vỡ bất kỳ kiểu nào. Đó là quy ước thực sự tốt để làm theo


THẺ

#twig #tutorial

Nếu bạn muốn nhận các bản cập nhật mới nhất về hướng dẫn và thành phần Craft CMS, hãy theo dõi tôi trên Twitter hoặc đăng ký nguồn cấp dữ liệu RSS

Làm cách nào để sử dụng Javascript trong twig?

js Thẻ Twig rất cần thiết để sử dụng JS trong Twig. Nó lấy mã JS được truyền cho nó và nối nó vào cuối mẫu, ngay trước khi kết thúc thẻ body . Có thể sử dụng nhiều thẻ js - nội dung từ mỗi thẻ sẽ được nối với phần còn lại. Bạn không cần bọc mã được chuyển tới js vào các thẻ

Chức năng twig là gì?

Twig là công cụ mẫu được sử dụng trong các ứng dụng Symfony . Có hàng chục bộ lọc và hàm mặc định do Twig định nghĩa, nhưng Symfony cũng định nghĩa một số bộ lọc, hàm và thẻ để tích hợp các thành phần Symfony khác nhau với các mẫu Twig.