foreach issue

by jeljeljel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<div data-bind="template: { name: 'template', data: $data }"></div>

<script type="text/html" id="template">
    <table>
        <tbody data-bind="foreach: rows()">
            <tr data-bind="foreach: cells, attr: { rowid: entityId }">
                <td data-bind="text: $data"></td>
            </tr>
        </tbody>
    </table>
</script>

JavaScript

function DataModel() {
    var self = this;
    self.data = ko.observableArray([{
        entityId: 1,
        props: {
            name: 'Name 1',
            lastLogin: '8/5/2012'
        }
    }, {
        entityId: 2,
        props: {
            name: 'Name 2',
            lastLogin: '2/8/2013'
        }
    }]);
    self.rows = ko.computed(function () {
        var rows = [];
        var data = self.data();
        for (index in data) {
            var datarow = data[index];
            var row = {
                entityId: datarow.entityId,
                cells: []
            };
            rows.push(row);
            for (name in datarow.props)
            if (datarow.props.hasOwnProperty(name)) row.cells.push(datarow.props[name]);
        }

        return rows;
    });
}

var dataModel = new DataModel();
ko.applyBindings(dataModel);