网页不更新

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)