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

Двокрокова шаблонізація (англ. 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>

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

HTML

Джерела ред.

Two Step View [Архівовано 30 вересня 2020 у Wayback Machine.]