我有一个简单的代码
<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中,我只需要reioturie riot,test.tag并执行riot.mount('#root', 'test');
这是init屏幕,为什么mount之前更新了?
当我第一次点击时,它会记录该更新被触发,但视图不会重新渲染
并在第二次单击后,触发事件更新并重新呈现视图
如果我在promise中取消注释this.update();
,则事件更新将触发两次
upd:如果删除this.books = books
并写this.update({books});
事件更新将触发两次,渲染将起作用,但为什么2次???
答案 0 :(得分: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