Pubsub

Intro

ChocolateChip-UI has a pubsub system that allows you to create mediators for creating loosely coupled code. They can serve as the glue to bind the different parts of your app together. Mediators sit between the different parts of your app and handle complex tasks so that your components and widgets don't have to. You could use a mediator to process data before posting it to a remote server, or before persisting it in a local dataStore.

As useful as mediators are, they are optional. You can build a very efficient app without writing a single mediator. However, if you are using any type of navigation, including routing, mediators are running behind the scenes.

ChocolateChip-UI uses an evented bus system to enable mediators. The events that mediators respond to are called "topics". You can use delimiters to create namespaced topics for your mediators. When you publish a topic, any mediator subscribed to it will fire. And like normal events, you can have multiple mediators subscribed to the same topic.

You can pass data to a mediator when you run it. And you can define mediator's callback to automatically capture that data. To define a mediator, you use $.on(). The first argument is the topic, followed by the callback to execute. Notice that the following callback is set to capture any data that gets passed:

// Access passed data in the callback using `data`:
const fooMtor = $.subscribe('Foo', (data) => console.log('What we got: ' + data))
// Execute the mediator with a message:
fooMtor.run('Something for you here.')
// Result: "What we got: Something for you here."

You can also define a mediator that is executed like any other function. For example:

const fooMtor = $.subscribe('foo', () => console.log('This is fooMtor running!'))
// Execute the mediator:
fooMtor.run()

• Components
• State
• Widgets
• Pubsub
  • Intro
  • Use
  • API
• Router
• Gestures
• DOM
• Utilities
• Layouts
• Themes
• Forms
• Formatting
• Hybrid Apps
• Tutorials