DD's solution should do the trick. You should also look at Om's example of
using multiple roots incase you need to go down that approach:
https://github.com/swannodette/om/blob/master/examples/multiroot/src/core.cljs
On Thursday, July 10, 2014 5:34:37 AM UTC+1, David Della Costa wrote:
> Oh, you shouldn't need that (apply ...) in there before the dom/div
>
> call, sorry. Otherwise I think it should work.
>
>
>
> (2014/07/10 13:30), Dave Della Costa wrote:
>
> > Hi Makoto,
>
> >
>
> > Try wrapping them all in a single component, like so:
>
> >
>
> > (defn wrapper
>
> > [app owner]
>
> > (om/component
>
> > (apply dom/div nil
>
> > (om/build menu-table-header app)
>
> > (om/build menu-table app)
>
> > (om/build menu-table-button app))))
>
> >
>
> > Haven't tested the above, but something like that...
>
> >
>
> > DD
>
> >
>
> > (2014/07/10 13:18), Makoto H. wrote:
>
> >> HI,
>
> >>
>
> >> I have written some components using OM. I would like to these components
>
> >> on the same web page as follows:
>
> >>
>
> >> 1. menu-table-header
>
> >> 2. menu-table
>
> >> 3. menu-table-button
>
> >>
>
> >> The following is my prototype code. In my om/root can display only one
> >> component and I am looking for how can I show multple om components.
>
> >>
>
> >> (def app-state
>
> >> (atom
>
> >> {:menus
>
> >> [
>
> >> {:name "menu1" :kind "category1"}
>
> >> {:name "menu2" :kind "category2"}
>
> >> {:name "menu3" :kind "category3"}
>
> >> {:name "menu4" :kind "category2"}
>
> >> ]
>
> >> }))
>
> >>
>
> >> (defn menu-table-header
>
> >> [app owner]
>
> >> (reify
>
> >> om/IRender
>
> >> (render [this]
>
> >> (dom/div
>
> >> nil
>
> >> (dom/ul #js {:className "nav-tabs nav"}
>
> >> (dom/li #js {:className "active"}
>
> >> (dom/a #js {:href "#"} "menu1")
>
> >> )
>
> >> (dom/li nil
>
> >> (dom/a #js {:href "#"} "menu2")
>
> >> )
>
> >> (dom/li nil
>
> >> (dom/a #js {:href "#"} "menu3")
>
> >> )
>
> >> )
>
> >> (dom/h2 #js {:className "text-center"} "mwnu4"
>
> >> )
>
> >> )
>
> >> )))
>
> >>
>
> >> (defn menu-row
>
> >> [app owner]
>
> >> (reify
>
> >> om/IRender
>
> >> (render [this]
>
> >> (dom/tr nil
>
> >> (dom/td nil (:name app))
>
> >> (dom/td nil (:kind app))
>
> >> )
>
> >> )
>
> >>
>
> >> )
>
> >> )
>
> >>
>
> >> (defn menu-table
>
> >> [app owner]
>
> >> (reify
>
> >> om/IRender
>
> >> (render [this]
>
> >> (dom/div
>
> >> nil
>
> >> (dom/table
>
> >> #js {:className "table table-striped"}
>
> >> (dom/thead nil
>
> >> (dom/tr nil
>
> >> (dom/th nil "menu")
>
> >> (dom/th nil "category")
>
> >> ))
>
> >> (apply dom/tbody
>
> >> nil
>
> >> (om/build-all menu-row (:menus app))
>
> >> ))))))
>
> >>
>
> >>
>
> >> (defn menu-table-button
>
> >> [app owner]
>
> >> (reify
>
> >> om/IRender
>
> >> (render [this]
>
> >> (dom/div
>
> >> #js {:className "input-append"}
>
> >> (dom/button {:className "btn btn-lg" :typw "button"} "register")
>
> >> (dom/button {:className "btn btn-lg" :typw "button"} "change")
>
> >> (dom/button {:className "btn btn-lg" :typw "button"} "delete")
>
> >> (dom/button {:className "btn btn-lg" :typw "button"} "copy")
>
> >>
>
> >> )
>
> >> )))
>
> >>
>
> >>
>
> >> (om/root
>
> >> menu-table
>
> >> app-state
>
> >> {:target (. js/document (getElementById "app"))})
>
> >>
>
> >> Thanks,
>
> >> Makoto
>
> >>
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/clojurescript.
