網頁不更新

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：用戶界面更新將僅由試劑的原子/反應來觸發。不原子
• 錯誤2：使用形式-1成分代替形式-2 /形式-3
• 錯誤3：列表中的項目應鍵控
• 錯誤4：使用()代替[]用於試劑組分
• 錯誤5：沒有初始化重新幀分貝

我認爲你需要閱讀重新框架的所有文件，重新框架文件是偉大的，應該一次又一次地閱讀。

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)