Applying event listeners

[ultraq]

When using ThymeleafJS on the browser, I'm doing a lot of setting of event handlers after the template has been rendered. It'd be cool if there was some way to automatically apply event handlers on the template after the rendering process. eg:

Taking inspiration from Vue:

new Vue({
  el: 'selector-to-vue-template',
  methods: {
    // Methods here which are mapped from the template via directives like v-on:click="methodName"
  }
});

And in React using JSX:

<button onclick={/* JS function here */}>Click me!</button>

So for Thymeleaf, it might look something like:

templateEngine.process('<button th:onclick="methodName">Click me!</button>', {
  methods: {
    methodName: event => {
      // ...
    }
  }
});

Some things that come to mind:

• process() always returns a string, wiping out any link between the element and javascript code. If ThymeleafJS returned some kind of DOM object like a DocumentFragment or Element instead, then the link between DOM and JS handlers can be retained.
• Since the original Thymeleaf already has some defined behaviour for the th:onclick processor, this event listener adding might need to be a different dialect or require some special syntax to distinguish itself from the original behaviour.

🤔