【问题标题】:defroute not fired on page load页面加载时未触发 defroute
【发布时间】:2019-04-28 06:42:15
【问题描述】:

我在src/cljs/project/routes.cljs 根目录下的routes.cljs 文件中定义了应用程序路由。

(defn app-routes []
  (secretary/set-config! :prefix "#")

  (defroute
    "/" []
    (re-frame/dispatch [::events/set-active-panel :welcome-panel])))
  ; shortened for brevity

core.cljs初始化

; required [portfolio-app.events :as events]
(defn ^:export init []
  (routes/app-routes)
  (re-frame/dispatch-sync [::events/initialize-db])
  (dev-setup)
  (mount-root))

它被分派到events.cljs中的::events/set-active-panel

(re-frame/reg-event-db
 ::set-active-panel
 (fn-traced [db [_ active-panel]]
   (assoc db :active-panel active-panel)))

并且在subs.cljs 订阅了:active-panel

(re-frame/reg-sub
 ::active-panel
 (fn [db _]
   (:active-panel db)))

我在layout.cljs 订阅了:active-panel

; required [portfolio-app.subs :as subs]
(defn panel []
  (let [active-panel (re-frame/subscribe [::subs/active-panel])]
    [:div
     "which panel? " @active-panel]))

@active-panel 在我第一次访问页面时是 nil。仅当我浏览页面时才调度面板。我知道这最初是有效的。我在我的提交中看不到任何可能破坏它的东西。

如何让我的defroutes 在页面加载以及通过网站导航时触发?

【问题讨论】:

    标签: clojurescript re-frame secretary


    【解决方案1】:

    基于可用代码的几个猜测:

    • 您是在页面加载时调用secretary/dispatch,还是仅在后续导航时调用?
    • 您的::events/initialize-db 是否在正确设置:active-panel 后初始化数据库,导致您的订阅返回nil

    【讨论】:

      【解决方案2】:

      我怀疑您已经成为重新框架“陷阱”的受害者,其中像 events 这样的命名空间在编译过程中被省略,因为它没有在 (:require ...) 表单中列出。详情请见the Gotcha documentation

      为了使(:require ...) 更明确且更难忘记,我总是将所有(reg-event-* ...) 调用包装在一个从主程序初始化的更大函数中:

      (ns demo.core  
        (:require 
           [demo.events :as events]
           [demo.subs :as subs]
           ...))
      
      (defn app-start
        "Initiates the cljs application"
        []
        (events/define-all-events!)
        (subs/initialize-all)
        (configure-browser-routing!)
        ...)
      

      然后:

      (ns demo.events ...)
      (defn define-all-events! []
        (reg-event-db ...)
        (reg-event-fx ...)
        ...)
      

      我为秘书/会计路由以及定义订阅(即reg-sub)使用了类似的“将其包装在一个函数中”技术。例如:

      (defn configure-browser-routing! []
        (println "configure-browser-routing - enter")
      
        (secretary/defroute "/all" []
          (println :secretary-route-all)
          (browser-nav-handler :all))
        (secretary/defroute "/active" []
          (println :secretary-route-active)
          (browser-nav-handler :active))
        (secretary/defroute "/completed" []
          (println :secretary-route-completed)
          (browser-nav-handler :completed))
        (secretary/defroute "/*" []
          (println ":secretary-route-all  *** default ***")
          (browser-nav-handler :all))
      
        (accountant/configure-navigation!
          {:nav-handler  (fn [path]
                           (t/spy :accountant--nav-handler--path path)
                           (secretary/dispatch! path))
           :path-exists? (fn [path]
                           (t/spy :accountant--path-exists?--path path)
                           (t/spy :accountant--path-exists?--result
                             (secretary/locate-route path)))})
        (println "configure-browser-routing - leave"))
      

      【讨论】:

      • 感谢您的帮助。您是否有任何机会可以查看我的回购协议,以便我可以看到我哪里出错了? init 包装我的函数时不会挂载,我怀疑我必须有一两件东西放错地方或包装不正确。非常感谢。
      • 您可以克隆以下 repo。请注意,您需要 secretary-accountant 分支。 github.com/cloojure/cljs-enflame/blob/secretary-accountant/src/…
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-03-09
      • 1970-01-01
      • 1970-01-01
      • 2017-07-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多