La page Web ne se met pas à jour

Question

Je suis nouveau pour re-frame et je pense que j'oublie quelque chose d'évident. Ma page Web arrive et fonctionne, mais ne semble pas mettre à jour lorsque je clique sur un bouton radio. Fondamentalement, ce que je veux faire est quand un bouton radio est cliqué, il met à jour mon atome value-name à 2. Cela devrait provoquer l'actualisation de la page puisque la fonction display-val dépend de value-name. Cependant, rien ne se passe.

J'ai le sentiment que je devrais être abonné à quelque chose que display-val sait mettre à jour.

Voici mon 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) 

Answer 1

S'il vous plaît jeter un oeil sur cet exemple, vous aurez une idée de la façon dont une application re-cadre devrait ressembler.

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

TL; DR

• erreur 1: la mise à jour de l'interface utilisateur ne sera déclenchée par un atome de réactif/réaction. pas un atome
• erreur 2: en utilisant le formulaire-1 composant au lieu de la forme-2/form-3
• erreur 3: liste des articles doivent être munis d'un détrompeur
• erreur 4: en utilisant () au lieu de [] pour le composant de réactif
• erreur 5: pas d'initialisation pour rebase db

Je pense que vous avez besoin de lire toute la documentation de re-frame, la documentation re-frame est super et devrait être lu encore et encore.

https://github.com/Day8/re-frame

Voici un exemple le plus simple pour vous de comprendre

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