Обновление шаблона из события асинхронного обновления в riotjs

Я использую RiotJS для своих тегов шаблонов, и мне трудно со следующим примером:

Родительский компонент:

<button onclick={ this.showUser } value="123">Chuck</button>
<button onclick={ this.showUser } value="456">John</button>

<user-card user-id={ this.userId }></user-card>

<script>
  this.showUser = (event) => {
    this.userId = event.target.value
  }
</script>

Компонент карточка пользователя:

<user-card>
  <p>Welcome { this.user.firstname }</p>

  <script>
    this.on('mount', this.update)

    this.on('update', async () => {
      const response = await request(`http://localhost:3579/user/${this.opts.userId}`)
      this.user = response.data  // response.data: { "firstname": "Chuck" }
      this.update()  // Refresh the template
    })
  </script>
</user-card>

Метод update() автоматически вызывается Riot. Riot обновляет шаблон после вызова on('update'). Поскольку мой метод является асинхронным, я должен вручную обновить шаблон, вызывающий this.update().

Проблема:, вызывающий this.update(), также вызывает on('update') и, следовательно, выполняет рекурсию.

Я, вероятно, мог бы использовать флаг, но я уверен, что должен быть более элегантный / удобный способ сделать это с помощью Riot (например, обновить только шаблон без повторного вызова on('update')).

Намек?

1
0
106
1

Ответы 1

Глядя на ваш пример, я думаю, вы можете переместить код, который вы обновляете, в дочерний компонент и обновить только дочерний компонент, например:

<user-card>
  <user-card-message message={ this.user.firstname }></user-card-message>

  <script>
    this.on('mount', this.update)

    this.on('update', async () => {
      const response = await request(`http://localhost:3579/user/${this.opts.userId}`)
      this.user = response.data  // response.data: { "firstname": "Chuck" }
      this.tags['user-card-message'].update()  // Refresh the template
    })
  </script>
</user-card>

Это действительно сработало бы, но это образец архитектуры для всего проекта; поэтому было бы неразумно создавать дочерний компонент каждый раз, когда вам нужна асинхронная функция. Я закончил тем, что создал github.com/polight/lego - простой реактивный бунт вроде lib, который может обрабатывать такие базовые вещи.

vinyll 27.07.2019 20:27

Другие вопросы по теме