Supporting macros for Reacl's DOM library .
Supporting macros for Reacl's DOM library .
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.
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.
(attributes? v)
Returns true if v
will be treated as an attribute map in the
first optional argument to the DOM-construction functions.
Returns true if `v` will be treated as an attribute map in the first optional argument to the DOM-construction functions.
(dom-node this binding)
Get the real DOM node associated with a binding.
Needs the component object.
Get the real DOM node associated with a binding. Needs the component object.
(keyed key dom)
Associate a key with a virtual DOM node.
Associate a key with a virtual DOM node.
(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
.
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`.
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close