Om如何呈现list对象？

Question

我很难理解om如何使用apply来呈现列表项，如下面从Om教程页面获取的示例所示。

(om/root
  (fn [data owner]
    (om/component 
      (apply dom/ul nil
        (map (fn [text] (dom/li nil text)) (:list data)))))
  app-state
  {:target (. js/document (getElementById "app0"))})

我对apply的理解是，它接受一个函数和一个项目列表，并将该函数应用到列表中。但在本例中，这种理解将转化为将dom/ul应用于nil。

我不明白的是：

• 为什么我要将dom/ul应用到列表中，我不想创建ul元素，而是要创建li元素？
• 如何应用此示例中发送的所有参数？

Answer 1

dom/ul是一个函数，它生成一个function组件，它将呈现相应的DOM元素。dom/ul的第一个参数指定您希望DOM元素具有的属性。例如，如果希望dom/ul将类属性设置为"main"，可以执行以下操作：

  (apply dom/ul #js {:className "main"}
    (map (fn [text] (dom/li nil text)) (:list data)))

将零传递给dom/ul的第一个参数，只需设置任何DOM属性。

Clojure apply通过将所有参数(在dom/ul参数之后)先于最终列表(由地图生成)参数并将结果作为参数传递给dom/ul来调用dom/ul。

例如，假设数据具有以下值：

["Apple" "Bird"] 

然后，您的示例中的dom/ul最终将被调用为：

(dom/ul nil
    (dom/li nil "Apple")
    (dom/li nil "Bird"))

这将导致呈现以下HTML：

<ul>
  <li>Apple</li>
  <li>Bird</li>
</ul>

Answer 2

当我第一次开始学习Om时，我花了一段时间才明白。需要记住的关键是，每个om.dom函数都接受一个JS属性映射作为它的第一个参数，然后再使用任意数量的om.dom参数。正如我所期望的那样，om.dom函数将接受属性和dom元素的向量。一旦这个点击，很多Om的设计对我来说更有意义。

Clojure的apply“解包装”一个集合，并将集合的元素作为参数传递给要应用的函数。因此，我们计算的中间步骤是：

(apply dom/ul nil
    (map (fn [text] (dom/li nil text)) (:list data)))

然后

(apply dom/ul nil
    '((dom/li nil "Hi") (dom/li nil "there")))

然后

(dom/ul nil
    (dom/li nil "Hi") (dom/li nil "there"))

如果没有应用程序，我们就不会将正确的参数传递给dom/ul。您还将看到与om/build一起使用的apply，它返回类似于map的集合。

再举一个例子来扩展这一点，如果我们想将两个dom/ul放在一个dom/p中，它将以扩展的形式出现：

(dom/p nil
    (dom/ul nil (dom/li nil "Hi") (dom/li nil "there"))
    (dom/ul nil (dom/li nil "Next") (dom/li nil "list")))