Pug (Jade) - Database, Loop повторяющихся блоков | Wiki | PWODEV
, 08.11.2017 13:08

Pug (Jade) — Database, Loop повторяющихся блоков


Для того чтобы верстать повторяющиеся блоки с помощью Pug, раньше называвшийся Jade, не обязательно постоянно копировать повторяющийся блок, достаточно вывести этот блок в цикле «each val in array», а данные выводившиеся в этом блоке сохранить в условную базу данных Pug. В таком случае нам не прийдется добавлять наши изменения в верстке к каждому блоку, а всего лишь изменить один раз в цыкле, после чего наши изменения в коде добавятся ко всем блокам сразу. Так как же это сделать?

  1. Для начала создадим файлик базы данных. Назовем его db.pug.
  2. Поместим в этот файлик небольшой массив данных (Синтаксис такой же как у JSON)
    -
        var db_array = [
            {
                id: '1',
                title: 'The title 1',
                content: 'The content 1'
            },
            {
                id: '2',
                title: 'The title 2',
                content: 'The content 2'
            },
        ]
  3. Теперь заходим в файл где нам нужно вывести повторяющиеся блоки и добавляем там вывод этого массива:
    each val in db_array
        .array_item_block(id=val.id)
            .item_title!= val.title
            .item_content!= val.content
  4. Теперь в html варианте мы увидим следующее:
    <div class="array_item_block" id="1">
        <div class="item_title">The title 1</div>
        <div class="item_content">The content 1</div>
    </div>
    <div class="array_item_block" id="2">
        <div class="item_title">The title 2</div>
        <div class="item_content">The content 2</div>
    </div>

     


Добавить комментарий