Events

Each action that occurs generates an event to which a subscriber (also known as an event listener) can listen. There are many predefined events that you can react to by subscribing a listener to the desired event name. In addition, you can create, react to, and listen for custom events. Each submodule, such as users, accounts, cards, etc. listens for and reacts on certain predefined events as well.

Subscribing to and Creating a Custom Event

Before firing a custom event, you will want to subscribe a listener that will react to the desired event as defined. After subscribing a listener or listeners, then create a new event and pass the payload to the listener(s).

Subscribing to and creating an event method 1

When subscribing to an event using TheM.addSubscribers, the listener will require the name property and the fn property (fn stands for function). The fn property will determine the action that is taken in reaction to the specified event. This method can be used to add event listeners to both predefined events and custom events. In addition, there can be multiple subscribers to the same event.

TheM.addSubscribers({
    name: "event name", 
    fn: (givenEventName, payload) => {
        console.log(JSON.stringify(payload));
        //do something with the payload
    }
});

Fire the event using TheM.callSubscribers. Make sure to pass the desired event name and payload. Note that this will call every subscriber in the TheM.subscribers array, regardless of the subscriber name. If you only want certain subscribers to react to this payload, then include a check for a matching event name in the subscriber function (fn) when calling TheM.addSubscribers. Also, this method will only call subscribers that have been added using TheM.addSubscribers, and will not include calls to event listeners added using TheM.on.

TheM.callSubscribers("event name", {key1: "value1", key2: "value2"})

Example:

TheM.addSubscribers({ //add a listener (subscriber)
    name: "test_myNewEvent", //"test_" is the default LOCAL_STORAGE_TAG_PREFIX. This can be customized using config.LOCAL_STORAGE_TAG_PREFIX when initializing TheM. If the LOCAL_STORAGE_TAG_PREFIX is not included in the event name, then this subscriber will not be called when using TheM.newEvent("myNewEvent", payload).
    fn: (givenEventName, payload) => { 
        if (givenEventName === "test_myNewEvent" ) { //check that the event name matches
        console.log(`This is the payload: ${JSON.stringify(payload)}`);
        }
    }
});

TheM.callSubscribers("test_myNewEvent", {key1: "value1", key2: "value2"}) //call the listener (subscriber).

Subscribing to and creating an event method 2

Another way to subscribe to an event is using TheM.on. Any subscribers defined in this manner are not automatically added to the TheM.subscribers array and will not be fired when TheM.callSubcribers is used.

TheM.on("event name", (given) => {
    console.log(given.detail);
    }
);

This creates a new event and delivers the given object or other input to any listener which has been subscribed to this event.

TheM.newEvent("event name", detail);

Example:

TheM.on("myNewEvent", (given) => { //add a listener (subscriber)
    console.log(given); //This will log the CustomEvent
    if (given.detail) {
        console.log(given.detail); //given.detail will contain whatever object or value is passed into the event function as a payload when TheM.newEvent(givenEventName, payload) is called
    }
}, true);

//This will call the "myNewEvent" listener that was added using TheM.on, as well as any subscribers in TheM.subscribers that are prefixed with the LOCAL_STORAGE_TAG_PREFIX, such as "test_myNewEvent".
TheM.newEvent("myNewEvent", {key1: "value1", key2: "The event was fired", key3: 42});

Logging Out

Many objects react to the modelBank logged out event by purging all the in-memory data.

Events and TheM.refresh()

The TheM.refresh() method gets called every time something changes in the data. It is not protected by a proxy and was meant to be taken over for creating observers for SPA frameworks.