Created
February 17, 2016 06:12
-
-
Save darkcolonist/d6352f649e89fc9fd091 to your computer and use it in GitHub Desktop.
ractive.js sample implementation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title>Ractive Test</title> | |
| </head> | |
| <body> | |
| <h1>Ractive Test</h1> | |
| <div id="container"> | |
| </div> | |
| <script id="template" type="text/html"> | |
| <table> | |
| <tr> | |
| <th>#</th> | |
| <th>Name</th> | |
| <th>Gender</th> | |
| </tr> | |
| {{#each people:num}} | |
| <tr> | |
| <td>{{num+1}}</td> | |
| <td>{{name}}</td> | |
| <td>{{gender}}</td> | |
| </tr> | |
| {{/each}} | |
| </table> | |
| </script> | |
| <script src='http://cdn.ractivejs.org/0.7.3/ractive.js'></script> | |
| <script> | |
| var listOfPersons = [] | |
| var personsTable = new Ractive({ | |
| // The `el` option can be a node, an ID, or a CSS selector. | |
| el: '#container', | |
| // We could pass in a string, but for the sake of convenience | |
| // we're passing the ID of the <script> tag above. | |
| template: '#template', | |
| // Here, we're passing in some initial data | |
| data: { | |
| people: listOfPersons | |
| } | |
| }) | |
| listOfPersons.push({name:"Cris",gender:"male"}) | |
| listOfPersons.push({name:"John",gender:"male"}) | |
| listOfPersons.push({name:"Doe",gender:"male"}) | |
| listOfPersons[2].name = "Jane" | |
| listOfPersons[2].gender = "female" | |
| personsTable.update("people") | |
| </script> | |
| </body> | |
| </html> |
Author
darkcolonist
commented
Feb 17, 2016
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment