فهرست منبع

use component for reagent web-client

Harlan Iverson 9 سال پیش
والد
کامیت
65ab73004c
2فایلهای تغییر یافته به همراه29 افزوده شده و 7 حذف شده
  1. 1 1
      web-client/env/dev/cljs/web_client/dev.cljs
  2. 28 6
      web-client/src/cljs/web_client/core.cljs

+ 1 - 1
web-client/env/dev/cljs/web_client/dev.cljs

@@ -6,6 +6,6 @@
 
 (figwheel/watch-and-reload
   :websocket-url "ws://localhost:3449/figwheel-ws"
-  :jsload-callback core/mount-root)
+  :jsload-callback core/reload!)
 
 (core/init!)

+ 28 - 6
web-client/src/cljs/web_client/core.cljs

@@ -2,11 +2,29 @@
     (:require [reagent.core :as reagent :refer [atom]]
               [reagent.session :as session]
               [secretary.core :as secretary :include-macros true]
-              [accountant.core :as accountant]))
+              [accountant.core :as accountant]
+              [com.stuartsierra.component :as component]))
 
 ;; -------------------------
 ;; Views
 
+(defrecord AppView [root-selector
+                    home-page
+                    about-page
+                    current-page
+                    root]
+ component/Lifecycle
+ (start [component]
+   (update component
+           :root #(or % (do (accountant/configure-navigation!)
+                            (accountant/dispatch-current!)
+                            (let [root-el (.getElementById js/document root-selector)
+                                  root (reagent/render [current-page] root-el)]
+                                 (assoc component :root root))))))
+ (stop [component]
+       (reagent/unmount-component-at-node (reagent/dom-node (:root component)))
+       (dissoc component :root)))
+
 (defn home-page []
   [:div [:h2 "Welcome to web-client"]
    [:div [:a {:href "/about"} "go to about page"]]])
@@ -30,10 +48,14 @@
 ;; -------------------------
 ;; Initialize app
 
-(defn mount-root []
-  (reagent/render [current-page] (.getElementById js/document "app")))
+(defonce system (atom (map->AppView {:root-selector "app"
+                                     :home-page home-page
+                                     :about-page about-page
+                                     :current-page current-page})))
 
 (defn init! []
-  (accountant/configure-navigation!)
-  (accountant/dispatch-current!)
-  (mount-root))
+      (swap! system update component/start))
+
+(defn reload! []
+      (swap! system update component/stop)
+      (init!))