foreach issue

by ovfiddle

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: {data: data, as: '_data'}">
            <tr data-bind="foreach: {data: Object.keys(props), as: '_propkey'}">
                <th data-bind="text: _propkey"></th>
                <td data-bind="text: _data.props[_propkey]"></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'
        }
    }]);
}

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