49 lines
1.2 KiB
Markdown
49 lines
1.2 KiB
Markdown
|
|
||
|
|
## What About Navigation?
|
||
|
|
|
||
|
|
How do I switch between different panels of a larger app?
|
||
|
|
|
||
|
|
Your `app-db` could have an `:active-panel` key containing an id for the panel being displayed.
|
||
|
|
|
||
|
|
|
||
|
|
When the user does something navigation-ish (selects a tab, a dropdown or something which changes the active panel), then the associated event and dispatch look like this:
|
||
|
|
|
||
|
|
```clj
|
||
|
|
(re-frame/reg-event-db
|
||
|
|
:set-active-panel
|
||
|
|
(fn [db [_ value]]
|
||
|
|
(assoc db :active-panel value)))
|
||
|
|
|
||
|
|
(re-frame/dispatch
|
||
|
|
[:set-active-panel :panel1])
|
||
|
|
```
|
||
|
|
|
||
|
|
A high level reagent view has a subscription to :active-panel and will switch to the associated panel.
|
||
|
|
```clj
|
||
|
|
(re-frame/reg-sub
|
||
|
|
:active-panel
|
||
|
|
(fn [db _]
|
||
|
|
(:active-panel db)))
|
||
|
|
|
||
|
|
(defn panel1
|
||
|
|
[]
|
||
|
|
[:div {:on-click #(re-frame/dispatch [:set-active-panel :panel2])}
|
||
|
|
"Here" ])
|
||
|
|
|
||
|
|
(defn panel2
|
||
|
|
[]
|
||
|
|
[:div "There"])
|
||
|
|
|
||
|
|
(defn high-level-view
|
||
|
|
[]
|
||
|
|
(let [active (re-frame/subscribe [:active-panel])]
|
||
|
|
(fn []
|
||
|
|
[:div
|
||
|
|
[:div.title "Heading"]
|
||
|
|
(condp = @active ;; or you could look up in a map
|
||
|
|
:panel1 [panel1]
|
||
|
|
:panel2 [panel2])])))
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
Continue to [Namespaced Keywords](Namespaced-Keywords.md) to reduce clashes on event ids.
|