JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.js"></script>
<h3>Products</h3>
<ul data-bind="foreach: products">
<li>
<strong data-bind="text: name"></strong>
—
Last updated: <em data-bind="text: $parent.lastUpdated"></em>
</li>
</ul>
CSS
body { font-family: Arial, Helvetica; margin: 5px; }
h3 { margin-top: 0 }
JavaScript
function appViewModel() {
this.products = ko.observableArray([
{ name: "XBox", manufacturer: { company: "Microsoft" } },
{ name: "PlayStation", manufacturer: { company: "Sony" } },
{ name: "Banana", manufacturer: null },
{ name: "Wii", manufacturer: { company: "Nintendo" } },
{items: ko.observableArray(
{item:"Item1"}, {item:"Item2"},
)}
]);
this.items=ko.observableArray(
{item:"Item1"}, {item:"Item2"},
);
this.lastUpdated = "Yesterday";
};
ko.applyBindings(new appViewModel());