Tag Lifecycle

2. Lesson of RiotJS

There are a few event listeners we can listen to. Here is what they do and how to react.

Martin Muzatko Written by Martin Muzatko
on

Update

As you have seen on the previous lesson, we update the application every few seconds to cycle through a list. We have different events we can trigger or react to.

When a riot tag gets an update, it will update all expressions.

RIOT
<riot-timer>
    <div>
        {new Date()}
    </div>
    <script>
        setInterval(this.update, 1000)
    </script>
</riot-timer>
<script type="riot/tag"> <riot-timer> <div> \{new Date()\} </div> setInterval(this.update, 1000) </riot-timer> </script> <riot-timer></riot-timer>

If we need to load data after the tag has mounted, we can do that in the mount eventlistener and trigger an additonal update event, once we are done loading data.

RIOT
<riot-fetch-data>
    <script>
        this.on('mount', function() {
            fetch('https://jsonplaceholder.typicode.com/posts/9/comments')
                .then(() => { this.update() })
        })
    </script>
</riot-fetch-data>
Previous Lesson

Setting up Riot

In this first lesson you get to know how to enable Riot and write your first App.

Next Lesson

Iterating through your data

Looping was never easier. You don't even have to think about a way how to get data displayed as HTML via Javascript or call any rendering methods. Nope - all part of Riots magic.

See all Lessons