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.
(camelize s)
Camelcases a hyphenated string, for example:
(camelize "background-color") < "backgroundColor"
Camelcases a hyphenated string, for example: > (camelize "background-color") < "backgroundColor"
(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
.
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`.
(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.
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.
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.
(-get-dom thing)
(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 reacl2.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 `reacl2.dom`.
(make-dom-binding n literally?)
Make an empty DOM binding from a ref name.
If literally?
is not true, gensym the name.
Make an empty DOM binding from a ref name. If `literally?` is not true, gensym the name.
(reacl->react-style-name reacl-name)
Convert Reacl style name (keyword) to React name (string).
Convert Reacl style name (keyword) to React name (string).
Cache for style names encountered.
Cache for style names encountered.
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close