Question

我是Clojure / Clojurescript和Om的新手，在经过一番努力之后，我想出了这样一种方法来渲染一个二维矢量表：

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

我正在寻找关于如何使其更简洁或如何从一个组件函数创建整个表的指针。

Answer 1

在下面找到示例。如果要添加带有表头的表头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"))})

Answer 2

您始终可以使用lambda替换不感兴趣的函数：

val create : () => NoNumber = () => new NoNumber()

或者在组件中给他们一个本地名称：

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

Answer 3

你在使用atom作为参数时缺少deref（@）吗？在clojure中非常常见的错误。

你有：

（OM /根世界观应用程序状态 {：target（.js / document（getElementById＆＃34; app＆＃34;））}）

建议的解决方案：

（OM /根世界观 @应用程序状态 {：target（.js / document（getElementById＆＃34; app＆＃34;））}）

clojurescript om - 从2d向量渲染表的更好方法

3 个答案: