How can I switch models used in x-for, without causing a catastrophe? #4247

Saeven · 2024-06-01T01:18:07Z

Saeven
Jun 1, 2024

Hello AlpineJS Community!

I've got a JS Bin here that evidences an issue I'm running into.
https://jsbin.com/gesusib/1/edit?html,output

I have a model that is used to populate some simple markup via x-for, but when I substitute the model's data (in this case with empty arrays and so forth) after it has initialized (successfully), it dies with a multitude of null references.

What is the correct approach to achieve what I'm after? The model is the way it is, because of how the various back-ends populate the template. Ideally, I can make this work with the structure in the JS Bin.

For completeness, code also below.

With thanks!

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="overflow-auto">
  <div x-data="Example()">
    <div class="w-full h-24 p-10">
      <button @click="switchModel" type="button" class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Switch Model</button>

    </div>
    <div class="p-10 space-y-32">
      <!-- template here for categories -->
      <template x-for="(category, id) in categories" :key="category.id">
        <section :id="category.id">
          <!-- section heading -->
          <div class="mb-6 relative flex items-center">
            <div x-text="category.title" class="text-lg leading-6 text-zinc-700"></div>
          </div>

          <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-10 sm:grid-cols-3 sm:gap-x-6 xl:grid-cols-6 xl:gap-x-8">
            <template x-for="recordId in category.records" :key="recordId">
              <p x-text="records[recordId].name || 'Title Not Set'" class="pointer-events-none mt-3 block truncate text-sm text-zinc-600"></p>
            </template>

          </ul>
        </section>
      </template>
    </div>
  </div>
  <script>
    function Example() {
      return {

        switchModel(){
            this.categories = [];
            this.records = {};
        },
        
        "categories": [{
          "id": 1,
          "title": "Sample Category",
          "position": -1,
          "records": [
            1,
            2,
            3,
            4,
            5
          ]
        },
        {
          "id": 2,
          "title": "Scenario Category",
          "position": 1,
          "records": [
            6,
            7,
            8,
            9
          ]
        },
        {
          "id": 3,
          "title": "New Category",
          "position": 2,
          "records": [
            10,
            11,
            12
          ]
        }
        ],
        "records": {
          "1": {
            "id": 1,
            "description": "Record 1",
            "name": "Record 1",
            "isPlayable": true,
          },
          "2": {
            id: 2,
            description: "Record 2",
            name: "Record 2",
            isPlayable: true,
          },
          "3": {
            id: 3,
            description: "Record 3",
            name: "Record 3",
            isPlayable: true,
          },
          "4": {
            id: 4,
            description: "Record 4",
            name: "Record 4",
            isPlayable: true,
          },
          "5": {
            id: 5,
            description: "Record 5",
            name: "Record 5",
            isPlayable: true,
          },
          "6": {
            id: 6,
            description: "Record 6",
            name: "Record 6",
            isPlayable: true,
          },
          "7": {
            id: 7,
            description: "Record 7",
            name: "Record 7",
            isPlayable: true,
          },
          "8": {
            id: 8,
            description: "Record 8",
            name: "Record 8",
            isPlayable: true,
          },
          "9": {
            id: 9,
            description: "Record 9",
            name: "Record 9",
            isPlayable: true,
          },
          "10": {
            id: 10,
            description: "Record 10",
            name: "Record 10",
            isPlayable: true,
          },
          "11": {
            id: 11,
            description: "Record 11",
            name: "Record 11",
            isPlayable: true,
          },
          "12": {
            id: 12,
            description: "Record 12",
            name: "Record 12",
            isPlayable: true,
          },
        }
      }
    }
  </script>
</body>
</html>

ekwoka · 2024-06-01T05:34:33Z

ekwoka
Jun 1, 2024

The issue is you're using recordId to access other data. So those things may not exist during a rerender.

Could just do records[recordId]?.name

10 replies

ekwoka Jun 3, 2024

It's really quite easy. Just don't try to iterate over and access keys.

Just directly iterate the values.

SimoTod Jun 3, 2024
Collaborator

Thanks @SimoTod - I had tried that, and just to demonstrate a greater waiting period: even splitting the process into two buttons evidences the issue;

https://jsbin.com/gesusib/3/edit?html,output

The first removes the output as expected (since the categories iterated on in the outer x-for are now gone) - and then clearing the records (second button) still causes a problem in console.

i see, there must be a bug that causes effects not to be releases when the x-for updates. Quite annoying

Saeven Jun 3, 2024
Author

My trouble is that the records array is quite large, and I was trying to save some memory space by storing one repository of records, and having the multiple categories "use" those records as needed from that central repo.

I'm guessing there's no way to tell Alpine to "clear" whatever buffer remains?

Saeven Jun 3, 2024
Author

I see the confusion, sorry - operator error on jsbin. Here's what I was discussing:
https://jsbin.com/gesusib/6/edit?html,output

ekwoka Jun 4, 2024

@SimoTod I actually started a PR to solve this a bit ago. I might finish it up.

It's not so much a "bug" just that the cleaning of the effects doesn't happen when x-for removes the element, but instead when the onElementRemoved hook processes it.

Since the records[id] makes the effect dependent on records, changing records queues that effect.

so it would be update x-for, update records[id] effect

x-for removes the element, which (depending on observer timing) queues a cleanup of the effects, but the active effect queue is already processing.

I'll finish up the PR. This can be updated on x-for, x-if, and x-teleport

99% of the time, the way that avoids the errors is actually just having a better design of the data. But sometimes that isn't possible...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How can I switch models used in x-for, without causing a catastrophe? #4247

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 10 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

How can I switch models used in x-for, without causing a catastrophe? #4247

Uh oh!

Uh oh!

Saeven Jun 1, 2024

Replies: 1 comment · 10 replies

Uh oh!

ekwoka Jun 1, 2024

Uh oh!

ekwoka Jun 3, 2024

Uh oh!

SimoTod Jun 3, 2024 Collaborator

Uh oh!

Saeven Jun 3, 2024 Author

Uh oh!

Saeven Jun 3, 2024 Author

Uh oh!

Uh oh!

ekwoka Jun 4, 2024

Saeven
Jun 1, 2024

Replies: 1 comment 10 replies

ekwoka
Jun 1, 2024

SimoTod Jun 3, 2024
Collaborator

Saeven Jun 3, 2024
Author

Saeven Jun 3, 2024
Author