Clojurescript/Reagent中的两排循环表体

Question

我无法使用clojurescript /试剂让我的桌子正确排队.我实际上不确定这是不是我不明白在html中做什么或者是什么......

目前我使用循环显示表体

(defn table-body [list-of-maps] 
[:tbody
  (for [one-map list-of-maps]
     [:tbody
      [:tr
       [:td (:key1 one-map)]
       [:td (:key2 one-map)]
       [:td (:key3 one-map)]
       [:td (:key4 one-map)]
       [:td (:key5 one-map)]
       [:td (:key6 one-map)]
       [:td (:key7 one-map)]]
      [:tr
       [:td (:key8 one-map)]]])])

问题是我需要在for和for之外使用一些html元素进行分组,对吧？如果我在两者上都使用[:tbody],它会弄乱[:thead]部分的对齐.如果我使用除tbody之外的元素,那么它会产生各种其他问题.如果我删除for循环中的[:tbody]和最后一个[:tr],一切看起来都很好.

编辑:我目前已经解决了很多问题.我的应用程序ajax获取并解析与表相关的数据.在重新渲染时,表的格式变得混乱.

Edit2:我发现了这个问题.

(defn test-body [list-of-maps]
[:tbody
  (for [one-map @list-of-maps]
     [:tbody
      [:tr
       [:td (:key1 one-map)]
       [:td (:key2 one-map)]
       [:td (:key3 one-map)]
       [:td (:key4 one-map)]
       [:td (:key5 one-map)]
       [:td (:key6 one-map)]
       [:td (:key7 one-map)]]
      [:tr
       [:td (:key8 one-map)]]])])

(defn test-head []
  [:thead
   [:th "key1"]
   [:th "key2"]
   [:th "key3"]
   [:th "key4"]
   [:th "key5"]
   [:th "key6"]
   [:th "key7"]])

(defn test55 []
  (let [list-of-maps (reagent/atom [])]
    (js/setTimeout (fn [] (reset! list-of-maps '({:key1 "a1" :key2 "a2" :key3 "a3" :key4 "a4" :key5 "a5" :key6 "a6" :key7 "a7" :key8 "a8"} {:key1 "b1" :key2 "b2" :key3 "b3" :key4 "b4" :key5 "b5" :key6 "b6" :key7 "b7" :key8 "b8"}))) 3000)
    [:table
     [test-head]
     [test-body list-of-maps]]))

当map-of-maps重新呈现表的对齐时.

Answer 1

事实证明，这个问题可以通过将事物简单地视为向量来解决。您希望最终结果是什么样的向量？

[:tbody 
   [:tr 
      [:td "a1"] [:td "a2"] [:td "a3"] [:td "a4"] [:td "a5"] [:td "a6"] [:td "a7"]] 
   [:tr 
      [:td "a8"]] 
   [:tr 
      [:td "b1"] [:td "b2"] [:td "b3"] [:td "b4"] [:td "b5"] [:td "b6"] [:td "b7"]] 
   [:tr 
      [:td "b8"]]]

因此，以此为目标，我们开始让 body 函数创建它。

(defn test-body [list-of-maps]
  (into [] (concat [:tbody] (apply concat (for [one-map @list-of-maps]
                                            [
                                             [:tr
                                              [:td (:key1 one-map)]
                                              [:td (:key2 one-map)]
                                              [:td (:key3 one-map)]
                                              [:td (:key4 one-map)]
                                              [:td (:key5 one-map)]
                                              [:td (:key6 one-map)]
                                              [:td (:key7 one-map)]]
                                             [:tr
                                              [:td (:key8 one-map)]]])))))

这是我的解决方案。可能还有更好的。