- In my previous post we have learnt the basics of Riot.js like precompilation using watcher.
- In this demo,”We will learn to use options object and AJAX call to load remote data and built a table”.
- For this demo we have used a Fake remote AJAX URL from random user site.The URL we have used for this example is as follows.http://api.randomuser.me/?results=3
- We have used Jquery for making AJAX call to download some random data.The following screenshot shows the installation of jquery using npm install jquery –save command.
- The dev/student-table.tag file has the code definition for student table.The following code shows the content of dev/student-table.tag file.
<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)
})
</student-table>
- We can create a watcher for listening to code changes in dev/student-table.js file and generates the compiled version in out/student-table.js file.The following screenshot shows the terminal with console messages for watchers.
- The generated compiled code out/student-table.js files are as follows.
riot.tag('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>', function(opts) {
var self = this
this.studentList = [];
opts.dataRequest.done(function(data){
self.studentList = data.results;
self.update(this.studentList)
})
});
- The index.html file contains the code for mounting the student-table.js file.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Riot.js Demo part4</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot.min.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script>html5.addElements('todo')</script>
<![endif]-->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="out/student-table.js"></script>
</head>
<body>
<student-table></student-table>
<script>
riot.mount('student-table',{
headers:[
{columnName:"First Name"},
{columnName:"Email"},
{columnName:"Nationality"},
{columnName:"Mobile No"}
],
dataRequest:$.get("http://api.randomuser.me/?results=3")
});
</script>
</body>
</html>
- The updated directory structure looks like following screenshot.
- The output of the above code looks like following screenshot.
- The output can be viewed in following JSBIN link.
- The demo code can be downloaded from following link.
https://github.com/saan1984/RiotDemoPart4
