Knockoutjs.com - Templating example

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

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 <ul data-bind="foreach: headers">
        <li data-bind="text: title,css:{'active':active}"></li>
  </ul>

CSS

.active {
  background-color:red;
}

JavaScript

$(function () {
  var MainViewModel = function () {
     var self = this;
     self.headers = [
            { title: 'Item 1', sortKey: 'item1', asc: true, active: false },
            { title: 'Item 2', sortKey: 'item2', asc: false, active: true },
            { title: 'Item 3', sortKey: 'item3', asc: true, active: false},
            { title: 'Item 4', sortKey: 'item4', asc: true, active: false }
        ];
 
  }
  ko.applyBindings(new MainViewModel());

})