Базовый синтаксис шаблонов

Фреймворк Marko использует декларативный синтаксис для описания пользовательских интерфейсов. Шаблоны в Marko представляют собой файлы с расширением .marko, в которых описывается структура и поведение интерфейса с использованием HTML-подобного синтаксиса. В этом разделе рассмотрим основные элементы синтаксиса, с которыми предстоит работать при создании шаблонов.

Структура шаблона

Каждый шаблон в Marko состоит из двух основных частей: HTML-разметки и кода, выполняющего динамическую логику. Стандартный шаблон выглядит как обычный HTML-документ с возможностью внедрения JavaScript-кода внутри.

<template>
    <div class="example">
        <h1>${data.title}</h1>
        <p>${data.description}</p>
    </div>
</template>

В этом примере <template> — это основная обертка для всего содержимого шаблона. Разметка внутри шаблона может быть как статической (HTML), так и динамической, где данные подставляются с помощью ${}.

Данные шаблона

В Marko для работы с данными используются переменные, передаваемые в шаблон через объект data. Эти данные можно передавать из JavaScript-кода, который использует шаблон. Каждый объект внутри ${} представляет собой доступ к свойствам объекта data.

Пример передачи данных:

const template = require('./template.marko');
template.renderSync({
    title: "Заголовок страницы",
    description: "Описание страницы"
});

В шаблоне это отразится как:

<h1>Заголовок страницы</h1>
<p>Описание страницы</p>

Условные конструкции

Marko поддерживает условные конструкции, которые позволяют включать или исключать части шаблона в зависимости от условий. Для этого используется директива if, которая работает аналогично условному оператору в JavaScript.

Пример использования:

<template>
    <div>
        <if(test)><p>Условие выполнено!</p></if>
        <else><p>Условие не выполнено.</p></else>
    </div>
</template>

В данном примере, если переменная test имеет значение true, будет выведен текст “Условие выполнено!”. В противном случае отобразится “Условие не выполнено”.

Итерации

Для перебора коллекций данных в Marko используется директива for, аналогичная циклу for в JavaScript. Это позволяет динамически генерировать повторяющиеся элементы на основе массивов или объектов.

Пример:

<template>
    <ul>
        <for|item of data.items>
            <li>${item}</li>
        </for>
    </ul>
</template>

Здесь data.items — это массив, элементы которого будут поочередно отрисовываться в виде списка <li>. Каждое значение элемента массива будет подставляться в ${item}.

Вложенные компоненты

Marko позволяет создавать компоненты, которые могут быть вложены друг в друга, что способствует лучшей структуре и повторному использованию кода. Компоненты используют аналогичный синтаксис, как и обычные шаблоны, но с возможностью инкапсуляции логики и передачи данных.

Пример создания компонента:

<!-- components/greeting.marko -->
<template>
    <div>
        <h1>Привет, ${data.name}!</h1>
    </div>
</template>

Вызов компонента в другом шаблоне:

<template>
    <div>
        <greeting name="Мария"></greeting>
    </div>
</template>

В данном примере компонент greeting будет отрисован с данными, переданными через атрибут name. Это позволяет легко переиспользовать компоненты в разных частях приложения.

Передача данных между компонентами

Данные можно передавать между компонентами как через атрибуты, так и через внутренние переменные. Для этого используется директива data, которая позволяет передавать объект данных в дочерний компонент.

Пример:

<template>
    <div>
        <greeting data=parentData></greeting>
    </div>
</template>

В дочернем компоненте:

<template>
    <div>
        <h1>Привет, ${data.name}!</h1>
    </div>
</template>

Здесь объект parentData будет передан в компонент greeting, который будет использовать свойство name из этого объекта для отображения.

Циклические атрибуты

Marko поддерживает возможность динамически менять атрибуты HTML-элементов. Например, можно изменить класс элемента в зависимости от данных.

Пример:

<template>
    <div class="item ${data.isActive ? 'active' : ''}">
        ${data.text}
    </div>
</template>

В этом примере класс active будет добавлен только в том случае, если значение data.isActive истинно. Это позволяет гибко изменять внешний вид элементов в зависимости от состояния данных.

Обработчики событий

Marko также поддерживает добавление обработчиков событий, которые можно использовать для взаимодействия с пользовательским интерфейсом. Например, чтобы привязать обработчик клика:

<template>
    <button on-click="handleClick">Нажми меня</button>
</template>

В коде компонента можно описать сам обработчик:

module.exports = {
    handleClick() {
        alert('Кнопка нажата!');
    }
};

Этот обработчик будет вызываться при клике на кнопку.

Заключение

Синтаксис шаблонов Marko гибок и мощен, позволяя создавать сложные, динамичные интерфейсы с использованием знакомых инструментов — HTML, JavaScript и декларативного подхода. Понимание базовых конструкций и принципов работы с данными является важным шагом для освоения работы с этим фреймворком.

Оглавление