2. План
1. Призначення шаблонізатора twig
2. Основи twig (демонстрація standalone twig)
a. Основи розмітки засобами twig
b. поняття блоків, extend, include, render (in symfony)
c. поняття хелперу та функції в twig
d. Оператори розгалуження та циклів у twig
3. Викристання twig в symfony2 (демонстрація)
4. Розробка власної функції та фільтра в twig
5. Приклад використання twig_js
3. Two Step View pattern
Transform View
model data -> logical presentation
no specific formatting, may be html, xml, json, arrays, etc
Template View
logical presentation -> Physical representation
html layout
4. Призначення шаблонізатора twig
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
</html>
1. розділення верстки та коду
2. перетворення масивів даних у html-текст
3. повторне використання фрагментів
(шаблонів) html-коду
4. виведення форм
5. Основи розмітки засобами twig
виведення:
<a href="{{ url }}">{{ text }}</a>
обчислення та логіка:
{% set foo = 'foo' %}
{% set flag = false %}
{% if flag == true %}
<h3>Sometext</h3>
{% endif %}
{# Коментарі #}
6. План демонстрації standalone twig (github link)
- встановлення twig через composer
- Ініціалізація і конфігурація
- Створення cache, конфігурація, відключення
- Скачування готового шаблона
- корекція посилань на ассети (img, css, js)
- layout.html.twig розмітка на блоки
- index.html.twig заміна блоку content
- приклад циклу (відображення масиву даних)
- приклад include іншого шаблону в циклі
10. Поняття фільтрів та функцій
filters:
{{ users|length }}
functions:
{{ date(user.created_at) }}
11. Огляд деяких функцій та фільтрів
abs {{ number|abs }}
capitalize {{ 'my first car'|capitalize }}
date_modify {{ post.published_at|date_modify("+1 day")|date("m/d/Y") }}
format {{ "I like %s and %s."|format(foo, "bar") }}
lower {{ 'WELCOME'|lower }}
upper {{ 'welcome'|upper }} {# outputs 'WELCOME' #}
title {{ 'my first car'|title }} {# outputs 'My First Car' #}
template_from_string {{ include(template_from_string("Hello {{ name }}")) }}
12. Огляд деяких функцій (масиви)
join {{ [1, 2, 3]|join('|') }}
slice {{ '12345'|slice(1, 2) }} {# outputs 23 #}
slice {{ '12345'[:2] }} {# will display "12" #}
{{ '12345'[2:] }} {# will display "345" #}
range
{% for i in range(0, 3) %}
{{ i }},
{% endfor %}
max, min {{ max(1, 3, 2) }}
13. Оператори розгалуження if
defined: {% if foo is defined %} … {% endif %}
empty: {% if foo is empty %} … {% endif %}
odd: {{ var is odd }} even: {{ var is even }}
null: {{ var is null }}
sameas
{% if foo.attribute is same as(false) %}
<h2>someoutput</h2>
{% endif %}
14. Оператор циклу for
{% for user in users %}
<li>{{ user.username|e }}</li>
{% endfor %} {# e - shortcut to escape a variable #}
корисні “змінні”:
loop.index - # of iterations from the beginning (1 indexed)
loop.index0 - # of iterations from the beginning (0 indexed)
loop.revindex - # of iterations from the end (1 indexed)
loop.revindex0 - # of iterations from the end (0 indexed)
loop.first - true if first iteration
loop.last - true if last iteration
loop.length - # of iterations
15. only array keys:
{% for key in users|keys %}
<li>{{ key }}</li>
{% endfor %}
keys and values:
{% for key, user in users %}
<li>{{ key }}: {{ user.username|e }}</li>
{% endfor %}
16. Особливості використання twig в
symfony docs
Розміщення шаблонів:
app/Resources/views/
path/to/bundle/Resources/views/
імена шаблонів:
AcmeBlogBundle:Blog:index.html.twig
17. План демонстрації symfony (gh link)
- розмістити той же index з шаблона у
layout.html.twig, ассети - у відпов. папки
- пофіксити посилання на ассети (css, js,
images)
- створити декілька раутів (використовуючи
існуючий контролер), додати ссилки у
менюшку, змінити урл в конфігурації,
@Template annotations
- sub-render для квартир
- власний twig-фільтр dotdotdot
19. app.security - The security context.
app.user - The current user object.
app.request - The request object.
app.session - The session object.
app.environment - The current environment (dev, prod, etc).
app.debug - True if in debug mode. False otherwise.
20. Використання routing в twig
- створити новий раут
- додати відповідний action до контролеру
- створити шаблон
- додавати посилання path("_routename")
21. sub-render
- створити повноцінний action в контролері
- рендер цього action’а можна викликати в шаблоні:
<div id="sidebar">
{{ render(controller(
'AcmeDemoBundle:Welcome:view',
{ 'max': 3 }
)) }}
</div>