Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table class="table" id="mytable">
  <thead>
    <tr>
     <th>Select</th>
      <th>Id</th>
      <th>First</th>
      <th>Last</th>
      <th>Dept</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JavaScript

function employee(id, firstName, lastName, dept, active) {
    var self = this;
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
    this.dept = dept;
    this.active = active;
}

function model() {
  var self = this;
  this.employees = [];
}

var mymodel = new model();

$(document).ready(function() {
  mymodel.employees.push(new employee('1','Clara','Dellinger','IT',false));
  mymodel.employees.push(new employee('2','John','Smith','HR',false));
  mymodel.employees.push(new employee('3','Fred','Jones','Finance',false));
  mymodel.employees.push(new employee('4','Mary','Jans','Finance',false));
  mymodel.employees.push(new employee('5','Bob','Jones','IT',false));
  mymodel.employees.push(new employee('6','Fred','Thebes','HR',false));
  mymodel.employees.push(new employee('7','Sally','Jane','HR',false));
  mymodel.employees.push(new employee('8','Patrick','Roberts','HR',false));
  mymodel.employees.push(new employee('9','Lisa','Myers','Lab',false));
  mymodel.employees.push(new employee('10','Roscoe','Coletrain','Security',false));
 var table = $('#mytable').DataTable( {
    data: mymodel.employees,
   columns: [
          {
                data:   'active',
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            },
        { data: 'id' },
        { data: 'firstName' },
        { data: 'lastName' },
       { data: 'dept' }
    ], 
      rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.editor-active', row).prop( 'checked', data.active );
        }
});

$('#mytable tbody').on('click', 'input[type="checkbox"]', function(e){
   var active = $(this).prop('checked');
   var $row = $(this).closest('tr');
   var...