为什么我的 Riot JS 更新不起作用？

Question

所以我正在按照指南学习 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>

这是我的联系人-list.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 文件中正确检索数据，我的联系人列表数据就在那里。但是项目符号列表没有更新。它显示为空。

Answer 1

哦，没关系，伙计们，对不起。不知道视频中那个人的例子实际上是如何工作的。因为我必须在 html 触发事件上传递 data.people。否则我正在传递一个带有数组的平面对象。

Answer 2

使用回调函数有什么理由吗？

如果不是，请将回调函数移动到标签中，并在将获取的数据分配给标签变量后直接更新它。

查看 riotgear 中的来源： https://github.com/RiotGear/rg/blob/master/tags/rg-include/rg-include.tag

对我来说这是一个完美的例子。

为什么我的 Riot JS 更新不起作用？

why my Riot JS update isn't working?

tags

riot.js

riot