2

私は再構成するのが初めてで、明らかなことを忘れていると思います。Web ページは正常に動作していますが、ラジオ ボタンをクリックしても更新されないようです。基本的に、私がやりたいことは、ラジオ ボタンがクリックされると、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)
4

1 に答える 1

3

この例を見てください。リフレーム アプリがどのように見えるかがわかります。

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

TL;DR

  • エラー 1: UI の更新は、試薬の原子/反応によってのみトリガーされます。原子ではない
  • エラー 2: form-2/form-3 の代わりに form-1 コンポーネントを使用しています
  • エラー 3: リスト項目にはキーを付ける必要があります
  • エラー 4:試薬コンポーネント()の代わりに使用しています[]
  • エラー 5: re-frame db の初期化がありません

リフレームのすべてのドキュメントを読む必要があると思います。リフレームのドキュメントは素晴らしく、何度も読む必要があります。

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 に答える