JSFiddle - React, Tailwind, and code Playground

by damngoto

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<h1>render ractive once in multipe async requests</h1>
<div id="c"></div>
<script type="template" id="tmpl">
    <datagrid></datagrid>
    <datagrid></datagrid>
    <datagrid></datagrid>
</script>

JavaScript

/*
DataGrid is a component that contains async request
*/
var DataGrid = Ractive.extend({
    template:'<ul>{{#datalist}}<li> {{.}}</li> {{/datalist}}</ul>',
    oninit: function(){
        var app = this
        // load init data by async request
        setTimeout(function() {
            app.set('datalist', [1, 3, 5])
            app.add('ajaxLoadedNum')
        }, 2000 * Math.random())
    }
})

Ractive.components.datagrid = DataGrid

var app = new Ractive({
    template: '#tmpl',
    data: {
        ajaxLoadedNum: 0,
        ajaxTotalNum: 3
    }
})

var listender = app.observe('ajaxLoadedNum', function(val, old){
    if (val == app.get('ajaxTotalNum')) {
        app.render('#c')
        listender.cancel()
    }
})