Невозможно отобразить два компонента в OM

Я пытаюсь выучить Ом и наткнулся на то, чего не понимаю. Я бы ожидал этот код

(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"))})

чтобы получить этот html:

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

Однако это не так! Первый div, содержащий тест, не отображается. Что я неправильно понимаю?

Отредактируйте решение (указано FakeRainBrigand):

Изменение кода на

(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")))))

приводит к ожидаемому HTML.


person oneway    schedule 27.06.2014    source источник
comment
Я не знаком с OM, но проблема, скорее всего, в том, что вам нужно обернуть эти два div в div. Это обычная проблема React с JSX, поэтому она может применяться здесь.   -  person Brigand    schedule 27.06.2014
comment
Именно в этом была проблема. Спасибо!   -  person oneway    schedule 27.06.2014
comment
Да, как сказал @FakeRainBrigand. Помните, что вы просто вызываете функции для каждого элемента dom, который вы представляете. Вы не можете выполнять два вызова функций один за другим без какого-либо объединения json или конкатенации или чего-то подобного в Javascript, поэтому вы не можете в React. Это означает, что вам нужно убедиться, что ваш метод render всегда возвращает один элемент в своем корне, содержащий другие элементы, которые вы хотите.   -  person Mike Driver    schedule 27.06.2014


Ответы (1)


Как объяснено здесь и объяснил FakeRainBrigand, ваша функция рендеринга должна возвращать один объект рендеринга.

person phtrivier    schedule 09.07.2014