試劑中的互動列表

我想要創建一個默認隱藏的HTML元素（包括查詢結果）的列表，但用戶可以切換該狀態。我已經嘗試了幾種不同的方式作爲玩具的例子，但不能讓任何工作。試劑中的互動列表

該代碼正確地創建了三個按鈕，這些按鈕正確地更改了exps狀態，但它們從未隱藏內容。

(:require [reagent.core :as r]) 
(def exps (r/atom [true true true])) 
(defn like-component [] 
    [:div 
    (for [ [i r] (map-indexed vector ["A" "B" "C"])] 
    [:div 
     [:button {:on-click #(swap! exps update-in [i] not)}] 
     (when (nth @exps i) 
      [:pre (str i r)])])]) 

(r/render [like-component] 
     (js/document.getElementById "app"))

另一方面，下面的代碼將只創建一個元素，但它會正常工作。

(defn expandable-view [e bool] 
    (let [expanded (r/atom bool)] 
      (fn [] 
      [:li 
      [:div.expandable 
       [:div.header {:on-click #(swap! expanded not)} 
       "Click me to expand and collapse"] 
       (if @expanded 
       [:div.body (allow-html :pre e)])]]))) 


(defn like-component [] 
    [:ul 
    (vec 
     (for [ e ["A" "B" "C"]] 
     (expandable-view e true))) ]) 

(r/render [like-component] 
      (js/document.getElementById "app"))

編輯：可能有關： https://github.com/reagent-project/reagent/wiki/Beware-Event-Handlers-Returning-False

來源

2015-10-01 wovenhead

for很懶，所以reagent不能告訴你在第一個代碼段提領exps。

我們可以通過顯式解析引用原子來解決它。

(defn like-component [] 
    (apply str @exps) ;; because @exps is a vector, and reagent 
        ;; treat vectors as hiccup component 
        ;; we can't just put `@exps` here. 
    [:div 
    (for [ [i r] (map-indexed vector ["A" "B" "C"])] 
    [:div 
     [:button {:on-click #(swap! exps update-in [i] not)}] 
     (when (nth @exps i) 
      [:pre (str i r)])])])

或者只是包裝在doall懶惰序列。

(defn like-component [] 
    [:div 
    (doall (for [ [i r] (map-indexed vector ["A" "B" "C"])] 
    [:div 
     [:button {:on-click #(swap! exps update-in [i] not)}] 
     (when (nth @exps i) 
      [:pre (str i r)])]))])

FYI，related discussions。

任何想法爲什麼我發佈的第二個塊只創建一個元素？

向量是試劑的特殊公民，它們被視爲呃逆/ React組件。

對於一個工作示例

(defn like-component [] 
    [:ul 
    (doall 
     (for [ e ["A" "B" "C"]] 
     [expandable-view e true]))])

還要注意，我們使用[expandable-view e true]正確構建試劑組分。欲瞭解更多信息，我強烈建議您閱讀Using [] instead of()和Creating Reagent Components。

來源

2015-10-03 02:42:38 curist

是的，懶惰再次襲擊！確實有關於這個打印到我的JavaScript控制檯的警告 - 但我錯過了一些獨特的關鍵錯誤（這也很容易修復）之間。我只是簡單地將第一個示例包裝在'doall'中，不知道爲什麼我發佈的第二個塊只創建一個元素？ – wovenhead

我通過使用bootstrap實現了這種類型的行爲。我有一個狀態原子中的記錄列表，它們都是哈希映射。我爲每個映射添加一個可見鍵，用於在記錄上設置適當的引導類。有一個函數可以切換has映射中的可見設置。該組件使用一個按鈕來呈現記錄，該按鈕通過更改地圖中的可見值來切換可見性，從而導致組件重新呈現。

(defn toggle-visibility [k h] 
    (let [new-v (if (= "show" (:visible h)) 
      "hidden" 
      "show")] 
    (state/set-value-in! [(state/this-page) :host-list k :visible] new-v))) 

(defn host-component [k] 
    (let [host (state/value-in [(state/this-page) :host-list k])] 
    ^{:key k} [:div.panel.panel-default 
       [:div {:class "panel-heading show"} 
       [:div {:class (condp = (:status host) 
           "Active" "text-success" 
           "Inactive" "text-info" 
           "Unknown" "text-warning" 
           :else "text-danger")} 
       [:button {:type "button" :class "btn btn-default" 
          :aria-label "Expand" 
          :on-click #(toggle-visibility k host)} 
        [:span {:class (str "glyphicon " 
             (if (= "show" (:visible host)) 
             "glyphicon-minus" 
             "glyphicon-plus"))}]] 
       [:strong " IPv4 Address: "] (:ipv4 host) 
       [:strong " Hostname: "] (:hostname host) 
       [:div.pull-right (str "Host ID: " (:host-id host))]]] 
       [:div {:class (str "panel-body " (:visible host))} 
       [:ul.list-group 
       [:li.list-group-item 
        [:strong "Host Status: "] (:status host)] 
       [:li.list-group-item 
        [:strong "MAC Address: "] (:mac host)] 
       [:li.list-group-item 
        [:strong "IPv6 Address: "] (:ipv6 host)] 
       [:li.list-group-item 
        [:strong "Operating System: "] (:os host)] 
       [:li.list-group-item 
        [:strong "DHCP Client: "] (:dhcp host) 
        [:strong " DNS Entry: "] (:dns host) 
        [:strong " Revers DNS Entry: "] (:reverse-dns host)] 
       [:li.list-group-item 
       [:strong "Host Type: "] (:host-type host)] 
       [:li.list-group-item 
        [:strong "Network Group: "] 
        (str (:network-group host) "/" (:subgroup-name host))] 
       [:li.list-group-item 
        [:strong "Managed By: "] (:management-group host)] 
       [:li.list-group-item 
        [:strong "Creation Date: "] (:created-dt host)] 
       [:li.list-group-item 
        [:strong "Last Modified Date: "] (:last-modified-dt host)] 
       [:li.list-group-item 
        [:strong "Last Seen Date: "] (:last-seen-dt host)]]]]))

本質上，讓引導程序處理內容的顯示/隱藏，只留下代碼切換可見/不可見狀態。完整的代碼是在我的github頁面theophilusx/Arcis

來源

2015-10-03 08:03:33

試劑中的互動列表

回答

相關問題