4

I am attempting to learn Om, and have come across something I don't understand. I would expect this code 

(defn search-page-view [app owner]
(reify
    om/IRender
    (render [_]
      (dom/div #js {:id "search-block"}
                  "Test")
      (dom/div #js {:id "results-block"}
               "Test2"))))
(om/root
 search-page-view app-state
  {:target (. js/document (getElementById "app"))})

to result in this html:

<div id="app>
  <div id="search-block">
    Test
  </div>
  <div id="results-block">
    Test2
  </div>
</div>

However, it does not! The first div containing Test does not display. What am I misunderstanding?

Edit with the solution (pointed out by FakeRainBrigand):

Changing the code to 

(defn search-page-view [app owner]
  (reify
    om/IRender
    (render [_]
      (dom/div nil
               (dom/div #js {:id "search-block"}
                    "Test")
               (dom/div #js {:id "results-block"}
                    "Test2")))))

results in the expected html.

oneway
  • 753
  • 1
  • 5
  • 9
  • 3
    I'm not familiar with OM but the problem is most likely that you need to wrap those two divs in a div. It's a common problem with React with JSX, so it might apply here. – Brigand Jun 27 '14 at 10:36
  • That was exactly the problem. Thanks! – oneway Jun 27 '14 at 11:07
  • 1
    Yep as @FakeRainBrigand said. Remember that you're just calling functions for each dom element you represent. You can't do two function calls one after the other without some sort of joining json or concatenation or such in Javascript - so you can't in React. It means you need to make sure you're `render` method always returns a single element at it's root, containing the other elements you want. – Mike Driver Jun 27 '14 at 15:20

1 Answers1

2

As explained here and by FakeRainBrigand explained, your render function must return a single renderable.

Community
  • 1
  • 1
phtrivier
  • 13,047
  • 6
  • 48
  • 79