Symfony - View Engine

Lớp View là lớp trình bày của ứng dụng MVC. Nó tách logic ứng dụng khỏi logic trình bày.

Khi đó, khi bộ điều khiển cần tạo HTML, CSS hoặc bất kỳ nội dung nào khác, bộ điều khiển sẽ chuyển tiếp tác vụ tới công cụ tạo khuôn mẫu.

Mẫu

Mẫu về cơ bản là các tệp văn bản được sử dụng để tạo bất kỳ tài liệu dựa trên văn bản nào như HTML, XML, v.v. Nó được sử dụng để tiết kiệm thời gian và giảm lỗi.

Theo mặc định, các mẫu có thể nằm ở hai vị trí khác nhau -

app/Resources/views/- Thư mục dạng xem của ứng dụng có thể chứa các bố cục ứng dụng của bạn và các mẫu của gói ứng dụng. Nó cũng ghi đè các mẫu gói của bên thứ ba.

vendor/path/to/Bundle/Resources/views/ - Mỗi gói của bên thứ ba chứa các mẫu của nó trong thư mục “Tài nguyên / lượt xem /”.

Động cơ Twig

Symfony sử dụng một ngôn ngữ tạo khuôn mẫu mạnh mẽ được gọi là Twig. Twig cho phép bạn viết các mẫu ngắn gọn và dễ đọc một cách rất dễ dàng. Các mẫu Twig đơn giản và sẽ không xử lý các thẻ PHP. Twig thực hiện kiểm soát khoảng trắng, hộp cát và thoát HTML tự động.

Cú pháp

Twig chứa ba loại cú pháp đặc biệt -

• {{ ... }} - In một biến hoặc kết quả của một biểu thức vào mẫu.

• {% ... %} - Một thẻ điều khiển logic của mẫu. Nó chủ yếu được sử dụng để thực thi một hàm.

• {# ... #}- Cú pháp bình luận. Nó được sử dụng để thêm một bình luận đơn hoặc nhiều dòng.

Mẫu cơ sở cành cây được đặt tại “app/Resources/views/base.html.twig”.

Thí dụ

Hãy xem qua một ví dụ đơn giản bằng cách sử dụng động cơ twig.

StudentController.php

<?php  
namespace AppBundle\Controller;  

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; 
use Symfony\Component\HttpFoundation\Response; 
use Symfony\Bundle\FrameworkBundle\Controller\Controller;  

class StudentController extends Controller { 
   /** 
      * @Route("/student/home") 
   */ 
   public function homeAction() { 
      return $this->render('student/home.html.twig'); 
   } 
}

Đây, render() phương thức hiển thị một mẫu và đưa nội dung đó vào một đối tượng Phản hồi.

Bây giờ di chuyển đến thư mục “views” và tạo một thư mục “student” và bên trong thư mục đó tạo một tệp “home.html.twig”. Thêm các thay đổi sau vào tệp.

home.html.twig

//app/Resources/views/student/home.html.twig  
<h3>Student application!</h3>

Bạn có thể nhận được kết quả bằng cách yêu cầu url “http: // localhost: 8000 / student / home”.

Theo mặc định, Twig đi kèm với một danh sách dài các thẻ, bộ lọc và chức năng. Chúng ta hãy đi qua từng chi tiết một.

Thẻ

Twig hỗ trợ các thẻ quan trọng sau:

Làm

Các dothẻ thực hiện các chức năng tương tự như biểu thức chính quy với ngoại lệ là nó không in bất kỳ thứ gì. Cú pháp của nó như sau:

{% do 5 + 6 %}

Bao gồm

Câu lệnh include bao gồm một mẫu và trả về nội dung được hiển thị của tệp đó vào không gian tên hiện tại. Cú pháp của nó như sau:

{% include 'template.html' %}

Mở rộng

Thẻ mở rộng có thể được sử dụng để mở rộng một mẫu từ một mẫu khác. Cú pháp của nó như sau:

{% extends "template.html" %}

Khối

Block hoạt động như một trình giữ chỗ và thay thế nội dung. Tên khối bao gồm các ký tự chữ và số và dấu gạch dưới. Ví dụ,

<title>{% block title %}{% endblock %}</title>

Nhúng

Các embedthẻ thực hiện kết hợp cả bao gồm và mở rộng. Nó cho phép bạn bao gồm nội dung của mẫu khác. Nó cũng cho phép bạn ghi đè bất kỳ khối nào được xác định bên trong mẫu bao gồm, chẳng hạn như khi mở rộng mẫu. Cú pháp của nó như sau:

{% embed “new_template.twig” %} 
   {# These blocks are defined in “new_template.twig" #} 
   {% block center %} 
      Block content 
   {% endblock %} 
{% endembed %}

Bộ lọc

Các phần bộ lọc cho phép bạn áp dụng bộ lọc Twig thông thường trên một khối dữ liệu mẫu. Ví dụ,

{% filter upper %} 
   symfony framework 
{% endfilter %}

Tại đây, văn bản sẽ được chuyển thành chữ hoa.

Đối với

Forvòng lặp tìm nạp từng mục trong một trình tự. Ví dụ,

{% for x in 0..10 %} 
   {{ x }} 
{% endfor %}

Nếu

Các ifcâu lệnh trong Twig tương tự như PHP. Biểu thức đánh giá là true hoặc false. Ví dụ,

{% if value == true %} 
   <p>Simple If statement</p> 
{% endif %}

Bộ lọc

Cành cây chứa bộ lọc. Nó được sử dụng để sửa đổi nội dung trước khi được hiển thị. Sau đây là một số bộ lọc đáng chú ý.

Chiều dài

Bộ lọc độ dài trả về độ dài của một chuỗi. Cú pháp của nó như sau:

{% if name|length > 5 %} 
   ... 
{% endif %}

Thấp hơn

Bộ lọc thấp hơn chuyển đổi giá trị thành chữ thường. Ví dụ,

{{ 'SYMFONY'|lower }}

Nó sẽ tạo ra kết quả sau:

symfony

Tương tự, bạn có thể thử cho chữ hoa.

Thay thế

Bộ lọc thay thế định dạng một chuỗi nhất định bằng cách thay thế các trình giữ chỗ. Ví dụ,

{{ "tutorials point site %si% and %te%."|replace({'%si%': web, '%te%': "site"}) }}

Nó sẽ tạo ra kết quả sau:

tutorials point website

Tiêu đề

Bộ lọc tiêu đề trả về phiên bản in hoa tiêu đề của giá trị. Ví dụ,

{{ 'symfony framework '|title }}

Nó sẽ tạo ra kết quả sau:

Symfony Framework

Sắp xếp

Bộ lọc sắp xếp sắp xếp một mảng. Cú pháp của nó như sau:

{% for user in names|sort %} 
   ... 
{% endfor %}

Xén

Bộ lọc cắt tỉa cắt bỏ khoảng trắng (hoặc các ký tự khác) từ đầu và cuối chuỗi. Ví dụ,

{{ '  Symfony!  '|trim }}

Nó sẽ tạo ra kết quả sau:

Symfony!

Chức năng

Twig hỗ trợ các chức năng. Nó được sử dụng để thu được một kết quả cụ thể. Sau đây là một số chức năng quan trọng của Twig.

Thuộc tính

Các attributehàm có thể được sử dụng để truy cập thuộc tính "động" của một biến. Cú pháp của nó như sau:

{{ attribute(object, method) }} 
{{ attribute(object, method, arguments) }} 
{{ attribute(array, item) }}

Ví dụ,

{{ attribute(object, method) is defined ? 'Method exists' : 'Method does not exist' }}

Không thay đổi

Hàm Constant trả về giá trị không đổi cho một chuỗi được chỉ định. Ví dụ,

{{ constant('Namespace\\Classname::CONSTANT_NAME') }}

Đi xe đạp

Hàm chu kỳ quay vòng trên một mảng giá trị. Ví dụ,

{% set months = [‘Jan’, ‘Feb’, ‘Mar’] %}  
{% for x in 0..12 %} 
   { cycle(months, x) }} 
{% endfor %}

Ngày

Chuyển đổi một đối số thành một ngày để cho phép so sánh ngày. Ví dụ,

<p>Choose your location before {{ 'next Monday'|date('M j, Y') }}</p>

Nó sẽ tạo ra kết quả sau:

Choose your location before May 15, 2017

Đối số phải ở một trong các định dạng ngày và giờ được hỗ trợ của PHP.

Bạn có thể chuyển múi giờ làm đối số thứ hai.

Bán phá giá

Hàm kết xuất kết xuất thông tin về một biến mẫu. Ví dụ,

{{ dump(user) }}

Max

Hàm max trả về giá trị lớn nhất của một chuỗi. Ví dụ,

{{ max(1, 5, 9, 11, 15) }}

Min

Hàm min trả về giá trị nhỏ nhất của một dãy. Ví dụ,

{{ min(1, 3, 2) }}

Bao gồm

Hàm bao gồm trả về nội dung được hiển thị của một mẫu. Ví dụ,

{{ include('template.html') }}

Ngẫu nhiên

Hàm ngẫu nhiên tạo ra một giá trị ngẫu nhiên. Ví dụ,

{{ random([‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’]) }} 
{# example output: Jan #}

Phạm vi

Hàm Range trả về một danh sách chứa một cấp số cộng của các số nguyên. Ví dụ,

{% for x in range(1, 5) %} 
   {{ x }}, 
{% endfor %}

Nó sẽ tạo ra kết quả sau:

1,2,3,4,5

Bố cục

Bố cục đại diện cho các phần chung của nhiều dạng xem, ví dụ: đầu trang và chân trang.

Kế thừa Mẫu

Một mẫu có thể được sử dụng bởi một mẫu khác. Chúng ta có thể đạt được điều này bằng cách sử dụng khái niệm kế thừa mẫu. Kế thừa mẫu cho phép bạn xây dựng một mẫu "bố cục" cơ sở chứa tất cả các yếu tố chung của trang web được định nghĩa là các khối.

Hãy lấy một ví dụ đơn giản để hiểu thêm về kế thừa mẫu.

Thí dụ

Hãy xem xét mẫu cơ sở tại “app / Resources / views / base.html.twig”. Thêm các thay đổi sau vào tệp.

base.html.twig

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "UTF-8"> 
      <title>{% block title %}Parent template Layout{% endblock %}</title> 
   </head> 
</html>

Bây giờ di chuyển đến tệp mẫu chỉ mục có tại “app / Resources / views / default / index.html.twig“ . Thêm các thay đổi sau vào nó.

index.html.twig

{% extends 'base.html.twig' %}  
{% block title %}Child template Layout{% endblock %}

Đây, {% extends %}thẻ thông báo cho công cụ tạo khuôn mẫu để đánh giá mẫu cơ sở đầu tiên, thiết lập bố cục và xác định khối. Mẫu con sau đó được hiển thị. Mẫu con có thể mở rộng bố cục cơ sở và ghi đè khối tiêu đề. Bây giờ, hãy yêu cầu url “http: // localhost: 8000” và bạn có thể nhận được kết quả của nó.

Tài sản

Nội dung quản lý việc tạo và lập phiên bản URL của các nội dung web như bảng định kiểu CSS, tệp JavaScript và tệp hình ảnh.

JavaScript

Để bao gồm các tệp JavaScript, hãy sử dụng javascripts trong bất kỳ mẫu nào.

{# Include javascript #} 
{% block javascripts %} 
   {% javascripts '@AppBundle/Resources/public/js/*' %} 
      <script src="{{ asset_url }}"></script> 
   {% endjavascripts %} 
{% endblock %}

Biểu định kiểu

Để bao gồm các tệp biểu định kiểu, hãy sử dụng stylesheets thẻ trong bất kỳ mẫu nào

{# include style sheet #} 
{% block stylesheets %} 
   {% stylesheets 'bundles/app/css/*' filter = 'cssrewrite' %} 
      <link rel = "stylesheet" href="{{ asset_url }}" />
   {% endstylesheets %} 
{% endblock %}

Hình ảnh

Để bao gồm một hình ảnh, bạn có thể sử dụng thẻ hình ảnh. Nó được định nghĩa như sau.

{% image '@AppBundle/Resources/public/images/example.jpg' %} 
   <img src = "{{ asset_url }}" alt = "Example" /> 
{% endimage %}

Tài sản tổng hợp

Bạn có thể kết hợp nhiều tệp thành một. Điều này giúp giảm số lượng yêu cầu HTTP và tạo ra hiệu suất front-end cao hơn.

{% javascripts 
   '@AppBundle/Resources/public/js/*' 
   '@AcmeBarBundle/Resources/public/js/form.js' 
   '@AcmeBarBundle/Resources/public/js/calendar.js' %} 
   <script src = "{{ asset_url }}"></script> 
{% endjavascripts %}