2

我有一个简单的代码

<test>
<ul>
  <li each={ books }> { title }</li>
</ul>

<button type="button" name="button" onclick={ loadBooks }>Load books</button>

<script>
  'use strict';

  this.books = [];
  let offset = 0;

  this.on('mount', () => {
    console.log('mounted');
  });

  this.on('update', () => {
    console.log('updated');
  });

  loadBooks ()  {
    fetch('/api/books?limit=10&offset='+offset)
    .then(response => response.json())
    .then(books => {
      offset+=10;
      this.books = books;
      // this.update();
    })
    .catch(err => console.log(err));
  }
</script>

在我的 app.js 中,我只需要 riot,test.tag 并且riot.mount('#root', 'test'); 这是初始化屏幕,为什么在 mount 之前触发更新? 在此处输入图像描述 当我第一次点击时,它记录了更新触发但视图没有重新渲染 在此处输入图像描述 ,第二次点击后,事件更新触发并重新渲染了视图 在此处输入图像描述 在此处输入图像描述

如果我this.update();在承诺中取消注释,事件更新将触发两次

upd:如果删除this.books = books和写入this.update({books});事件更新将触发两次,并且渲染将起作用,但为什么是 2 次???

4

1 回答 1

2

1)update之前mount:这是在@next / 3.0.0中修复的,根据:https ://github.com/riot/riot/issues/1661

2)为什么是 2x update:可能,一个来自标签,一个来自子标签。这是在这里问的:https ://muut.com/i/riot-js/using:why-update-event-is-trigg

于 2016-08-27T17:32:43.320 回答