3

我正在努力理解 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元素？
  • apply 如何处理此示例中发送的所有参数？
4

2 回答 2

2

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

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

将 nil 传递给 的第一个参数dom/ul只是不设置 DOM 属性。

Clojureapply通过dom/ul将所有参数（在dom/ul参数之后）添加到最终列表（由 map 生成）参数并将结果作为参数传递给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>
于 2015-05-16T07:51:17.360 回答
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"))

如果没有 apply，我们不会将正确的参数传递给dom/ul. 您还将看到 apply 与 om/build-all 一起使用，它返回一个像map.

再举一个例子来扩展它，如果我们想把两个dom/ul's 放在 a 里面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")))
于 2015-05-16T08:35:02.510 回答