Ractive.js Tutorial 6-5

index.html

<!-- http://learn.ractivejs.org/list-sections/5 -->

<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>#</th>
      <th class='sortable {{ sortColumn === "name" ? "sorted" : "" }}' on-click='sort:name'>
        Superhero name
      </th>

      <th class='sortable {{ sortColumn === "realname" ? "sorted" : "" }}' on-click='sort:realname'>
        Real name
      </th>

      <th class='sortable {{ sortColumn === "power" ? "sorted" : "" }}' on-click='sort:power'>
        Superpower
      </th>
    </tr>

    {{#each sort( superheroes, sortColumn ) :num}}
      <tr>
        <td>{{ num + 1 }}</td>
        <td><a href='{{info}}'>{{name}}</a></td>
        <td>{{realname}}</td>
        <td>{{power}}</td>
      </tr>
    {{/each}}
  </table>
</script>

Ractive.js-Tutorial-6-5.markdown

Ractive.js Tutorial 6-5

A Pen by Ken on CodePen.

License.

script.js

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,
    sort: function(array, column){
      array = array.slice(); // clone, so we don't modify the underlying data

      return array.sort(function (a, b){
        return a[column] < b[column] ? -1 : 1;
      });
    },
    sortColumn: 'name'
  }
});

ractive.on('sort', function(event, column) {
  this.set('sortColumn', column);
});