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.
