diff --git a/tutorials/patterns/README.md b/tutorials/patterns/README.md index 0f4f2a6e6c..e6c58c50de 100644 --- a/tutorials/patterns/README.md +++ b/tutorials/patterns/README.md @@ -6,13 +6,38 @@ things the "right way". Well thankfully, we have some common patterns that we see when building Bubble Tea applications that should help to simplify your decision-making. +## Managing multiple components in one model + +If you have a composite view, then you have multiple components on one screen +that you want to be able to switch between. To handle this in Bubble Tea you'll +want your parent component to house a `state` field that dictates which element +on the screen is focused and receiving key presses. + +You can see a [basic example][basic] of this on our GitHub. + +```go + switch m.state { + // update whichever model is focused + case spinnerView: + m.spinner, cmd = m.spinner.Update(msg) + cmds = append(cmds, cmd) + default: + m.timer, cmd = m.timer.Update(msg) + cmds = append(cmds, cmd) + } +``` + +This same strategy can be used for switching between different models. We do +just this in [Glow][glow] to switch between the file listing and viewing the +document. + ## I only want the model that triggered the message to update To figure out whether a component should process the message or not, simply include an ID in the message. The ID will match the ID field of your child model and can be handled in that child model's `Update`. -We use this pattern in our [spinner example](https://github.com/charmbracelet/bubbles/blob/master/spinner/spinner.go) +We use this pattern in our [spinner example][spinner] These spots in particular: https://github.com/charmbracelet/bubbles/blob/master/spinner/spinner.go#L145-L149 @@ -39,3 +64,7 @@ func (m Model) tick(id, tag int) tea.Cmd { }) } ``` + +[basic]: https://github.com/charmbracelet/bubbletea/blob/master/examples/composable-views/main.go +[glow]: https://github.com/charmbracelet/glow/blob/f0734709f0be19a34e648caaf63340938a50caa2/ui/ui.go#L434 +[spinner]: https://github.com/charmbracelet/bubbles/blob/master/spinner/spinner.go