re-frame/docs/Navigation.md

65 lines
1.7 KiB
Markdown
Raw Normal View History

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Table Of Contents
- [What About Navigation?](#what-about-navigation)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## 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])])))
```
2016-08-25 11:52:39 +00:00
Continue to [Namespaced Keywords](Namespaced-Keywords.md) to reduce clashes on ids.
***
Previous: [Basic App Structure](Basic-App-Structure.md)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Up: [Index](README.md)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Next: [Namespaced Keywords](Namespaced-Keywords.md)