Визуализация элемента таблицы с colspan в реагенте

Question

Я имею таблицу в реагенте и установил col-span заголовка таблицы = 2.

 (defn my-table []
  [:table.table.table-striped.table-bordered
   [:thead
    [:tr
     [:th "Col1"]
     [:th "Col2"]
     (doall (for [id @ids]
          ^{:key id}
          [:th {:data-id (id :id)
                :col-span "2"}
           (str (get id :name))]))]]
   [:tbody
    (doall (for [i (range (count @table-items))]
         (let [table-item (cursor table-items [i])]
           ^{:key i}
           [item-row table-item])))]])

Но в каждом ряду смотрите item-row ниже я перебираю структуру данных, чтобы получить данные для разделенного столбца в этой строке, и у меня возникают проблемы. Я могу получить данные для правильного отображения, если сделать

[:div [:td [:span (:id id)]]
             [:td [:span (:name id)]]]

который я знаю, является неправильным / недействительным HTML.

 (defn item-row [item]
    (fn []
      [:tr
       [:td [:span (:key1 @item)]]
       [:td [:span (:key2 @item)]]
       (doall (for [id @ids]
            ^{:key id}
            [[:td [:span (:x id)]]
             [:td [:span (:y id)]]]))]))

У кого-нибудь есть идеи о том, как сделать два :td элементы в цикле? Я думал, чтобы обернуть два :td элементы в векторе, и пусть реагент обрабатывает рендеринг разделенных столбцов.

 (doall (for [id @ids]
            ^{:key id}
            [[:td [:span (:x id)]]
             [:td [:span (:y id)]]])

Я также получаю следующую ошибку:core.cljs:4793 Uncaught Error: No item [:td "."] in vector of length 2 at Object.cljs$core$vector_index_out_of_bounds [as vector_index_out_of_bounds]

что связано с [:td [:span (:y id)]]

Answer 1

Вы можете воспользоваться тем фактом, что вы просто возвращаете данные, поэтому один из способов сделать это - просто создать начальное содержимое :tr вектор с этими первыми двумя столбцами, а затем добавить остальную часть :td элементы в использовании into, Вот пример, который, я думаю, решит вашу проблему:

cljs.user=> (def ids [{:x 1 :y 2} {:x 3 :y 4}])
#'cljs.user/ids
cljs.user=> (let [tr [:tr 
       #_=>           [:td "first col"]
       #_=>           [:td "second col"]]]
       #_=>   (reduce (fn [acc id]
       #_=>             (into acc
       #_=>                   [[:td [:span (:x id)]]
       #_=>                    [:td [:span (:y id)]]]))
       #_=>           tr
       #_=>           ids))
[:tr [:td "first col"] [:td "second col"] [:td [:span 1]] [:td [:span 2]] [:td [:span 3]] [:td [:span 4]]]
cljs.user=>