JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id="placeholder"></div>

<script id="template" type="text/ractive">

<a href="#a" on-click="tab">Tab a</a>
<a href="#b" on-click="tab">Tab b</a>

<table>
  {{#each visible_products}}
  <tr>
    <td>{{.}}</td>
  </tr>

  {{#if others[selected_tab].length}}
  <tr>
    <td>
      <ul>
      {{#each others[selected_tab]}}
        <li>{{.}}</li>
      {{/each}}
      </ul>
    </td>
  </tr>
  {{/if}}

  {{/each}}
</table>

</script>

JavaScript

var ractive = new Ractive({
  el: "#placeholder",
  template: "#template",
  data: {
    products: {
      a: [1, 2, 3],
      b: [4, 5, 6]
    },
    others: {
      a: ['x', 'y', 'z']
    },
    selected_tab: 'a'
  }
});

ractive.on({
  tab: function(event) {
    var category = event.node.hash.replace(/#/, '');
    this.set('selected_tab', category);
    this.set('visible_products', this.get('products')[category]);
  }
});