Question

我将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>

Riot自动调用update()方法。调用on('update')之后，Riot更新模板。由于我的方法是异步的，因此必须手动刷新调用this.update()的模板。

问题：调用this.update()也会调用on('update')，因此会递归。

我可能会使用 flag ，但是我敢肯定，要使用Riot，必须有一种更为优雅/便捷的方法（例如仅更新模板而不调用{{1} }）。

有任何提示吗？

Answer 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>

从RiotJS中的异步更新事件刷新模板

1 个答案: