How to escape variables in double quotes?

[ajfriesen]

I am currently migrating from go html/template to templ.

However, I have a problem that I struggle with greatly right now.
And I bet there is an easy solution that I cannot find.

My current template in html/template

        {{range .MealDates}}
        <tr class="cursor-pointer" onclick='addToMealPlan("{{.Format "2006-01-02"}}")'>
            <td>{{.Format "Monday, 02 January"}}</td>
        </tr>
        {{end}}

I tried something like this with templ:

<tr class="cursor-pointer" onclick="addToMealPlan({date.Format "2006-01-02"})">

How do I need to do the escaping here?

[a-h]

package main

import (
	"context"
	"os"
	"time"
)

templ Dates(mealDates []time.Time) {
	for _, date := range mealDates {
		<tr class="cursor-pointer" onclick='addToMealPlan(this.getAttribute("data-date"))' data-date={ date.Format("2006-01-02") }>
			<td>{ date.Format("Monday, 02 January") }</td>
		</tr>
	}
}

func main() {
	mealDates := []time.Time{
		time.Date(2021, 1, 1, 0, 0, 0, 0, time.UTC),
		time.Date(2021, 1, 2, 0, 0, 0, 0, time.UTC),
		time.Date(2021, 1, 3, 0, 0, 0, 0, time.UTC),
	}
	Dates(mealDates).Render(context.Background(), os.Stdout)
}

You get an output like:

<title>
 Meal Plan
</title>
<script type="text/javascript">
    function addToMealPlan(date) {
	alert(date);
    }
</script>
<table>
 <tbody>
  <tr class="cursor-pointer" onclick="addToMealPlan(this.getAttribute("data-date"))" data-date="2021-01-01">
   <td>
    Friday, 01 January
   </td>
  </tr>
  <tr class="cursor-pointer" onclick="addToMealPlan(this.getAttribute("data-date"))" data-date="2021-01-02">
   <td>
    Saturday, 02 January
   </td>
  </tr>
  <tr class="cursor-pointer" onclick="addToMealPlan(this.getAttribute("data-date"))" data-date="2021-01-03">
   <td>
    Sunday, 03 January
   </td>
  </tr>
 </tbody>
</table>

If you want to add complex types to the data- attributes, you can use templ.JSONString to use a JSON object.