JSFiddle - React, Tailwind, and code Playground

by tanvir_alam_shawn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/1.3.11/ractive.min.js"></script>
<div id="content"></div>

<script id="template"  type="text/ractive">
    <ul>
    {{#selectedFilters}} {{# { cage: . } }}
      <li>{{cage.name}} 
      {{#scores}} {{# {score: .} }}
        {{score.range1}} :: {{score.range2}}
      {{/}}{{/scores}}</li>
    {{/}}{{/selectedFilters}}
    </ul>
</script>

JavaScript

ractive = new Ractive({
  el: 'content',
  template: '#template',
  data: {
    selectedFilters: [
        {
        	name: "Cage 1", 
          scores:[
          	{
            	range1:20,
              range2:90,
            }
         	]
      	},
        {
        	name: "Cage 1"
        },
        {
          scores:[
          	{
            	range1:30,
              range2:20,
            }
         	]
        },
    ]
  }
});