Обновление данных постфактум в AlpineJS - PullRequest
Новая
       19

Обновление данных постфактум в AlpineJS

0 голосов
/ 03 августа 2020

Я использую Alpine для отображения списка элементов, которые будут изменены. Но я не могу понять, как сказать Alpine обновлять sh список элементов, когда с сервера возвращается новый: 

<div x-data=" items() ">
    <template x-for=" item in items " :key=" item ">
        <div x-text=" item.name "></div>
    </template>
</div>

Первая «партия» элементов в порядке, потому что они жестко запрограммированы в функции items(): 

    function items(){
        return {
            items: [
                { name: 'aaron'  },
                { name: 'becky'  },
                { name: 'claude' },
                { name: 'david'  }
            ]
        };
    }

Некоторый код вне Alpine извлекает и получает совершенно новый список элементов, который я хочу отобразить вместо исходного набора. Я не могу понять, как и возможно ли это сейчас. Спасибо за любой указатель.

1 Ответ

1 голос
/ 03 августа 2020

Есть 3 способа решить эту проблему.

  1. Переместить выборку в контекст Alpine. js, чтобы он мог обновлять this.items
  function items(){
        return {
            items: [
                { name: 'aaron'  },
                { name: 'becky'  },
                { name: 'claude' },
                { name: 'david'  }
            ],
            updateItems() {
              // something, likely using fetch('/your-data-url').then((res) => )
              this.items = newItems;
            }
        };
    }
(Не рекомендуется) Из вашего кода JavaScript войдите в rootElement.__x.$data и установите __x.$data.items = someValue 
<script>
  // some other script on the page
  // using querySelector assumes there's only 1 Alpine component
  document.querySelector('[x-data]').__x.$data.items = [];
</script>
Запуск события на вашем JavaScript и прослушивание его на вашем Alpine. js компонент.

Обновление до Alpine. js компонент, примечание x-on:items-load.window="items = $event.detail.items": 

<div x-data=" items() " x-on:items-load.window="items = $event.detail.items">
    <template x-for=" item in items " :key=" item ">
        <div x-text=" item.name "></div>
    </template>
</div>

Код для запуска настраиваемого события, вам необходимо заполнить полезные данные. 

<script>
let event = new CustomEvent("items-load", {
  detail: {
    items: []
  }
});
window.dispatchEvent(event);
</script>
...