reacl.dom
Convenience API for constructing virtual DOM.
This has ClojureScript wrappers for the various HTML elements.
These all expect attributes as a ClojureScript map.
Moreover, sub-element sequences need to be ClojureScript sequences of objects constructed using `keyed-dom’.
Moreover, the `letdom’ form constructing virtual DOM elements for easy reference in an event handler.
a
abbr
address
area
article
aside
audio
b
base
bdi
bdo
big
blockquote
body
br
button
camelize
(camelize s)Camelcases a hyphenated string, for example:
(camelize “background-color”) < “backgroundColor”
camelize-style-name
(camelize-style-name s)Camelcases a hyphenated CSS property name, for example:
(camelize-style-name “background-color”) < “backgroundColor” (camelize-style-name “-moz-transition”) < “MozTransition” (camelize-style-name “-ms-transition”) < “msTransition”
As Andi Smith suggests (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an -ms prefix is converted to lowercase ms.
canvas
caption
circle
cite
code
col
colgroup
data
datalist
dd
del
details
dfn
div
dl
dom-node
(dom-node this binding)Get the real DOM node associated with a binding.
Needs the component object.
dt
ellipse
em
embed
fieldset
figcaption
figure
form
h1
h2
h3
h4
h5
h6
HasDom
protocol
General protocol for objects that contain or map to a virtual DOM object.
This is needed for letdom, which wraps the DOM nodes on its right-hand sides.
members
-get-dom
(-get-dom thing)head
header
hr
html
i
iframe
img
input
ins
kbd
keyed
(keyed key dom)Associate a key with a virtual DOM node.
keygen
label
legend
letdom
macro
(letdom clauses body0 & bodies)Bind DOM nodes to names for use in event handlers.
This should be used together with reacl.core/class or reacl.core/defclass.
Its syntax is like let, but all right-hand sides must evaluate to virtual DOM nodes - typically input elements.
The objects can be used with the dom-node function, which returns the corresponding real DOM node.
Example:
(reacl.core/defclass search-bar
app-state [filter-text in-stock-only on-user-input]
render
(fn [& {:keys [dom-node]}]
(dom/letdom
[textbox (dom/input
{:type "text"
:placeholder "Search..."
:value filter-text
:onChange (fn [e]
(on-user-input
(.-value (dom-node textbox))
(.-checked (dom-node checkbox))))})
checkbox (dom/input
{:type "checkbox"
:value in-stock-only
:onChange (fn [e]
(on-user-input
(.-value (dom-node textbox))
(.-checked (dom-node checkbox))))})]
(dom/form
textbox
(dom/p
checkbox
"Only show products in stock")))))
Note that the resulting DOM-node objects need to be used together with the other DOM wrappers in reacl.dom.
letdom
macro
(letdom clauses body0 & bodies)Bind DOM nodes to names for use in event handlers.
This should be used together with reacl.core/class or reacl.core/defclass.
Its syntax is like let, but all right-hand sides must evaluate to virtual DOM nodes - typically input elements.
The objects can be used with the dom-node function, which returns the corresponding real DOM node.
Example:
(reacl.core/defclass search-bar
app-state [filter-text in-stock-only on-user-input]
render
(fn [& {:keys [dom-node]}]
(dom/letdom
[textbox (dom/input
{:type "text"
:placeholder "Search..."
:value filter-text
:onChange (fn [e]
(on-user-input
(.-value (dom-node textbox))
(.-checked (dom-node checkbox))))})
checkbox (dom/input
{:type "checkbox"
:value in-stock-only
:onChange (fn [e]
(on-user-input
(.-value (dom-node textbox))
(.-checked (dom-node checkbox))))})]
(dom/form
textbox
(dom/p
checkbox
"Only show products in stock")))))
Note that the resulting DOM-node objects need to be used together with the other DOM wrappers in reacl.dom.
li
line
link
main
make-dom-binding
(make-dom-binding n literally?)Make an empty DOM binding from a ref name.
If literally? is not true, gensym the name.
map
mark
meta
meter
noscript
object
ol
optgroup
option
output
p
param
path
polygon
polyline
pre
progress
q
reacl->react-attribute-names
reacl->react-style-name
(reacl->react-style-name reacl-name)Convert Reacl style name (keyword) to React name (string).
reacl->style-names
Cache for style names encountered.