TableView.on('rendered') stop working after a certain number of tables

[denzelchung]

I have a dashboard with 1 table and the following code works. It adds a CSS class to the tag as expected.

However, if I add more tables on the same dashboard, the code works on certain refreshes and not on others. I tried playing around with the timeout value and didn't manage to find a solution. With 1-3 tables in the dashboard, it works on the times I tried, but 4 or more tables will cause an erratic behavior.

 mvc.Components.get('table1').getVisualization(function(tableView) {
    setTimeout(function() {
        tableView.on('rendered', function() {
            // Populate dictionary with values from table
            var tableRows = tableView.$el.find('tbody').children();
            $.each(tableRows, function(index, row) {
                var children = $(row).children();
                var key = children.eq(0).text();
                var value = $.trim(children.eq(1).text());

                if (value == "0") {
                    $(row).addClass("range-down");
                }
                else {
                    $(row).addClass("range-ok");
                }
            });

            // Update table display
            tableView.render();
        })
    }, 100);
});

[denzelchung]

I used the cell renderer method and it also faces the same problem.

    var CustomCellRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for the time field
            return _(['time']).contains(cell.field);
},
        render: function($td, cell) {
            var value = cell.value;

            if (value == "0") {
                $td.addClass('range-cell').addClass("range-down");
            }
            else {
                $td.addClass('range-cell').addClass("range-ok");
            }

            $td.text(value);
        }
    });