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.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<ul class="list-group" data-bind="foreach: users">
<!-- ko ifnot: username() === 'x' -->
    <li class="list-group-item" data-bind="click : $parent.setasUser">
        <i class="fa fa-circle text-success"></i> <span data-bind="text: name"></span>
    </li>
  <!-- /ko -->
  <!-- ko if: username() === 'x' -->
  <li class="list-group-item" data-bind="text: name"> </li>
   <!-- /ko -->
</ul>

JavaScript

function user(id, username, name) {
  var self = this;
  this.id = ko.observable(id);
  this.username = ko.observable(username);
  this.name = ko.observable(name);
}

function model() {
  var self = this;
  this.users = ko.observableArray([
    new user('1','Joe', 'Joe'),
    new user('2','Fred', 'Fred'),
     new user('3','x', 'John')
  ]);
  
  this.setasUser = function(user){
    alert(user.name() + ' is set as user');
  }
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});