Reputation: 48736
I am new to re-frame and I think I'm forgetting something obvious. My web page is coming up and working but doesn't seem to update when I click on a radio button. Basically, what I am wanting to do is when a radio button is clicked, it updates my value-name
atom to 2. Doing this should cause the page to refresh since the function display-val
is dependent on value-name
. However, nothing happens.
I have the feeling I should be subscribing to something so that display-val
knows to update.
Here is my code:
(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)
Upvotes: 2
Views: 446
Reputation: 571
Please have a look on this example, you will get an idea of how a re-frame app should look like.
https://day8.github.io/re-playground/?gist-id=saskali/1398f41345ea4df551b0c370ac1ac822
TL;DR
()
instead of []
for reagent componentI think you need to read all the documentation of re-frame, re-frame documentation is great and should be read again and again.
https://github.com/Day8/re-frame
Here is a simplest example for you to understand
(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)
Upvotes: 3