Binding Events for the DOM: Part 3 of the Peasy-UI Series

Table of Contents

1. Introduction
2. Bindings for events
3. Callback Params
   • Event
   • Data Model
   • Target Element
   • Event String
   • Parent Data Object
4. More information
5. Conclusion

Introduction

Today we are going to dive a layer deeper into the Peasy-UI library. We are going to do a deep dive into binding strategies for user events in the DOM. User events in the DOM are particularly targeted towards how the user of the app will interact with it. This can be touch interfaces, mouse pointers and drag, typing into fields, etc...

If you missed the introduction article for Peasy-UI, you can read it here, and it can provide the overview for the library, and even introduces upcoming topics in the series.

Bindings for events

Let's dig into the mechanics of capturing user events from the DOM. If want to render a drop down select input, or a button? Peasy-UI gives you access to mapping the event listeners automatically and tying them into the data model.

BINDING: ${ event @=> callbackName}

Buttons provide easy examples for this, but all DOM events can be used.

const model = {
  clickHandler: () => {
    window.alert("I got clicked");
  },
};

const template = `
<div>
    <button \${click @=> clickHandler}> Click Me! </button>
</div>
`;

You can bind any HTML DOM event, such as change, input, click, mouseenter, etc... as an event binding, and then you provide the 'handler' callback which exists IN the data model.

Callback Params

Peasy passes 5 standard parameters into the handler for your convenience.

Event

The first parameter is the HTMLEvent that actually is fired.

const model = {
  clickHandler: (evt: HTMLEvent) => {
    console.log(evt);
  },
};

const template = `
<div>
    <button \${click @=> clickHandler}>Click Me!</button>
</div>
`;

Data Model

The second parameter is the 'localized' data model that is bound to the element. This CAN be tricky, because depending on your nesting of elements, it maybe be a localized data model for just that element, or if it is a top level binding, it will be the standard data model. When we dig into lists and arrays and how Peasy renders them, we will discuss this localized data model and how it can be used.

const model = {
  isA: true;
  numClicks: 0;
  clickHandler: (evt: HTMLEvent, model: any) => {
    console.log(model);
  },
};

const template = `
<div>
    <button \${click @=> clickHandler}>Click Me</button>
</div>
`;

// will log --> > {isA: true, numclicks: 0, clickHandler: f}

Target Element

The third parameter is the target element that fired the event, so you can access any attributes nested in the element or its value.

const model = {
  clickHandler: (evt: HTMLEvent, model: any, elem: HTMLElement) => {
    console.log(elem);
  },
};

const template = `
<div>
    <button \${click @=> clickHandler}>Click Me</button>
</div>
`;

Event String

The fourth element is the string representation of the event, such as 'click' or 'change' and this helps in case you bind multiple events to the same callback, you can distinguish which event triggered this callback.

const model = {
  clickHandler: (evt: HTMLEvent, model: any, elem: HTMLElement, eStr: string) => {
    console.log(eStr);
  },
};

const template = `
<div>
    <button \${click @=> clickHandler} \${mouseenter @=> clickHandler}>Click Me</button>
</div>
`;

Parent Data Object

The final parameter is the overarching data model. Inside this object, regardless of how nested your binding is, will be an object that contains the model property, and you can navigate that object to have access to ANY property in the data model. This becomes very important when you start using arrays and lists for rendering elements.

const model = {
  clickHandler: (evt: HTMLEvent, model: any, elem: HTMLElement, eStr: string, obj: any) => {
    console.log(obj);
  },
};

const template = `
<div>
    <button \${click @=> clickHandler}>Click Me</button>
</div>
`;

// will log out -->    > {$model:{...}}

More information

More information can be found in the GitHub repo for Peasy-Lib, you also will find all the other companion packages there too. Also, Peasy has a Discord server where we hang out and discuss Peasy and help each other out.

The author's twitter: Here

The author's itch: Here

Github Repo: Here

Discord Server: Here

Conclusion

In this entry of the Peasy-UI library breakdown we dove deeper into how user input DOM events can be bound into the data model so Peasy-UI can create and manage the event listeners for you. One unique aspect of the event handlers in the data model is the callback parameters that are pulled into the callback by default, including: the event object, the data models, the event string, and the HTML element itself. This gives the developer a unique set of tools to perform very customizable events, but with a favorable developer experience. Our next article will address some of the helper CSS classes that come with Peasy-UI out of the box.