We will start by working with an unbound array. You will see that Knockout is smart enough to still work with the array and display the contents correctly. In fact, the array we will start out with will be an array with nested data. Add the highlighted data to the script section of our page:
myVM = {
showDetails: ko.observable(false),
employee: [
{name:"John Jones", spouse: { name: "Mary Jones"}},
{name:"Bill Williams", spouse: null},
{name:"Sandy Rivers", spouse: { name: "Mark Rivers"}},
]
}The employee array data will automatically bind to the MVVM system when we run our applyBindings function on the page. We will need some markup to tell us that it has actually worked. I suggest separating the section of content on the page using the <hr/> tag just for clarity. Now add the following code to the markup section:
<ul data-bind="foreach: employee">
<li>Employee: <strong data-bind="text:name"></strong>
<div data...
