Sugar - Super global artifacts

When working with many different components is not rare that a {self} method or property should be accessible through the application. The LemonadeJS Sugar comes to solve this problem. It creates a global registry that allows a self or function to be registered and be available across different scopes when needed.

Summary of this chapter

This document covers those some aspects of Sugar:
  • Make a self available across different components using Sugar set and get.
  • The data dispatcher can apply actions in a {self} property, preserving its private scope.
  • Register data dispatcher actions and call them from any component.
  • The persistence flag can save the latest data dispatched for a particular 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/v3/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 for different reasons, you don't want the whole {self} to be available but still, need to update the state of some properties of one {self} from other components. A solution for that is to register a data dispatcher function to the LemonadeJS Sugar.

A basic example of persistence

To make it easy, we will use a similar example as above, using the flag persistence to keep the last dispatched data saved, even after a refresh.

<html>
<script src="https://lemonadejs.net/v3/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 the data" onclick="self.dispatch()" />`;
}
lemonade.render(Profile, document.getElementById('profile'));
lemonade.render(Loader, document.getElementById('loader'));
</script>
</html>

Profile



Loader