ckirkendall / kioo

Enlive/Enfocus style templating for Facebook's React and Om in ClojureScript.
Eclipse Public License 1.0
404 stars 39 forks source link

clone-for? #7

Open sritchie opened 10 years ago

sritchie commented 10 years ago

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.

ckirkendall commented 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

sritchie commented 10 years ago

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!

ckirkendall commented 10 years ago

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.

sritchie commented 10 years ago

Nice, thanks for the tips. I'll direct questions to CLJS.