why my Riot JS update isn't working?

Question

So I'm learning Riot JS, following a guide. Gives an example explaining step by step. And adds a "this.update()" to update the riot js variables. Now, it is working for him, but not for me. Can you guys tell me why?

Here's the code.

This is the 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>

And this is my contact-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>

After debugging with the console.logs I can see i'm retrieving data correctly from my JSON file, my contact list data is there. But the bullet list isn't updated. It's displayed empty.

score 1 · Answer 1 · answered Aug 24 '16 at 12:23

1

Is there any reason for using a callback function?

If not, move your callback function into the tag and update it directly after assigning your fetched data to your tags variable.

Look at the sources in riotgear: https://github.com/RiotGear/rg/blob/master/tags/rg-include/rg-include.tag

For me it was a perfect example.

answered Aug 24 '16 at 12:23

andreaslangsays

329
4
7

thanks for taking the time to help me. It was a code mistake.. see my answer above. Dunno how it worked for the guy in the tutorial – msqar Aug 24 '16 at 13:02

score -3 · Accepted Answer · answered Mar 03 '16 at 13:41

-3

Oh nevermind guys, sorry. Don't know how actually the example of the guy in the video worked. Because I had to pass data.people on the html trigger event. Otherwise i was passing a plane Object with an Array in it.

answered Mar 03 '16 at 13:41

msqar

2,940
5
44
90

2

I think you should follow up this post with the solution and mark it as an 'Answer' so other people get the benefit. Also, which guide are you following? I'm not sure I like the style of using custom events to pass data into the tag, instead of just passing the object as a parameter through the tag.update() function. – Gareth Oates Nov 28 '16 at 08:24
@Gareth Oates Why downvoting? I fixed it and explained how i solved it and marked it as solved aftewards. I'm not following ... – msqar Jan 18 '19 at 18:33

why my Riot JS update isn't working?

2 Answers2