ウェブページが更新されていません

Question

私は新しいフレームに戻ってきました。私は何か明白なことを忘れています。私のウェブページは上ってきていますが、ラジオボタンをクリックしても更新されていないようです。基本的には、ラジオボタンをクリックすると、value-nameのアトムが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) 

Answer 1

この例で見てください、あなたは再フレームアプリがどのように見えるべきかのアイデアを得るでしょう。

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

TL; DR

• エラー1：UI更新のみ試薬の原子/反応によってトリガされます。ない原子
• エラー2：の代わりにフォーム1の成分を使用してフォーム-2 /フォーム3 3
• エラー：リスト項目をキー入力しなければならない
• エラー4：使用した試薬コンポーネントの代わり[]の()
• エラー5：再フレームDBの初期化なし

私はあなたが再フレームのすべてのドキュメントを読む必要があると思う、再フレームのドキュメントは素晴らしいですし、何度も読まれるべきです。あなたは `CFG/questions`がある

(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)