JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<div id="main">
  
</div>

<script type="text/ractive" id ="roottemplate">
	<ul>
  	{{#tabs: i}}
    <li>
    		{{>dynamicPartial}}
    </li>
    {{/tabs}}
  </ul>
</script>

<script id="componenttemplate" type="text/ractive">
  <div>
    This is from component: {{name}}
  </div>
</script>

JavaScript

var ractive = new Ractive({

  el: '#main',
  template: '#roottemplate',
  partials: {
  	dynamicPartial: function() {
    	return this.components[ 'simplePartial1' ];
    },
    simplePartial1: '<div>This is simplePartial1</div>',
    simplePartial2: '<div>This is simplePartial2</div>'
  },
  components: {
  	'comp1': Ractive.extend({
        isolated: false,
        template: '#componenttemplate',
        data: {
        	name: 'comp1'
        }
      }),
      'comp2': Ractive.extend({
        isolated: false,
        template: '#componenttemplate',
        data: {
        	name: 'comp2'
        }

      })
  },
  data: {
    tabs: {},
    name: 'common'
  },
  oninit: function(){
  	var tabs = this.components;
    this.set('tabs', tabs);
  }
});

var componentFactory = function() {

}