JSFiddle - React, Tailwind, and code Playground

by ethan_selzer

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.min.js"></script>
<script type="text/x-handlebars" data-template-name="index">
    <h4 {{action "addResults"}}>click me</h4>
    {{#each quartet in quartets}}
    <table>
        <tr>
            {{#each quartet}}
            <td>this{{id}}</td>
            {{/each}}
        </tr>
    </table>
    {{/each}}
</script>

JavaScript

window.App = Ember.Application.create();

App.IndexController = Ember.Controller.extend({

    quartets : Ember.A([]),    

    results : Ember.A([]),

    addResults : function(){
        // this is an action
        for( var x=0 ; x<10 ; x++ ){
            var result = Ember.Object.create({ id : this.get( 'results.length' ) });
            this.get( 'results' ).addObject( result );
        }    
    },
    
    onResultsChanged : function(){
        var quartets = this.get( 'quartets' );
        var results = this.get( 'results' );
        var i = countResultsInQuartets( quartets );
        
        var lastQuartet = quartets.get( 'lastObject' );
        if( lastQuartet && lastQuartet.length !== 4 ){
            var needed = 4 - lastQuartet.length;
            var added = results.slice( i, i+needed );
            lastQuartet.addObjects( added );
            i = i + added.length;
        }
        
        while( i < results.length ){
            quartets.addObject( results.slice( i, i+4 ) );
            i = i + 4;
        }
    }.observes( 'results.[]' )
    
});

function countResultsInQuartets( quartets ){
    var c = quartets.length;
    if( c === 0 ){
        return 0;
    }
    return (c-1)*4 + quartets.get( 'lastObject.length' );
}