Getting Started With Riot.js Part5 -Tutorial Savvy

In my previous post we have learnt options object in Riot.js example.
In this Demo, “We will learn Riot.js custom tag life cycle events mount,updated and unmount”.
We will use the same example from my previous post which renders a student table in the browser.The only change we need to do here is to attach event listener callback method that can be executed when these life cycle events are fired.
To reiterate we have copied the code to RiotDemoPart5 directory and the structure looks like following screenshot.

The updated student table tag definition is present in dev/student-table.tag file.The following code shows the content of student-table.tag file is as follows.

<student-table>
    <h1>Student Table</h1>
    <table border="1">
        <thead>
            <tr>
                <th each={opts.headers}>
                    {columnName}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr each={studentList}>
                <td>{user.name.first}</td>
                <td>{user.email}</td>
                <td>{user.nationality}</td>
                <td>{user.cell}</td>
            </tr>
        </tbody>
    </table>
    var self = this
    this.studentList = [];
    opts.dataRequest.done(function(data){
        self.studentList = data.results;
        self.update(this.studentList)
    })

    this.on('mount', function() {
        console.log("Custom tag is mounted")
    })

    this.on('update', function() {
        console.log("Custom tag is updated")
    })

    this.on('unmount', function() {
        console.log("Custom tag is un-mounted")
    })
</student-table>

The output of the above code looks like following screenshot.We can find the console messaged in the chrome developer console which are printed when the student-table is mounted and updated.The update event is caused due to the AJAX call done to load data.