Problems getting recursive component working in Om?

Question

I have the following:

(ns commentz.client
    (:require
     [om.core :as om :include-macros true]
     [om.dom :as dom :include-macros true]
     [clojure.browser.repl]))

(def app-state
  (atom
   {:id "a"
    :value "I am the greatest of comments!"
    :user "1"
    :anonymous false
    :score 10
    :children
    [{:value "I am ok too."
      :user "1"
      :anonymous false
      :score 4
      :children
      [{:value "I am the second greatest comment"
        :user "2"
        :anonymous false
        :score 7
        :children {}}]}
     {:value "I like turtles"
          :user "3"
          :anonymous true
          :score -3
          :children {}}]}))

(defn header [app owner]
  (dom/div #js {:className "header"}
           (dom/div #js {:className "vote"}
                    (dom/div #js {:className "up"})
                    (dom/div #js {:className "down"}))
           (dom/a #js {:className "username" :href (:user app)} (:user-name app))
           (dom/div #js {:className "score"} (:score app))))

(defn footer [app owner]
  (dom/div #js {:className "footer"}
           (dom/a #js {:className "permalink" :href (str "#" (:id app))} "permalink")
           (dom/a #js {:className "reply"} "reply")))

(defn comment [app owner]
  (reify
    om/IRender
    (render [this]
      (dom/div {:id (:id app) :className "comment"}
               (header app owner)
               (dom/div #js {:className "value"} (:value app))
               (footer app owner)
               (om/build-all comment (:children app))))))

(om/root comment app-state {:target (. js/document (getElementById "app"))})

The above code does succesfully compile, but I am not seeing anything recursive. Instead, I am seeing the following when I inspect with a browser.

10 
I am the greatest of comments! 
permalink reply 
0 32374988

I think the 32374988 might be a object hash, not sure what the 0 is about. Anyway, my intent is too see all 4 comments show up, with some comment nested within others. At the moment I am getting only the root comment, plus some weird 0 32374988 where the recursively built comments should be. Any help is appreciated. Thank you.

Answer 1

(om/build-all) returns a seq. Try (apply dom/div nil ...).

(apply dom/div {:id (:id app) :className "comment"}
           (header app owner)
           (dom/div #js {:className "value"} (:value app))
           (footer app owner)
           (om/build-all comment (:children app))))))