Open sritchie opened 10 years ago
There are some challenges to doing clone-for that I haven't found solutions for yet. I have some ideas that are similar to how Christophe is handling dup in enliven. Right now there is a fairly simple way to get around the need for clone-for with the definition of another component.
(defn my-nav-item [[caption func]]
(kioo/component "main.html" [:header [:ul first-child]]
{[:a] (do-> (content caption)
(set-attr :onClick func))}))
(defn my-header [heading nav-elms]
(kioo/component "main.html" [:header]
{[:h1] (content heading)
[:ul] (content (map my-nav-item nav-elms))}))
Versus:
(defn my-header [heading nav-elms]
(kioo/component "main.html" [:header]
{[:h1] (content heading)
[:ul first-child] (clone-for [elm namv-elms]
{[:a] (do-> (content caption)
(set-attr :onClick func))})}))
CK
Gotcha, awesome. Another question I had (not sure if this is the place for it) - is there a good pattern for returning a (dom/*) call from inside kioo (instead of kioo/content, for example). Sometimes I have a really simple component at the bottom that I want to include within a larger template, and playing around I haven't been able to just insert (dom/p nil "Hi!")
directly.
That MAY just be that my repl environment is hosed, of course. Is this the right way?
Thanks so much for the library!
Yes there is a very simple way to do this. The html helper function and html-content transform actually uses sablono behind the scenes to create react nodes from hiccup syntax.
(def simple-component (html [:p "HI!"]))
or inside another component
(def component
(kioo/component "/path/to/file" [:selector]
{[:h1] (html-content "<p>Hi!</p>")
[:h2] (content (html [:p "Hi!"])})
It might be better to ask these types of question on ClojureScript user group or on the Enfocus users group. I watch both of them. I am sure others have the same question.
Nice, thanks for the tips. I'll direct questions to CLJS.
is there an equivalent to enlive's clone-for in the API? I'd love to add this, or see best practices about how to get around it.