0.4.3 docs





    Mar 20, 2015

    Hostel Rocket
    Durham NC


    Index of all namespaces

    The README below is fetched from the published project artifact. Some relative links may be broken.


    Aspis is available from Clojars. Add the following dependency to your project.clj:

    Clojars Project


    There are a few non-standard properties supported by Aspis.

    For example:

    (a-component :styles [{:color "red"} {:backgroundColor "green"}])
    (a-component :style {:color "red" :backgroundColor "green"})
    (a-component :css {:color "red" :backgroundColor "green"})

    in all three cases, the style information can be retrieved as this/ in the render method of a-component.

    The same is true of the class:

    (a-component :classes ["a" "b"])
    (a-component :class "a b")
    (a-component :className "a b")

    in all three cases, the class can be retrieved from this/props.className in ther render method of a-component.

    Destructuring props

    You can bind property names locally by providing a map destructuring form to defelem. The :or key will be converted to React’s getDefaultProps function. The :as key will bind to the this.props Javascript object.

    Furthermore, these bindings will be available in any other functions present in the defelem besides the render function.

    (aspis.core/defelem my-component 
                        {:keys [message] :or {message "Nothing to say"}}
        (h1 message))

    Extending props

    Additional properties may be added onto an element via aspis.core/with-props.

    (aspis.core/with-props (a/div "Hello") {:color "red"})


    To better support ClojureScript’s idioms for state management, Aspis will automatically re-render any component when an atom its :render method depends on changes. It does this by scanning the :render method for calls to deref (a.k.a @) and adding watches to those atoms on mount.

    For instance,

     (aspis.core/defelem my-component
        (button :onClick 
                (fn [event]
                    (.preventDefault event)
                    (swap! counter inc))
                (str "You have clicked " @counter " times")))

    will re-render every time the counter atom changes value. In this case, the atom is changed from within the component, but that is not essential. External changes to counter will still cause my-component to re-render (via .forceUpdate).

    Atoms in props or state which are deref’d in render will also trigger updates.