Skip to content

dom elements

jiyinyiyong edited this page Apr 4, 2020 · 11 revisions

DOM elements

An element is defined with create-element like:

(defmacro a [props & children]
  `(create-element :a ~props ~@children))

Where children comes with keys since Respo always need keys(in keyword, string, or number) to compare children:

[[1 (span {})
  2 (span {})]]

And an element created like:

(input
  {:placeholder "Pick a name, and hit Enter"
   :on-keydown (fn [e dispatch!])
   :style {:line-height 2
           :width "100%"}})

might be rendered to an element with events bound:

<input placeholder="Pick a name, and hit Enter"
       style="line-height:2;width:100%;">

Internally an element is stored with EDN like:

{:name tag-name,
 :coord nil,
 :attrs attrs,
 :style styles,
 :event event,
 :children children}

Some of the frequently used elements are defined in respo.core:

`(a body br button canvas code div footer
  h1 h2 head header html hr img input li link
  option p pre script section select span style textarea title
  ul)

Some are not, but you can create them very quickly with create-element.

Since meta is a Clojure function, meta' is used.

Clone this wiki locally