Something like x-for but for repeating contents of an attribute?

[trusktr]

Hello! I'm working on Lume, and with Lume elements we can do this:

<lume-instanced-mesh
  has="box-geometry"
  colors="
    deeppink
    cyan
    yellow
  "
  positions="
    1 2 3
    4 5 6
    7 8 9
  "
></lume-instanced-mesh>

where this will render three boxes on the screen, in three different colors, and at three different positions in 3D space (x y z).

It would be useful to be able to repeat the content of an attribute. I didn't see a way in the docs.

How might a new feature look like? Kinda tricky to make this one ergonomic.

<lume-instanced-mesh
  x-attr-positions-for="location in locations" positions="location.position +' '"
  x-attr-colors-for="location in locations" colors="location.color +' '"
></lume-instanced-mesh>

or

<lume-instanced-mesh>
  <x-repeat-attr attr="positions" for="location in locations" value="location.position + ' '"></x-repeat-attr>
  <x-repeat-attr attr="colors" for="location in locations" value="location.color + ' '"></x-repeat-attr>
</lume-instanced-mesh>

[ekwoka]

Would probably be smart to put them into actual data, but assuming they HAVE to be in the attributes

<template x-for="box in [$el.getAttribute('colors').trim().split('\n'), $el.getAttribute('positions').trim().split('\n')].reduce((a,b) a.flatMap(color => b.map(pos => ({ color, pos })))">
  <div x-text="box"></div>
</template>

I believe you could also just directly use :colors and then use Alpine.bound to get the colors, but it won't really make the code much shorter realistically.

[trusktr]

I'm not sure what you mean. What I'm describing is this:

Suppose that locations is an global variable containing an array. Now I want to write HTML that iterates that array to produce the content of a positions attribute on some element. I don't want to read from the attribute on an element.

<script>
  var locations = [...]
</script>

<some-element some-attribute="... fill this attribute with values based on that locations array ..."></some-element>

[SimoTod]

I would use a getter https://codepen.io/SimoTod/pen/mdaVNMp

[trusktr]

Oh! This works:

<script>
  var colors = ['red', 'green', 'blue']
</script>

<template x-data x-for="color in colors">
  <div x-text="color"></div>
</template>

<script defer src="alpine.js"></script>

(added empty x-data and it started working!)

[trusktr]

Aha!!!!!! And this works too!!

<script>
  var colors = ['red', 'green', 'blue']
</script>

<template x-data x-for="color in colors">
  <div x-text="color" :some-attr="colors"></div>
</template>

<script defer src="alpine.js"></script>

The some-attr attributes will contain "red,green,blue"! Thanks for the hints!

[ekwoka]

Yup, just use constinstead :)

[trusktr]

Not using? 😄

What if I want to change the value later? Seems like Alpine.data is needed for that, for reactivity, while what I did is only good for initial values.

[ekwoka]

Yes, or Alpine.reactive if you want to be more custom about it. But you should probably use data.