JSFiddle - React, Tailwind, and code Playground

by alibaba

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script id='template' type='text/ractive'>
    
    <table border=1>
    {{#each rdata.shareitems:i}}
        {{#if filtershareitems(this)}}
        <tr>
            <td>{{i}}</td>
            <th>{{name}}</th>
            <td>
                <button on-click="remove(i)" >remove {{i}}</button>
            </td>
        </tr>
        {{/if}}
    {{/each}}
    
   
</script>

JavaScript

bwdata = {"shareitems":[{"id":267,"item_id":19,"code":"ABP","category":"Share","exclude":0,"name":"ABACUS PROPERTY GROUP","unit":3023,"price_current":3.14,"date_current":"2015-08-17 16:46:17"},{"id":267,"item_id":219,"code":"CBA","category":"Share","exclude":0,"name":"ANOTHER SHARE","unit":3023,"price_current":23.14,"date_current":"2015-09-17 16:46:17"}]};

var filtersshareitems = {
        exclude: function ( item ) { return item.exclude; },
        active: function ( item ) { return !item.exclude },
        all: function () { return true; },
        shares: function(item){return item.category=='shares'},
        etf: function(item){return item.category=='etf'}
    };

MyRactive = Ractive.extend({
    el: document.body,
    template: '#template',
    data: function () {
        return {
        rdata: bwdata
    }}
})

Ritems = new MyRactive({
    data:{
            filtersshareitems: filtersshareitems,
        currentFiltershareitems: 'all',
    },
    computed: {
            filtershareitems: function () {
                return filtersshareitems[ this.get( 'currentFiltershareitems' ) ];
            }
    },
	remove:function(n){
    	this.splice( 'rdata.shareitems', n, 1 );
    }
})