Twig in symfony

План
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

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

Призначення шаблонізатора 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. виведення форм

Основи розмітки засобами twig
виведення:
<a href="{{ url }}">{{ text }}</a>
обчислення та логіка:
{% set foo = 'foo' %}
{% set flag = false %}
{% if flag == true %}
<h3>Sometext</h3>
{% endif %}
{# Коментарі #}

План демонстрації standalone twig (github link)
- встановлення twig через composer
- Ініціалізація і конфігурація
- Створення cache, конфігурація, відключення
- Скачування готового шаблона
- корекція посилань на ассети (img, css, js)
- layout.html.twig розмітка на блоки
- index.html.twig заміна блоку content
- приклад циклу (відображення масиву даних)
- приклад include іншого шаблону в циклі

Поняття блоків twig
http://twig.sensiolabs.org/doc/functions/block.html
<title>{% block title %}{% endblock %}</title>
<h1>{{ block('title') }}</h1>
{% block body %}
{% endblock %}

Поняття блоків (перезавантаження)
{% extends "base.html" %}
{% block title %}new title{% endblock %}
{% block content %}
new content
{% endblock %}

Поняття блоків
http://twig.sensiolabs.org/doc/functions/block.
html
http://twig.sensiolabs.org/doc/tags/extends.html
http://twig.sensiolabs.org/doc/tags/use.html
http://twig.sensiolabs.org/doc/functions/parent.
html

Поняття фільтрів та функцій
filters:
{{ users|length }}
functions:
{{ date(user.created_at) }}

Огляд деяких функцій та фільтрів
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 }}")) }}

Огляд деяких функцій (масиви)
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) }}

Оператори розгалуження 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 %}

Оператор циклу 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

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 %}

Особливості використання twig в
symfony docs
Розміщення шаблонів:
app/Resources/views/
path/to/bundle/Resources/views/
імена шаблонів:
AcmeBlogBundle:Blog:index.html.twig

План демонстрації symfony (gh link)
- розмістити той же index з шаблона у
layout.html.twig, ассети - у відпов. папки
- пофіксити посилання на ассети (css, js,
images)
- створити декілька раутів (використовуючи
існуючий контролер), додати ссилки у
менюшку, змінити урл в конфігурації,
@Template annotations
- sub-render для квартир
- власний twig-фільтр dotdotdot

підключення ассетів (+app/config.yml)
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% javascripts
'@AppBundle/Resources/public/js/*'
'@AcmeBarBundle/Resources/public/js/form.js'
'@AcmeBarBundle/Resources/public/js/calendar.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% image '@AppBundle/Resources/public/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example" />
{% endimage %}

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.

Використання routing в twig
- створити новий раут
- додати відповідний action до контролеру
- створити шаблон
- додавати посилання path("_routename")

sub-render
- створити повноцінний action в контролері
- рендер цього action’а можна викликати в шаблоні:
<div id="sidebar">
{{ render(controller(
'AcmeDemoBundle:Welcome:view',
{ 'max': 3 }
)) }}
</div>

Створення власного фільтра
доки: standalone twig extension symfony twig extension
- розробка src/Acme/DemoBundle/Twig/Extension/DotDotDotExtension.php
- реєстрація
# app/config/services.xml
<parameters>
<parameter key="twig.extension.acme.dotdotdot.class"
>AcmeDemoBundleTwigExtensionDotDotDotExtension</parameter>
</parameters>
<services>
<service id="twig.extension.acme.dotdotdot" class="%twig.extension.acme.
dotdotdot.class%" public="false">
<tag name="twig.extension" />
<argument type="service" id="twig.loader" />
</service>
</services>

twig_js docs twigJsBundle
1. Підключити залежність JmsTwigJSBundle, зареєструвати в AppKernel...
2. Підключити ассет:
{% javascripts "%kernel.root_dir%/../vendor/jms/twig-js/twig.js" %}
<script language="javascript" src="{{ asset_url }}"></script>
{% javascripts "@AcmeDemoBundle/Resources/views/Welcome/roomjs.html.twig"
filter="twig_js, ?yui_js" %}
<script language="javascript" src="{{ asset_url }}"></script>
3. юзати в JavaScript:
var roomobj = {'price': 111, 'caption': 'some caption' ,'description': 'some
descr', 'size': 445, 'img': 'property_1.jpg' };
var content = Twig.render(roomjs.html, {room : roomobj})
$('.properties_list' ).html(content);

Дякую за увагу!
Питання?
mailto: dchabanenko@malkosua.com
callto: d_chabanenko.malkos

Twig in symfony

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to Twig in symfony

Similar to Twig in symfony (20)

More from Dmitry Chabanenko

More from Dmitry Chabanenko (20)

Twig in symfony