How to pass data to html such as alpinejs?

[sawirricardo]

I have a usecase that I want to pass an record id to alpinejs

<div x-data="{i_want_to_put_here: "<data>"}">
...
</div>

Can we do this? I have not found a way to do that, especially if we want to pass a js object to script too...

[a-h]

components.templ

package main

templ Page(data any) {
	<div x-data={ toJSON(data) }>
		Content
	</div>
}

main.go

package main

import (
	"context"
	"encoding/json"
	"os"
)

func toJSON(v any) string {
	b, _ := json.Marshal(v)
	return string(b)
}

func main() {
	data := map[string]any{
		"i_want_to_put_here": "<data>",
	}
	Page(data).Render(context.Background(), os.Stdout)
}

go run .

The content is attribute escaped, but is valid JSON.

<div x-data="{&#34;i_want_to_put_here&#34;:&#34;\u003cdata\u003e&#34;}">Content</div>

Passing JavaScript objects on the client side.

I'm not familiar with alpine.js, but what you want seems similar to https://htmx.org/attributes/hx-vals/ in HTMX which can combine static stuff with dynamic function calls.

Not quite built in... but...

package main

templ Page(data any) {
	<script type="text/javascript">
		function hello() {
			return "world";
		}
	</script>
	<div x-data={ toJS(data, map[string]Fn{"hello": Fn("hello()")}) }>
		Content
	</div>
}

package main

import (
	"context"
	"encoding/json"
	"fmt"
	"os"
	"strings"
)

type Fn string

func toJS(data any, functions map[string]Fn) string {
	var pairs []string
	for k, v := range toMap(data) {
		pairs = append(pairs, fmt.Sprintf("%s: %s", jsonString(k), jsonString(v)))
	}
	for k, fn := range functions {
		pairs = append(pairs, fmt.Sprintf("%s: %s", jsonString(k), fn))
	}
	return "{" + strings.Join(pairs, ",") + "}"
}

func toMap(data any) (m map[string]any) {
	jb, _ := json.Marshal(data)
	json.Unmarshal(jb, &m)
	return m
}

func jsonString(s any) string {
	ss, _ := json.Marshal(s)
	return string(ss)
}

func main() {
	data := map[string]any{
		"i_want_to_put_here": "<data>",
	}
	Page(data).Render(context.Background(), os.Stdout)
}

Results in HTML of:

<script type="text/javascript">
                function hello() {
                        return "world";
                }
        </script><div x-data="{&#34;i_want_to_put_here&#34;: &#34;\u003cdata\u003e&#34;,&#34;hello&#34;: hello()}">Content</div>

Unescaped, the attribute value is what you'd expect - a JavaScript object (note that hello() is not surrounded by quotes like it would be if it were JSON). There's probably a nicer way to do this, but that's what I put together.

{"i_want_to_put_here": "\u003cdata\u003e","hello": hello()}

[sawirricardo]

Woah, nice !

[sawirricardo]

I think it's cool to see these one as helpers in templ package. What do you think? @a-h

[a-h]

Wanting a JSON string for x-data or hx-data seems like a common use case, but I'm not sure how often people would use the one with functions as values.

Since we're able to use standard Go constructs in templ, it might be sensible to create an alpine package that contains stuff that's useful for alpine, rather than keep adding to the (already a bit too busy) templ namespace.

So you might have:

<div x-data={ alpine.Data(d) }>

Where the Data function returns a string.

I'm not sure what else would be in the package though.

I think that utility packages benefit from being built up slowly and carefully over time, or you end up with a lot of helpers with regrettable apis that you can't change, so maybe you should start your own alpine utility package, use it for a year or so, then take a look at which functions you use a lot.

[sawirricardo]

@a-h Is it possible if we can do something like this?

templ Page(str string) {
<table></table>
<script>
let string = {str};
doSomething(string);
</script>
}

[a-h]

Not currently. Go templates do it, so it is definitely possible to add.

Go templates are interoperable with templ, so you can use one for the script if you need it.

[leandergangso]

I've ended up just doing this.

templ Page(str string) {
    <div x-data={ "key: '" + str + "'" }>...</div>
}

However is probably nicer and safer to use the method solution you suggested.

[Nic-vwalt]

Strangely when alpinejs is used like below:

templ whitelistRow(item query.PsaVwWhitelistDetail) {
    <tr x-data="{ editMode: false }">
        <td class="py-4 px-6 text-left">
            <template x-if="!editMode">
                <span x-text={ item.UserEmail }></span>
            </template>
            <template x-if="editMode">
                <input type="text" name="UserEmail" x-model={ item.UserEmail } class="editable-input"/>
            </template>
        </td>
        <td class="py-4 px-6 text-left">
            <template x-if="!editMode">
                <span x-text={ item.WhitelistReason }></span>
            </template>
            <template x-if="editMode">
                <input type="text" name="WhitelistReason" x-model={ item.WhitelistReason } class="editable-input"/>
            </template>
        </td>
        <td class="py-4 px-6 text-left">
            <template x-if="!editMode">
                <span x-text={ item.CategoryName }></span>
            </template>
            <template x-if="editMode">
                <input type="text" name="CategoryName" x-model={ item.CategoryName } class="editable-input"/>
            </template>
        </td>
        <td class="py-4 px-6 text-left">
            <template x-if="!editMode">
                <span x-text={ item.EventName }></span>
            </template>
            <template x-if="editMode">
                <input type="text" name="EventName" x-model={ item.EventName } class="editable-input"/>
            </template>
        </td>
        <td class="py-4 px-6 text-left">
            <template x-if="!editMode">
                <span x-text={ strconv.FormatInt(item.UserID, 10) }></span>
            </template>
            <template x-if="editMode">
                <input type="number" name="UserID" x-model={ strconv.FormatInt(item.UserID,10) } class="editable-input"/>
            </template>
        </td>
        <td class="py-4 px-6 text-left">
            <template x-if="!editMode">
                <span x-text={ strconv.FormatInt(item.EventID.Int64, 10) }></span>
            </template>
            <template x-if="editMode">
                <input type="number" name="EventID" x-model={ strconv.FormatInt(item.EventID.Int64, 10) } class="editable-input"/>
            </template>
        </td>
        <td class="py-4 px-6 text-left">
            <button x-show="!editMode" @click="editMode = true" class="k-button k-button-solid-primary px-4 py-2 font-semibold">
                Update
            </button>
            <button x-show="editMode" @click="editMode = false" class="k-button k-button-solid-primary px-4 py-2 font-semibold">
                Save
            </button>
        </td>
    </tr>
}

Only the INT fields display. The String fields are not rendered. See the output below.

<tr x-data="{ editMode: false }">
  <td class="py-4 px-6 text-left">
    <template x-if="!editMode"
      ><span x-text="[email protected]"></span></template
    ><span x-text="[email protected]"></span
    ><template x-if="editMode"
      ><input
        type="text"
        name="UserEmail"
        x-model="[email protected]"
        class="editable-input"
    /></template>
  </td>
  <td class="py-4 px-6 text-left">
    <template x-if="!editMode"><span x-text="test"></span></template
    ><span x-text="test"></span
    ><template x-if="editMode"
      ><input
        type="text"
        name="WhitelistReason"
        x-model="test"
        class="editable-input"
    /></template>
  </td>
  <td class="py-4 px-6 text-left">
    <template x-if="!editMode"><span x-text="Test"></span></template
    ><span x-text="Test"></span
    ><template x-if="editMode"
      ><input
        type="text"
        name="CategoryName"
        x-model="Test"
        class="editable-input"
    /></template>
  </td>
  <td class="py-4 px-6 text-left">
    <template x-if="!editMode"><span x-text="kongres"></span></template
    ><span x-text="kongres"></span
    ><template x-if="editMode"
      ><input
        type="text"
        name="EventName"
        x-model="kongres"
        class="editable-input"
    /></template>
  </td>
  <td class="py-4 px-6 text-left">
    <template x-if="!editMode"><span x-text="241"></span></template
    ><span x-text="241">241</span
    ><template x-if="editMode"
      ><input type="number" name="UserID" x-model="241" class="editable-input"
    /></template>
  </td>
  <td class="py-4 px-6 text-left">
    <template x-if="!editMode"><span x-text="1"></span></template
    ><span x-text="1">1</span
    ><template x-if="editMode"
      ><input type="number" name="EventID" x-model="1" class="editable-input"
    /></template>
  </td>
  <td class="py-4 px-6 text-left">
    <button
      x-show="!editMode"
      @click="editMode = true"
      class="k-button k-button-solid-primary px-4 py-2 font-semibold"
    >
      Update
    </button>
    <button
      x-show="editMode"
      @click="editMode = false"
      class="k-button k-button-solid-primary px-4 py-2 font-semibold"
      style="display: none"
    >
      Save
    </button>
  </td>
</tr>