JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id="userMenu"></div>

<script id='template' type='text/template'>
    <a href='#' on-click='addTab'>Add Tab</a>
    <my-component tabs='{{tabs}}'></my-component>
</script>

<script id='componentTemplate' type='text/template'>
    {{#each tabs:i}}
        <span intro='myTransition' outro='myTransition' on-mousedown='deleteTab:{{i}}'>{{.}}</span>
    {{/each}}    
</script>

CSS

span {
    vertical-align: top;
    cursor: pointer;
}

JavaScript

var MyComponent = Ractive.extend({
    template: '#componentTemplate',
    transitions: {
        myTransition: function(t, params){
            if(t.isIntro) {
                $(t.node).hide().slideDown(function(){
                    t.node.removeAttribute('style');
                    t.complete();
                });
            } else {
                $(t.node).slideUp(function(){
                    t.complete();
                });
            }
        }
    },
    init: function(){
        this.on('deleteTab', function (e, index) {
            ractive.splice('tabs', index, 1);
        });
    }
});

var ractive = new Ractive({
    el: 'userMenu',
    template: '#template',
    data: {
        tabs: []
    },
    components: {
        'my-component': MyComponent  
    }
});

var count = 0;

ractive.on('addTab', function () {
    this.push('tabs', 'New Tab ' + (++count));
});