Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
      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)
    })
});
    </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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
saan1984pro
0viewers