Блог

Как AlpineJS повторно отображает шаблон?

 <script>let contacts = [];</script>
<div x-data="{ persons: contacts }">
    <template x-for=" person in persons ">
        <div x-text=" person "></div>
    </template>            
    <button x-on:click="contacts.push('Jack'); persons = contacts; console.log(persons.length);">Click</button>
</div>
 

Я ожидал, что div будет содержать несколько текстов Jack on click.

В вашем случае / примере contacts находятся вне области действия Alpine, после запуска компонента он находится в своем собственном пузыре, все, что находится за пределами области действия компонента x-data , не вызовет повторной визуализации.

Если вы измените contacts.push('Jack'); на persons.push('Jack'); , это вызовет повторный рендеринг.

Возможно, это не самый эффективный способ, но у меня была похожая проблема, и для ее решения я использовал функцию get, вдохновленную этим.

Мой вариант использования заключается в следующем:

JS:

 get updatedState() {
      var config_state = [];
      #update your data here 
      return config_state;
}
 

HTML:

 <template x-for="config in updatedState">
#Do what you want here
</template>
 

Каждый раз, когда ваши данные изменяются, ваш цикл будет обновлять данные