微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Clojurescript 重新框架订阅不起作用

如何解决Clojurescript 重新框架订阅不起作用

作为 Clojure 的新手,我正在尝试我的第一个重新构建应用程序。它是一个包含部分的向导。每个部分都可以包含一个或多个组件。每个组件都可以是文本块、数字输入、...

但是如果我在 REPL 中更改组件的值,通过分派 set-component-value 事件,html 不会重新呈现以显示更新的值。但是我确实在 re-frisk 调试器中看到数据库被更新了。

(re-frame/dispatch [:wiz-ev/set-component-value 0 0  "TEST"])

我可能犯了一些初学者的错误,但我看不出问题出在哪里。

以下是重现问题的精简版本(编译)。

(ns wizard.core
  (:require
   [reagent.dom :as rdom]
   [day8.re-frame.tracing :refer-macros [fn-traced]]
   [re-frame.core :as re-frame]
   ))
;;
;; config
;;
(def debug?
  ^boolean goog.DEBUG)

;;
;; DB
;;

(def default-db
  {:wizard-config {
                   :title "title of wizard"
                   :sections[{:title "first section"
                              :components [{:title "first comp"}]}
                             {:title "second section"
                              :components[{:title "comp A"} {:title "comp B"}{:title "comp C"}]}

                             ]
                   }
   })

(defn create-empty-section-data
  "create a vector as placeholder for component data.  For each component we add a nil"
  [section]
  (reduce #(conj %1 nil) [] (:components section)));;

(defn add-wizard-data [db]
  "add a vector :wizard-data in db. For each section a new vector end for each component a nil in the vector"
  (let [sections (get-in db [:wizard-config :sections])
        data (reduce #(conj %1 (create-empty-section-data %2)) [] sections)]
    (assoc db :wizard-data data) ))

;;
;; events
;;
(re-frame/reg-event-db
  :wiz-ev/initialize-db
  (fn-traced [_ _]
    ( add-wizard-data default-db)))

(re-frame/reg-event-db
  :wiz-ev/set-component-value
  (fn-traced [db [_ section-number component-number new-value]]
             (let [old-wiz-data (:wizard-data db)
                   new-wiz-data (assoc-in old-wiz-data [section-number component-number] new-value)]
               (js/console.log "---:wiz-ev/set-component-value-------------------------------")
               (js/console.log new-value)
               (assoc db :wizard-data new-wiz-data))))
;;
;; subs
;;
(re-frame/reg-sub
 :wiz/config
 (fn[db] (:wizard-config db)) )

(re-frame/reg-sub
 :wiz/section-config
 (fn [_](re-frame/subscribe [:wiz/config]))
 (fn [wizard-config [_ section-number]]   ((:sections wizard-config) section-number)   ))

(re-frame/reg-sub
  :wiz/title
  (fn [_] (re-frame/subscribe [:wiz/config]))
  (fn [config _] (:title config)))

(re-frame/reg-sub
 :wiz/section-count
 (fn [_](re-frame/subscribe [:wiz/config]))
 (fn [config _] (count (:sections config))))


(re-frame/reg-sub
 :wiz/section-data
  (fn [db [_ section-number]] ((:wizard-data db) section-number)))

(re-frame/reg-sub
 :wiz/section-title
 (fn [[_ section-number]]  (re-frame/subscribe [:wiz/section-config section-number])  )
 (fn [section-config]   (:title section-config) ))

(re-frame/reg-sub
 :wiz/section-components
 (fn [[_ section-number]]  (re-frame/subscribe [:wiz/section-config section-number]))
 (fn [section-config _]   (:components section-config)) )

(re-frame/reg-sub
 :wiz/component-data
 (fn [[_ section-number]]
        (js/console.log "----[:wiz/component-data] section " (str section-number))
        (re-frame/subscribe [:wiz/section-data section-number])  )
 (fn [section_data [_  _ component-number]]
;;(fn [section_data [_ _ par2]]
;;(fn [par2]
(js/console.log "----[:wiz/component-data] comp funct,component=" (str component-number))
;;(js/console.log "----[:wiz/component-data] component " component-number " from section " sect-nbr)
;;   (section_data component-number)
   )
 )

;;
;; view
;;
(defn render-component
  [component component-number section-number]
  (let [
        value @(re-frame/subscribe [:wiz/component-data section-number component-number])]
  ;;(case (:type component)
  ;;  :text (render-component-text component component-number section-number)
  ;;  :memo (render-component-memo component component-number section-number)
  ;;  (render-component-default component)
  ;;  )
  [:div "The VALUE for component " component-number " (section" section-number") is : " value]
  )
)
(defn render-section
  [section-number]
  (let [title @(re-frame/subscribe [:wiz/section-title section-number])
        components @(re-frame/subscribe [:wiz/section-components section-number])]
    [:div
     [:h2 title]
     (into [:div] (map-indexed #(render-component %2 % section-number) components))]))

(defn main-panel []
  (let [wizard-title @(re-frame/subscribe [:wiz/title])
        section-count @(re-frame/subscribe [:wiz/section-count])
        ]

    [:div
     [:h1 wizard-title]
     (into [:<>] (map #(vector render-section %) (range section-count)))
     ]))


;;
;;core
;;
(defn dev-setup []
  (when debug?
    (println "*** dev mode ***")))

(defn ^:dev/after-load mount-root []
  (re-frame/clear-subscription-cache!)
  (let [root-el (.getElementById js/document "app")]
    (rdom/unmount-component-at-node root-el)
    (rdom/render [main-panel] root-el)))

(defn init []
  (re-frame/dispatch-sync [:wiz-ev/initialize-db])
  (dev-setup)
  (mount-root) ; render to element 'app' the view main-panel
  )

解决方法

已解决,

1st,我在调试 component-data 订阅时注释了太多

2、component-data的函数参数不对

(re-frame/reg-sub
 :wiz/component-data
 (fn [[_ section-number _]] ;; ---- FIX NBR 2
        (js/console.log "----[:wiz/component-data] section " (str section-number))
        (re-frame/subscribe [:wiz/section-data section-number])  )
 (fn [section-data [_  _ component-number]]
(js/console.log "----[:wiz/component-data]" )
(js/console.log "component=" (str component-number))
(js/console.log "data " (str section-data))
   (section-data component-number) ;; ---- FIX NBR 1
   )
 )

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?