Event handlers and frameworks

In the previous entry I built the foundations for the framework I'm making, and showed how I could use the framework to insert text without having to directly manipulate an element's innerHTML or textContent.

This time I'll be binding functions to events.

A function bound to an event is an event handler. One function can be bound to many events and one event can be bound to many functions. An event can be all sorts of things. Most often, in javascript, it's some sort of user interaction, e.g. clicking the mouse on a button.

That's what I'll show in this post. How to use the framework to bind a function to the click event of a button.

So the first thing I need to do is to extend the framework to bind functions to click events.

In the previous post the initialisation function of the framework looped through all the elements, so that's where we'll start.

for(let el of elements)
{
/*
* previous work of binding values to elements goes here.
*/
  if(el.getAttribute('onclick'))
  {
    let onclick = el.getAttribute('onclick');
    if(onclick in _internal.originalViewmodel.functions)
    {
      el.addEventListener('click', _internal.originalViewmodel.functions[onclick].bind(_internal));
      el.setAttribute('onclick', '');
    }
  }
}

What this means is that if you set the onclick attribute of an element within the framework, e.g. <button onclick="clickhandler">click me!</button> and there is a function called clickhandler in the viewmodel, then it will be assigned as a click handler for the button.

After setting the click handler, the onclick attribute is cleared, so that an error does not occur when a non-existant handler is attempted to be called.

This is a worked example of the html and viewmodel:

<div id="app">
  <p data-model="message"></p>
  <button onclick="changeMessage">Make a change</button>
</div>

import {rjsf} from 'rjsf.js'

(function()
{
  const appElement = document.getElementById('app');

  const app = new rjsf(appElement);

  const viewmodel =
        {
          functions:
          {
            changeMessage: function(e)
            {
              e.preventDefault();
              const v = this;
              v.data.message = 'Now this message is.';
              setTimeout(() => v.data.message = 'This message is here.', 1000);
            }
          },
          data:
          {
            message: 'This message is here.',
          }
        };

  app.init(viewmodel);

})();

The click handler here will change the message of the p element and then, after a delay of 1 second, change it back.

Next time I will investigate how to make elements conditional.

I've started adding code examples to the github pages for the repo. Yet another way to see how this project is going!

Please let me know any thoughts or questions you have in the comments below.

❤️, 🦄, share, and follow for the next instalment!