rogersillito/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<div data-bind="foreach: teams">
  <h2 data-bind="text: name"></h2>
      <span data-bind="foreach: players">
        <h3 data-bind="text: name"></h3>
    <span data-bind="foreach: cars">

      <span data-bind="text: ($parentContext.$parentContext.$index()+1) + ', ' + ($parentContext.$index()+1) + ', ' + ($index()+1) +': '+ $data"></span>
      <br data-bind="visible: $index() < ($parent.cars.length - 1)" />
    </span>
  </span>
</div>

<script id="jsbin-javascript">
var TestViewModel = function() {
   this.teams = [
     {name:'Stoke City', players: [
       {name:'Jack Butland', cars:['Ford','Skoda']},
       {name:'Bojan Krkic', cars:['Seat','VW']}
     ]},
     {name:'Chelsea', players: [
       {name:'Asmir Begovic', cars:['Lada']},
       {name:'John Terry', cars:['Twatmobile','Peugeot']}
     ]},
     {name:'Liverpool', players: [
       {name:'Simon Mignolet', cars:['Seat','Skoda','Fiat','Land Rover']},
       {name:'Adam Lallana', cars:['Porsche']}
     ]}
   ];
};

ko.applyBindings(new TestViewModel());
</script>


<script id="jsbin-source-javascript" type="text/javascript">var TestViewModel = function() {
   this.teams = [
     {name:'Stoke City', players: [
       {name:'Jack Butland', cars:['Ford','Skoda']},
       {name:'Bojan Krkic', cars:['Seat','VW']}
     ]},
     {name:'Chelsea', players: [
       {name:'Asmir Begovic', cars:['Lada']},
       {name:'John Terry', cars:['Gimpmobile','Peugeot']}
     ]},
     {name:'Liverpool', players: [
       {name:'Simon Mignolet', cars:['Seat','Skoda','Fiat','Land Rover']},
       {name:'Adam Lallana', cars:['Porsche']}
     ]}
   ];
};

ko.applyBindings(new TestViewModel());</script></body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<div data-bind="foreach: teams">
	<h2 data-bind="text: name"></h2>
	<span data-bind="foreach: players">
	<h3 data-bind="text: name"></h3>
	<span data-bind="foreach: cars">

	<span data-bind="text: ($parentContext.$parentContext.$index()+1) + ', ' + ($parentContext.$index()+1) + ', ' + ($index()+1) +': '+ $data"></span>
	<br data-bind="visible: $index() < ($parent.cars.length - 1)" />
	</span>
	</span>
	</div>

	<script id="jsbin-javascript">
	var TestViewModel = function() {
	this.teams = [
	{name:'Stoke City', players: [
	{name:'Jack Butland', cars:['Ford','Skoda']},
	{name:'Bojan Krkic', cars:['Seat','VW']}
	]},
	{name:'Chelsea', players: [
	{name:'Asmir Begovic', cars:['Lada']},
	{name:'John Terry', cars:['Twatmobile','Peugeot']}
	]},
	{name:'Liverpool', players: [
	{name:'Simon Mignolet', cars:['Seat','Skoda','Fiat','Land Rover']},
	{name:'Adam Lallana', cars:['Porsche']}
	]}
	];
	};

	ko.applyBindings(new TestViewModel());
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var TestViewModel = function() {
	this.teams = [
	{name:'Stoke City', players: [
	{name:'Jack Butland', cars:['Ford','Skoda']},
	{name:'Bojan Krkic', cars:['Seat','VW']}
	]},
	{name:'Chelsea', players: [
	{name:'Asmir Begovic', cars:['Lada']},
	{name:'John Terry', cars:['Gimpmobile','Peugeot']}
	]},
	{name:'Liverpool', players: [
	{name:'Simon Mignolet', cars:['Seat','Skoda','Fiat','Land Rover']},
	{name:'Adam Lallana', cars:['Porsche']}
	]}
	];
	};

	ko.applyBindings(new TestViewModel());</script></body>
	</html>