Sugar (Super global artifacts)
When working with numerous components, it's not uncommon for aself
method or property to be required across the application. LemonadeJS Sugar addresses this issue by creating a global registry allowing a self or function to be registered and made available across different scopes.Summary of this chapter
This document highlights several aspects of Sugar:
- Make a self available across various components using Sugar's set and get methods.
- Use the data dispatcher to act on a
self
property while preserving its private scope. - Register data dispatcher actions and call them from any component.
- Leverage the persistence flag to save the latest data dispatched for a specific Sugar alias.
Example
In the following example, the self is registered on the Profile component and recovered on the Loader component.<html> <script src="https://lemonadejs.net/lemonade.js"></script> <div id='profile'></div> <div id='loader'></div> <script> function Profile() { // Create a blank self const self = this; // Register the self under My:Profile alias lemonade.set('My:Profile', self); // Counter is created from the attribute counter return `<form> <label>Name:</label><br/> <input type="text" :bind="self.name" /><br/> <label>Email:</label><br/> <input type="text" :bind="self.email" /> </form>`; } function Loader() { const self = this; self.load = function() { // Get My:Profile self let s = lemonade.get('My:Profile'); // Updates directly to the self properties s.name = 'John Lennon'; s.email = 'john.lennon@beatles.com'; } return `<input type="button" value="Load the data" onclick="self.load()" />`; } lemonade.render(Profile, document.getElementById('profile')); lemonade.render(Loader, document.getElementById('loader')); </script> </html>
Profile
Loader
Data Dispatcher
Sometimes, you might not want the entireself
to be accessible but still need to update the state of specific properties of one {self} from other components. A solution for this scenario is registering a data dispatcher function with LemonadeJS Sugar.
A basic example of persistence
To illustrate this concept, we'll use an example similar to the one above, utilizing the persistence flag to maintain the last dispatched data saved, even after a page refresh.<html> <script src="https://lemonadejs.net/lemonade.js"></script> <div id='profile'></div> <div id='loader'></div> <script> function Profile() { // Create a blank self for this component const self = this; // Register the dispatcher under Profile // and set the persistence as true lemonade.set('Profile', function(s) { self.name = s.name; self.email = s.email; }, true); // The template create the form elements return `<form> <label>Name:</label><br/> <input type="text" :bind="self.name" /><br/> <label>Email:</label><br/> <input type="text" :bind="self.email" /> </form>`; } function Loader() { const self = this; self.dispatch = function() { // Send new values to another component using the dispatcher lemonade.dispatch('Profile', { name: 'John Lennon', email: 'john.lennon@beatles.com', }); } return `<input type="button" value="Load" onclick="self.dispatch()" />`; } lemonade.render(Profile, document.getElementById('profile')); lemonade.render(Loader, document.getElementById('loader')); </script> </html>