Support for Symbol.iterator using x-for? #2005

brycekbargar · 2021-09-01T19:31:41Z

brycekbargar
Sep 1, 2021

How hard would it be to support Symbol.iterator using the x-for directive? I tried digging around in the source but got kind of lost in the evaluateItems method.

Is there another way I can use Symbol.iterator with Alpine or should I be sticking to plain arrays?

Here's a minimal reproduction of what I'm trying to do.

<!DOCTYPE html>
<html>
  <script defer src="https://unpkg.com/[email protected]/dist/cdn.js"></script>
</html>
<body>
  <div x-data="{ list: new ListOfThings(), array: [], name: '' }">
    <h3>Iterator</h3>
    <ul>
      <template x-for="thing in list">
        <li x-text="thing.name"></li>
      </template>
    </ul>
    <h3>Array</h3>
    <ul>
      <template x-for="thing in array">
        <li x-text="thing"></li>
      </template>
    </ul>
    <input type="text" x-model="name" />
    <button @click="list.push(name); array.push(name); name = ''">Add</button>
  </div>

  <script>
    class ListOfThings {
      internalList = [];
      push(name) {
        this.internalList.push({
          name: name,
        });
        console.log(...this);
      }
      [Symbol.iterator]() {
        return this.internalList[Symbol.iterator]();
      }
    }
  </script>
</body>
```

brycekbargar · 2021-09-01T21:03:50Z

brycekbargar
Sep 1, 2021
Author

Figured it out! Spreading the object that implements Symbol.iterator into a "real" array works as expected. Curious if there are any footguns with this approach?

<template x-for="thing in [...list]">
        <li x-text="thing.name"></li>
</template>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Support for Symbol.iterator using x-for? #2005

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Support for Symbol.iterator using x-for? #2005

Uh oh!

brycekbargar Sep 1, 2021

Replies: 1 comment

Uh oh!

brycekbargar Sep 1, 2021 Author

brycekbargar
Sep 1, 2021

brycekbargar
Sep 1, 2021
Author