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!
Top comments (0)