knockout.js Template binding

This demo shows you how to bind templates using knockout

by AlexJsh02

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery..min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<table id="personTable" class="table table-bordered table-condensed">
  <thead>
    <tr><th class="hidden">ID</th><th>First</th><th>Last</th><th>Gender</th></tr>
  </thead>
  <tbody data-bind="template: { name: 'person-tbody', foreach: $data.person }"></tbody>
</table>
<div data-bind="text: $index">
</div>
<script id="person-tbody" type="text/html">
    <tr>
    	<td data-bind="text: -id"></td>
      <td data-bind="text: firstName"></td>
      <td data-bind="text: lastName"></td>
      <td data-bind="text: gender"></td>
    </tr>
</script>

JavaScript

var jsonData ='[
  {
    _id: "577abf658a931e595fdc224e",
    firstName: "Nicole",
    lastName: "Craft",
    gender: "female"
  },
  {
    _id: "577abf659ec5198c0c566321",
    firstName: "Alberta",
    lastName: "Beard",
    gender: "female"
  },
  {
    _id: "577abf65cf9b78c1078a4788",
    firstName: "Moon",
    lastName: "Curry",
    gender: "male"
  },
  {
    _id: "577abf65122df836878dc3b0",
    firstName: "Head",
    lastName: "Buck",
    gender: "male"
  },
  {
    _id: "577abf654d780c014181a0fb",
    firstName: "Ann",
    lastName: "Mcdaniel",
    gender: "female"
  }
]';
var viewModel = function(data) {
   var self = this;
   self.person = ko.observableArray($.map(data, function (item, index) {
		return [item._id, item.firstName, item.lastName, item.gender];
};

ko.applyBindings(new viewModel(jsonData));