2.2 KiB
| title | sidebar_label |
|---|---|
| View | View |
Views are defined by using Hiccup syntax, itself a subset of EDN. This syntax is closely related to JSON, is based on pure data, and offers an expressive way of defining declarative interfaces.
The general format of a UI is [component properties & children], where :
- component is a symbol, one of Status components
- properties is an optional map (keyword-to-value) of component properties
- children is an optional sequence of the component definitions
Because components are built recursively, on top of other components, they are inherently composable and reusable.
Blocks
While powerful the Hiccup syntax is about describing static UIs. Blocks enhance it by providing dynamicity based on data content.
Let block
Let blocks are general blocks allowing views to access data (via lexical scoping).
Query
Let blocks enable access to data via Queries.
(let [value @queries/some-query]
;; value is available there
)
Destructuring
Let blocks also allow to destructure data (sequences and maps) to access nested information.
(let [{key :key} {:key "value"}]
;; key is available there with the value "value"
)
Sequential data structure
Extract seq elements by index
Elements can be ignored with _
:as symbol denotes the whole sequence
Examples
[[a _ c :as all] [1 2 3 4 5]]
;; a = 1
;; c = 3
;; all = [1 2 3 4 5]
Associative data structure
Extract map values by keys {a :a}
Optional values via [a 5]
No namespaced keyword support, no short syntax
Examples
[{a :a a :b [c 4] :c :all all} {:a 1 :b 2 :d 3}]
;; a = 1
;; b = 2
;; c = 4
;; all = {:a 1 :b 2 :d 3}
Nesting
Both structure type destrucuring can be combined
[{[a1 _ a3] :a {d :d #{f 7} :f [[_ g2] 8}] :b [_ e2] :e :all all}
{:a [1 2 3] :b {:d 4 :e [5 6] :g [9 10]}}]
;; a1 = 1
;; a3 = 3
;; d = 4
;; e2 = 5
;; f = 7
;; g2 = 10
;; all = {:a [1 2 3] :b {:d 4 :e [5 6] :g [9 10]}}
If/when blocks
If and when blocks will make their content available only if associated condition holds true.
(when condition?
[text {}
""])