Semantic UI - Ractive Component - Accordion

Accordion

by vikikamath

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<script id="templ" type="text/ractive">
		<div class="ui {{classes.join(' ')}} accordion">
    	{{#tabs:i}}
  		<div class="{{#active}}active{{/active}} title" on-click="boom:{{i}}">
    		<i class="dropdown icon"></i>
        {{title}}
  		</div>
  		<div class="{{#active}}active{{/active}} content">
      {{>cont}}
  		</div>
      {{/tabs}}
   </div>
   
</script>

<main></main>

JavaScript

var Settings = Ractive.extend({
	template: '<div>This is a setting</div>'
})

var Actions = Ractive.extend({
	template: '<div>This is an action</div>'
})

var MyAccordion = Ractive.extend({
	template: '#templ'
  ,oninit () {
  	var self = this;
    
    self.on('boom', function(_,i){
    	var keyPath = 'tabs.'+i+'.active'
    	self.set(keyPath, !self.get(keyPath) )
    })
  }
})


var Container = Ractive.extend({
	template: '<MyAccordion tabs="{{tabs}}" classes="{{[\'styled\', \'fluid\']}}"/>'
  ,partials: {
  	inline: '<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>'
    ,settings: '<Settings name="Va" text="bcbdscbd"/>'
    ,actions: '<Actions name="Va" text="bcbdscbd"/>'
  }
  ,components: {
  	MyAccordion: MyAccordion
  	,Settings: Settings
    ,Actions: Actions
  }
  ,data () {
  	return {
    	classes: []
    	,tabs: [
      	{
        	title: 'Using Partial with text'
          ,cont: 'inline'
          ,active: false
          
        }
        , {
        	title: 'Using Partial with Settings component'
        	//,content: 'embeddedComponent'
          ,cont: 'settings'
          ,active: false
        }
        , {
        	title: 'Using Partial with Action component'
        	//,content: 'embeddedComponent'
          ,cont: 'actions'
          ,active: false
        }
      
      ]
    }
  }
})

new Ractive({
  el: 'main'
  ,template: '<Container/>'
  ,components: {
  	Container: Container
  }
})