How to handle anything

This is just a small change. Initially I created functionality to allow for click events to be handled, like so:

if(el.getAttribute('onclick'))
{
  let onclick = el.getAttribute('onclick');
  el.setAttribute('onclick', '');
  if(onclick in _internal.originalViewmodel.functions)
  {
    el.addEventListener('click', _internal.originalViewmodel.functions[onclick].bind(_internal));
   }
}

Obviously people will want to handle any element event, so I need to expand handling to allow for that.

My chosen method is a little brittle. I assume an attribute that starts on is and event, and assign accordingly.

for(let attr of el.attributes)
{
  if(attr.name.startsWith('on'))
  {
    let eventName = attr.name.substring(2);
    let eventHandlerName = attr.value;
    if(eventHandlerName in _internal.originalViewmodel.functions)
    {
      el.setAttribute(attr.name, '');
      el.addEventListener(eventName, _internal.originalViewmodel.functions[eventHandlerName].bind(_internal));
    }
  }
}

So now this is possible:

<div id="app">
  <input type="text" onkeyup="annoy">
</div>

import {rjsf} from '../rjsf.js'

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

  const app = new rjsf(appElement);

  const viewmodel = 
        {
          functions:
          {
            annoy: function(e)
            {
              e.preventDefault();
              alert('this is annoying isn\'t it?');
            }
          },
        };

  app.init(viewmodel);

})();

Which will alert a message every time there is a keyup event in the input box.

Next time will be a longer article investigating how to make a for element.

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

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