Предупреждения
Доступ к реактивным переменным из кода Julia
При загрузке страницы создаются экземпляры реактивных переменных, помеченных как @in
или @out
, которые копируются в браузер. После этого будет происходить двухсторонняя (@in
) или односторонняя (@out
) синхронизация между переменной в коде Julia и ее копией в браузере.
Любые изменения реактивной переменной в коде Julia должны производиться в блоке @onchange
. Поэтому следующий код выдаст ошибку типа «неопределенная переменная»:
@app begin
@in N = 0
end
N += 1
Чтобы этот код заработал, переменная должна обновляться из реактивного обработчика следующим образом:
@app begin
@in N = 0
@in button_clicked = false
@onbutton button_clicked begin
N += 1
end
end
Интерполяция переменной
В реактивном приложении Genie интерполировать значение переменной можно с помощью $
или {{}}
. Например:
const name = "John"
@app begin
@out age = "65"
end
ui() = p("Hello $name, you are {{age}} years old")
Оператор $
представляет собой стандартную интерполяцию Julia, которая выполняется перед отправкой страницы в браузер. Поэтому интерполируемые переменные уже должны существовать в коде Julia.
В свою очередь, {{}}
интерполирует переменные в браузере. Поэтому для интерполяции переменной она должна быть доступна браузеру посредством @in
или @out
.
Строки кода в компонентах пользовательского интерфейса
Некоторые компоненты пользовательского интерфейса принимают в качестве аргументов строки с исполняемым кодом. Например:
btn("Click me", @click("clicked =! clicked; counter += 1"))
p("The counter is {{counter}}")
p("The counter+10 is {{counter + 10}}")
Любой код, переданный в компонент пользовательского интерфейса, выполняется в браузере. Поэтому это должен быть допустимый код JavaScript.
Индексация с отсчетом от нуля
Так как в JavaScript применяется индексация с отсчетом от 0, при использовании массивов Julia в пользовательском интерфейсе можно получить неожиданные результаты. Например, следующий код будет работать в браузере, но вызовет ошибку в бэкенде Julia:
@app begin
@out text = ["a", "b", "c"]
end
ui() = p("The first element is {{text[0]}}")