Двокрокова шаблонізація (шаблон проєктування)

Двокрокова шаблонізація (англ. Two Step View) — шаблон проєктування, який пропонує виконувати візуалізацію даних у два кроки: сформувати відображення моделі, після чого вставити її у шаблон.

Опис[ред. | ред. код]

Якщо web-аплікація складається із багатьох сторінок, необхідний єдиний вигляд і однакова структура сайту. Якщо кожна сторінка виглядатиме по різному, отримаємо сайт, у якому важко орієнтуватись. Крім цього, якщо виникне потреба зробити глобальні зміни на всьому сайті (наприклад, змінити заголовок), то доведеться міняти кожну сторінку.

Рішенням буде винести спільні елементи в окремий шаблон. Таким чином, шаблон HTML-сторінки будується в два кроки: спочатку формуємо дані моделі, після чого вставляємо її у загальний шаблон.

Реалізація[ред. | ред. код]

Нехай потрібно реалізувати web-аплікацію для блогу, яка складатиметься із сторінки перегляду усіх статей та детального перегляду однієї.

Приклад контенту списку статей.

<article-list>   @model Article[]    @for(var article in Model)   {     <h1>@article.Name</h1>     <p>@article.Description</p>   } </article-list> 

Приклад контенту перегляду однієї статті.

<article>   @model Article    <h1>@Model.Name</h1>   <p>@Model.Description</p>   <small>@Model.Author</small> </article> 

Тоді спільний шаблон, який визначатиме незмінні компоненти усіх сторінок, та відображатиме необхідний контент матиме наступний вигляд.

<!DOCTYPE HTML> <html>  <head>   <title>Блог</title>  </head>  <body>   <header>   Заголовок  </header>   <menu>    <li>Головна сторінка</li>    <li>Інформація</li>  </menu>   <aside>   Реклама  </aside>   // відображення динамічного контенту  <main>   @RenderBody();  </main>   <footer>   Copyright  </footer>   </body> </html> 

Див. також[ред. | ред. код]

Джерела[ред. | ред. код]