注意事项

作为一个网络开发框架，Genie 有一些特异功能，在开发反应式应用程序时必须牢记。本页列出了一些最常见的注意事项以及如何避免它们。

从 Julia 代码访问反应变量

页面加载时，带有`@in` 或`@out` 标记的反应式变量会被实例化并复制到浏览器中。然后，Julia 代码中的变量和浏览器中的副本之间将进行双向（@in ）或单向（@out ）同步。

对 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]}}")