Om.next: Render recursive component

179 views
Skip to first unread message

Feifan Zhou

unread,
Feb 16, 2016, 2:40:03 AM2/16/16
to ClojureScript
Hello,
I have a a data structure that looks like this:

{:data "foo"
:children {
:data "bar"
:children {
:data "baz"}}}

I'd like to render it into components like this:

<Comp>
foo
<Comp>
bar
<Comp>
baz
</Comp>
</Comp>
</Comp>

Conceptually it makes sense to recurse over the data structure to generate the view, but AFAIK the Om.next component has to be turned into a factory (via a separate `def`) before it can be used in Comp's `render`. Since `def`s aren't hoisted, how would I go about referencing the factory in the `render`?

António Monteiro

unread,
Feb 16, 2016, 8:35:17 AM2/16/16
to ClojureScript

There are examples of recursive components in the Om repository. Here's the link: for the particular examples: https://github.com/omcljs/om/blob/master/src/devcards/om/devcards/core.cljs#L242-L408

I have also written 2 blog posts that cover recursive queries and components with Om Next. I hope you find them useful:
http://anmonteiro.com/2016/01/exploration-patterns-om-next-part-1/
http://anmonteiro.com/2016/01/exploration-patterns-om-next-part-2/

Feifan Zhou

unread,
Feb 16, 2016, 1:14:54 PM2/16/16
to ClojureScript
Thanks António! The key was actually just the `declare` form — I didn't realize it was possible to do forward declarations in Clojure.

What would be the advantage of destructuring the component into Composite/Component/Leaf vs having just one component that maps over its children recursively?

António Nuno Monteiro

unread,
Feb 16, 2016, 4:15:20 PM2/16/16
to clojur...@googlegroups.com
They are just different scenarios. In my simple examples I merely wanted to showcase the example of heterogeneous components, i.e. components which may not share the same query. In that case, different components and union recursion is the way to go.

-- 
Note that posts from new members are moderated - please be patient with your first post.
--- 
You received this message because you are subscribed to a topic in the Google Groups "ClojureScript" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/clojurescript/mIiQDPGl3zY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.

Reply all
Reply to author
Forward
0 new messages