Dynamic Components

Dynamically Show components

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script id='template' type='text/ractive'>
   
   	<input type="text" id="foo" placeholder="foo"/>
    <input type="text" id="template" placeholder="template"/>
   	<button>Create Component</button>
    <br/>
    {{#tabs}}
    	<input type='radio' name='{{selection}}' value='{{.}}'>{{.}}
     	<dynamic selection='{{.}}'/>
    {{/tabs}}
    <br>
    
       
</script>

<div id="main">

</div>

JavaScript

Ractive.components.a = Ractive.extend({ template: 'I am A {{foo}}', data: {
	"foo": "not A foo"
} });
Ractive.components.b = Ractive.extend({ template: 'I am B {{foo}}', data: {
	"foo": "not B foo"
} });
Ractive.components.c = Ractive.extend({ template: 'I am C {{foo}}' , data: {
	"foo": "not C foo"
}});

Ractive.components.dynamic = Ractive.extend({
    template: '<div><component/></div>',
    components: {
        component: function() {
            return this.components[this.get('selection')];
        }
    },
    oninit: function(){
        this.observe('selection', function(){
            this.reset();
        }, { init: false});
    }
});


var r = new Ractive({
    el: '#main',
    template: '#template',
    data: {
        foo: 'foo',
        tabs: ['a', 'b', 'c'],
        selection: 'a'
    }
});

r.on('click', componentFactory.bind(this, {template: this.get('template'), data:{}}))
var componentFactory = function(options) {
	return Ractive.extend(options);
}