Директивы компонентов

Директива в контексте веб-разработки и таких фреймворков, как Vue.js, Angular и им подобных, представляет собой специальный токен в разметке, который предписывает библиотеке или фреймворку выполнить какое-либо действие с элементом на странице. Директивы — это расширенные атрибуты HTML с префиксом в виде специального символа или ключевого слова. Например, это могут быть символы v- для Vue.js или ng- для Angular. Директивы применяют реактивное поведение к DOM или даже могут преобразовывать элемент DOM и его дочерние элементы.

Директивы Vue.js — это параметры типа v-, например v-if или v-on. В Stipple они реализуются посредством макросов @click, @on, @iif, @els, @elsiif, @recur, @text, @bind, @data и @showif. Каждый макрос дает возможность производить операции с компонентом в коде пользовательского интерфейса путем формирования эквивалентного кода HTML, например:

julia> span(@showif(true))
"<span v-show=\"true\"></span>"

julia> span(@click(:mybutton))
"<span v-on:click=\"mybutton = true\"></span>"

julia> span(@click("process = !process"))
"<span v-on:click=\"process = !process\"></span>"

Обратите внимание: если директива принимает строковый аргумент, его содержимое должно представлять собой допустимый код JavaScript.

Создание компонентов в цикле с помощью `@recur`

Макрос @recur позволяет создавать компоненты пользовательского интерфейса путем перебора списка. Он добавляет цикл for, который перебирает указанный список. В каждой итерации вложенные компоненты оцениваются с использованием текущего значения переменной цикла.

module App
using GenieFramework
@genietools

@app begin
    @out messages = ["msg1", "msg2", "msg3"]
end

function ui()
    row([card(style="margin: 10px;", @recur("msg in messages"), [
        p("{{msg}}")
    ]),])
end
@page("/", ui)
end

В этом примере макрос @recur используется для перебора списка messages. Для каждого сообщения в списке создается компонент абзаца (p) с содержимым сообщения. В результате получается ряд карточек, каждая из которых содержит абзац с одним из сообщений.

Макрос @recur особенно полезен, когда нужно создать большое количество похожих компонентов на основе списка данных. Он позволяет избежать повторяющегося кода и делает приложение более удобным в обслуживании и масштабируемым.

Условное отображение с помощью `@showif`

Макрос @showif служит для условного отображения элементов пользовательского интерфейса в зависимости от состояния реактивной переменной. Его можно использовать с кнопкой для отображения или скрытия элемента в пользовательском интерфейсе:

@app begin
    @in show_element = false
end

function ui()
    [
        btn("Toggle Element", @click("show_element =! show_element")),
        div("This is a hidden element", @showif("show_element"))
    ]
end

В этом примере при нажатии кнопки Toggle Element (Переключить элемент) меняется состояние реактивной переменной show_element, что, в свою очередь, изменяет видимость элемента div. Когда show_element имеет значение true, элемент div отображается, а когда show_element имеет значение false, он скрывается.