0

I try to add an event handler via template within slim.js.

All native HTMLElement events are supported via reserved attributes, omitting the "on" prefix. A Slim element can add event listeners via template. Example https://github.com/slimjs/slim.js/wiki/Events-&-Interactivity

I have an element thats starts an animation if a specific class is added.

<li transitionend="aaa" bind:class="activeImg.c">
  <img bind:src="activeImg.s">
</li>

in the component:

aaa() {
 console.log("test")
}

So, the handler function never is called. If i try it without slim:

<li ontransitionend="alert(document)" bind:class="activeImg.c">
 <img bind:src="activeImg.s">
</li>

It works.

I wonder why it doesn't work the way it should. ontransitionend may not be a "native" event?. I have tried to understand this using the mdn reference (https://developer.mozilla.org/en-US/docs/Web/Events). But I can't figure out which events count as native according to the description of the slim wiki page.

  • How can I find out which events are supported without trying it out manually?
  • What i do if i want to bind a "non-native" event to a handler in a component?
enno.void
  • 6,242
  • 4
  • 25
  • 42

1 Answers1

1

Please aubmit an issue on github. I will add the event to the known events.

Meanwhile you could just add listener until this will be added.

You could also extend slim writing your own custom directive to support any event dispatched with any name.

const matcher = (attr) => attr.nodeName.startsWith('evt:');
const directive = (source, target, attr) => {
  const eventName = attr.nodeName.slice(4);
  const callbackName = attr.nodeValue;
  target.addEventListener(eventName, source[callbackName].bind(source));
};

Slim.customDirective(matcher, directive); 

// usage: <li evt:ontransitionend="myFunction"></li>

Hope this helps.

eavichay
  • 507
  • 2
  • 7