JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script id='template' type='text/ractive'>

{{# { list: listA } }}
  {{>list}}
{{/}}
{{# { list: listB } }}
  {{>list}}
{{/}}
    
{{JSON.stringify(listA)}}
{{JSON.stringify(listB)}}
    
<!-- {{>list}} -->
{{#list.length > 0}}
  <ul>
    {{#list}}
      <li><input value='{{.}}'/></li>
    {{/list}}
  </ul>
{{/}}
<!-- {{/list}} -->
    
</script>

JavaScript

new Ractive({
    el: document.body,
    template: '#template',
    data: {
        listA: ['a', 'b', 'c'],
        listB: ['d', 'e', 'f']
    }
})