Добавьте в шаблонизатор для объектов поддержку поля дата для объектов шаблона. Данные из этого поля пусть прорастают в data-атрибуты рендеримых тегов.
Таким образом, объект
{
block: 'div',
data: {
id: 5,
color: 'red'
}
}
Будет шаблонизирован в
<div data-id="5" data-color="red"></div>
Сделайте шаблон и, используя шаблонизатор, отобразите с его помощью картинку на html странице. В начальном html коде никакой картинки быть не должно, можете использовать вот такую заготовку:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
Отрисуйте с помощью шаблонизатора поле ввода теста и кнопку. Текст, введенный в поле ввода должен отрисоваться в интерфейсе после нажатия на кнопку. При повторном нажатии на кнопку, новый текст заменяет существующий.
Возьми любую домашку по верстке (не обязательно очень объемную, и переделай html код в шаблон. Теперь отрисуй код с помощью шаблонизатора так, чтобы внешний вид вёрстки не изменился
Создай вот такой вот json файл:
{
"name": "Тут имя для своего героя",
"health": 75,
"attack": 12,
"defence": 8
}
Цифры и текст в файле могут быть другими
Теперь сделай интерфейс, который загрузит эти данные через ajax, после чего отобразит их с помощью шаблонизатора. Будет лучше, если все будет выглядеть симпатично.