3

以下の Om チュートリアル ページの例に示すように、リスト アイテムのレンダリングに 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対応する DOM 要素をレンダリングする React コンポーネントを生成する関数です。の最初の引数dom/ulは、DOM 要素に持たせたい属性を指定します。たとえばdom/ul、class 属性を「main」に設定する場合は、次のようにします。

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

の最初の引数に nil を渡すと、dom/ul単に DOM 属性が設定されません。

Clojureは、すべての引数 (引数の後に) を最後のリスト (map によって生成される) 引数の先頭に追加し、結果を引数として に渡すことによってapply呼び出します。dom/uldom/uldom/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。のようなコレクションを返す om/build-all で apply が使用されていることもわかりますmap。

dom/ulこれを拡張するもう 1 つの例です。2 つの を の中に入れたい場合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 に答える