Ractive.js Tutorial 6-1

index.html

<!-- http://learn.ractivejs.org/list-sections/1 -->
 
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

<div id='container'></div>


<script id='template' type='text/ractive'>
  <table class='superheroes'>
    <tr>
      <th>Superhero name</th>
      <th>Real name</th>
      <th>SUperpower</th>
    </tr>

    {{#each superheroes}}
    <tr>
      <td><a href='{{info}}'>{{name}}</a></td>
      <td>{{realname}}</td>
      <td>{{power}}</td>
    </tr>
    {{/each}}
  </table>
</script>

Ractive.js-Tutorial-6-1.markdown

Ractive.js Tutorial 6-1

A Pen by Ken on CodePen.

License.

script.js

// var ractive, xmen;

var xmen = [
  { name: 'Nightcrawler', realname: 'Wagner, Kurt',     power: 'Teleportation',    info: 'http://www.superherodb.com/Nightcrawler/10-107/' },
  { name: 'Cyclops',      realname: 'Summers, Scott',   power: 'Optic blast',      info: 'http://www.superherodb.com/Cyclops/10-50/' },
  { name: 'Rogue',        realname: 'Marie, Anna',      power: 'Absorbing powers', info: 'http://www.superherodb.com/Rogue/10-831/' },
  { name: 'Wolverine',    realname: 'Howlett, James',   power: 'Regeneration',     info: 'http://www.superherodb.com/Wolverine/10-161/' }
];

var ractive = new Ractive({
  el: 'container',
  template: '#template',
  data: { superheroes: xmen }
});

ractive.set('superheroes[1].power', 'Martial arts');
ractive.set('superheroes.3.power', 'Enhanced senses');