JSFiddle - React, Tailwind, and code Playground

by fresheyeball

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.5/angular.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<div ng-controller="tableTest">
    Digest time : <span id="time">?</span>
    <button>Update</button>
    <br/>
    <table class="table table-striped">        
        <tbody>
            <tr ng-repeat="row in rows" row>
            </tr>
        </tbody>    
    </table>
</div>

CoffeeScript

moo = angular.module 'moo', []

COLUMNS_LENGTH = 5
ROWS_LENGTH    = 200

moo.directive 'row', ->
    restrict : 'A'
    link     : (scope, elem, attr) ->
        # we can assume that the number of columns is
        # not likely to change, so we can populate the 
        # html once.
        html = ''
        html += '<td></td>' for [0...scope.row.length]
        element = elem[0]
        element.innerHTML = html
        
        # then we store a reffernce to the cells
        # dom elements         
        cells = element.querySelectorAll 'td'
        
        # finally we manually set up a single watch
        # on the row and update the dom ourselves
        scope.$watch 'row', (val) ->
            return unless val
            cell.innerHTML = val[i] for cell, i in cells                            

moo.controller 'tableTest', ($scope) ->
    
    $scope.rows = []
    update = ->
        rand = Math.floor Math.random() * 5000
        $scope.rows.length = 0
        for i in [0...ROWS_LENGTH]
            $scope.rows.push ("cell #{rand} | #{j+1}, #{i+1}" for j in [0...COLUMNS_LENGTH])
    update()
    
    document.getElementsByTagName('button')[0].addEventListener 'click', ->        
        update()
        now = Date.now()
        $scope.$digest()
        document.getElementById('time').innerHTML = "#{Date.now()-now}ms"
        
    
angular.bootstrap document, ['moo']