所以我正在按照指南学习 Riot JS。给出了一个例子,一步步解释。 并添加一个“this.update()”来更新 riot js 变量。现在,这对他有用,但对我不起作用。大家能告诉我为什么吗?
这是代码。
这是index.html
<body>
<script src="bower_components/riot/riot.min.js" type="text/javascript"></script>
<script src="tags/all.js" type="text/javascript"></script>
<contact-list></contact-list>
<script>
riot.mount('contact-list', {callback: tagCallback});
function tagCallback(theTag) {
console.log('callback executed');
var request = new XMLHttpRequest();
request.open('GET', 'people.json', true);
request.onload = function() {
if(request.status == 200) {
var data = JSON.parse(request.responseText);
console.log(data);
theTag.trigger('data_loaded', data);
}
}
setTimeout(function() {
request.send();
},2000);
}
</script>
</body>
这是我的联系人列表.tag
<contact-list>
<h1>Contacts</h1>
<ul>
<li each={p in opts.people}>{p.first} {p.last}</li>
</ul>
<script>
this.on('mount', function() {
console.log('Riot mount event fired');
opts.callback(this);
})
this.on('data_loaded', function(peeps) {
console.log(peeps);
opts.people = peeps;
this.update();
})
</script>
</contact-list>
使用 console.logs 进行调试后,我可以看到我正在从 JSON 文件中正确检索数据,我的联系人列表数据就在那里。但项目符号列表未更新。显示为空。
使用回调函数有什么理由吗?
如果没有,请将回调函数移至标签中,并在将获取的数据分配给标签变量后直接更新它。
查看riotgear中的来源: https://github.com/RiotGear/rg/blob/master/tags/rg-include/rg-include.tag
对我来说这是一个完美的例子。
哦,没关系,抱歉。不知道视频中那个人的例子实际上是如何运作的。因为我必须在 html 触发事件上传递 data.people 。否则我传递的是一个带有数组的平面对象。