Can't use string in event attributes

[MilkeeyCat]

In docs written that script templates are a legacy feature. I wanted to call a function with a value from template but it says that templ.ComponentScript is expected, example:

for i, _ := range strArr {
    <div onclick={fmt.Sprintf("handler(%d)", i)}></div>
}

[pharrisee]

There may be a better answer to your issue out there, but something like this works for me:

<p data-id="11" class="clickable">
   Welcome to the index page
</p>

<script>
   // could also select a single element here and forgo the loop
   let ps = document.getElementsByClassName('clickable');  
   for (let p of ps) {
      p.addEventListener('click', function(e) {
         let pid= p.getAttribute('data-id');
         console.log('clicked ' + pid, e.target)
      })
   }
</script>

Not as clean as using a ComponentScript but it works well.

[joerdav]

You can also use something like https://github.com/gnat/surreal to add events to elements.

[pharrisee]

Funnily enough I have a surreal version that's functionally equivalent, and in a component, that I almost posted but changed my mind :) :

templ clickable(id int) {
	<p data-id={ fmt.Sprintf("%d", id) }>
		{ children... }
		<script>
            me().on("click",ev=>{
                let p = me(ev)
                console.log('clicked ' + p.attribute('data-id'), p)
            })
        </script>
	</p>
}

[pharrisee]

To get even more subversive this also works:

<div { templ.Attributes{"onclick":fmt.Sprintf("doIt(%d)",11)}... }>
   <p>click me</p>
</div>

The more ways I find of misusing templ.Attributes the dirtier I feel.

[MilkeeyCat]

This one is interesting