0

私はClojure/ClojurescriptとOmが初めてで、少し苦労した後、2次元ベクトルからテーブルをレンダリングするこの方法を思いつきました:

(def app-state (atom {:world [[1 2 1] [2 1 1] [1 2 1]]}))

(defn cell
  [text]
  (om/component
    (dom/td nil text)))

(defn row
  [data]
    (om/component
      (apply dom/tr nil
        (om/build-all cell data))))

(defn world-view
  [data owner]
    (om/component
      (apply dom/table nil
        (om/build-all row (:world data)))))

(om/root
  world-view
  app-state
  {:target (. js/document (getElementById "app"))})

これをより簡潔にする方法、または 1 つのコンポーネント関数からテーブル全体を作成する方法についての指針を探しています。

4

3 に答える 3

0

興味のない関数はいつでもラムダに置き換えることができます:

(defn world-view [data owner]
  (om/component
   (apply dom/table nil
          (om/build-all (fn [data]
                          (om/component
                           (apply dom/tr nil
                                  (om/build-all (fn [data]
                                                  (om/component
                                                   (dom/td nil data)))
                                                data))))
                        (:world data)))))

または、コンポーネント内でローカル名を付けます。

(defn world-view [data owner]
  (let [cell (fn [data]
               (om/component
                (dom/td nil data)))
        row (fn [data]
              (om/component
               (apply dom/tr nil (om/build-all cell data))))])
  (om/component
   (apply dom/table nil
          (om/build-all row
                        (:world data)))))
于 2015-08-04T01:37:43.367 に答える
0

以下の例を見つけてください。テーブル ヘッダーを追加する場合は、テーブル ヘッダーを含む uncommnet ヘッダー パーツを使用します。

(def app-state (atom {:world [[1 2 1] [2 1 1] [1 2 1]]}))

(defn world-view [{:keys [world]} owner]
  (reify
    om/IRender
    (render [this]
      (dom/div nil
        (dom/table nil
          #_(apply dom/thead nil
            (for [h (keys (first world))
                 :let [hs (str h)]]
             (dom/th nil hs)))
          (apply dom/tbody nil
              (for [r world]
            (apply dom/tr nil
               (for [c (vals r)
                     :let [cs (pr-str c)]]
                 (dom/td nil cs)))))))  )))

(om/root
  world-view
  @app-state
  {:target (. js/document (getElementById "app"))})
于 2014-05-21T14:18:54.953 に答える