2

我是重新设计的新手，我想我忘记了一些明显的事情。我的网页正在运行，但当我单击单选按钮时似乎没有更新。基本上，我想要做的是，当单击单选按钮时，它会将我的value-nameatom 更新为 2。这样做应该会导致页面刷新，因为该功能display-val依赖于value-name. 然而，什么也没有发生。

我觉得我应该订阅一些display-val知道更新的东西。

这是我的代码：

(def q-id (atom 0))
(def value-name (atom ""))
(def next-id (atom 0))

(defn create-answer
  "Creates a radio button answer"
  ([question-id answer value name event next-question-id class description]
   [:div {:class :control-container}
    [:div {:class :control-left}
     [:input {:type :radio :value value :name name :class class :data-next next-question-id :on-change (fn [e] (reset! value-name value) (reset! q-id question-id) (reset! next-id next-question-id) (re-frame/dispatch [event e]))}]]
    [:div {:class :control-right} answer]
    ; If there is no description, then do not render the "control-right-description" div
    (if-not (clojure.string/blank? description)
      [:div {:class :control-right-description} description])
    ])
  ([question-id answer value name event next-question-id class]
   (create-answer question-id answer value name event next-question-id class ""))
  )

(defn display-val
  [item]
  (if (or (= @next-id (get item :id)) (and (get item :first) (= @next-id 0))) "block" "none")
  )

(defn create-block
  "Renders a question and the possible answers"
  [item]
  (if (get item :first)
    [:div {:id (str "divQ" (get item :id)) :style {:display (display-val item)}}
     [:div
      [:p (get item :question)]
      (for [answer (get item :answers)]
        (create-answer (get item :id) (get answer :answer) (get answer :value) (get answer :name) (get answer :event) (get answer :nextQuestionId) (get answer :className) (get answer :description))
        )
      ]
     ]
    [:div {:id (str "divQ" (get item :id)) :style {:display (display-val item)}}
     [:div
      [:p (get item :question)]
      (for [answer (get item :answers)]
        (create-answer (get item :id) (get answer :answer) (get answer :value) (get answer :name) (get answer :event) (get answer :nextQuestionId) (get answer :className) (get answer :description))
        )
      ]
     ]
    )
  )

(defn render-questions
  "Renders the questions and answers, hiding all but the first question and answer set"
  []
  (for [item cfg/questions]
    (create-block item)
    )
  )

(defn main-panel []
  (let [name (re-frame/subscribe [:name])] 
    (fn []
      [:div

       ; Render the questions
       (render-questions)

       ]

      )))




(defn handle-buttons-part-one
  [db e]


  ;(js/alert @value-name)
  )
(re-frame/reg-event-db :buttons-part-one handle-buttons-part-one)
4

1 回答 1

3

请查看此示例，您将了解重新构建应用程序的外观。

https://day8.github.io/re-playground/?gist-id=saskali/1398f41345ea4df551b0c370ac1ac822

TL;博士

  • 错误 1：ui 更新只会由试剂的原子/反应触发。不是原子
  • 错误 2：使用 form-1 组件而不是 form-2/form-3
  • 错误 3：列表项应键入
  • 错误4：使用()代替[]试剂成分
  • 错误 5：没有对 re-frame db 进行初始化

我认为你需要阅读所有关于 re-frame 的文档，re-frame 文档很棒，应该一遍又一遍地阅读。

https://github.com/Day8/re-frame

这是一个最简单的例子让你理解

(ns simple.core
  (:require [reagent.core :as reagent]
            [re-frame.core :as rf]
            [clojure.string :as str]))

(rf/reg-event-db              ;; sets up initial application state
  :initialize                 
  (fn [_ _]  
    {:counter 0}))

(rf/reg-event-db 
  :counter-inc            
  (fn [db [_]]
    (update db :counter inc)))   ;; compute and return the new application state

(rf/reg-sub
  :counter
  (fn [db _]  
    (:counter db))) ;; return a query computation over the application state

(defn ui
  []
  [:div
   [:h1 "Hello world, it is now"]
   [:span @(rf/subscribe [:counter])]
   [:button {:on-click #(rf/dispatch [:counter-inc])}
     "inc"]])

(defn ^:export run
  []
  (rf/dispatch-sync [:initialize])     ;; puts a value into application state
  (reagent/render [ui]              ;; mount the application's ui into '<div id="app" />'
                  (js/document.getElementById "app")))

(run)
于 2017-10-05T15:42:49.097 回答