JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<h3>This works</h3>
<ul data-bind="foreach: people">
    <li>
        <span data-bind="text: $data.name"></span> 
        <span data-bind="text: $data.age"></span>
    </li>
</ul>

<h3>This doesn't work</h3>
<ul data-bind="foreach: { data: people, as: 'person' }">
    <li>
        <span data-bind="text: person.name"></span> 
        <span data-bind="text: person.age"></span>
    </li>
</ul>

CSS

h3{font-size:20px;font-weight:bold;margin:10px 0 5px 10px;}

JavaScript

var data = [
    { name: 'Bob', age: 35 },
    { name: 'Sue', age: 24 },
    { name: 'Rick', age: 57 }
];

var model = function( data ){
    this.people = ko.observableArray( data );
}
ko.applyBindings( new model( data ) );