Knockoutjs Demo1 - after Intro

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
Name: <input data-bind="value: name, valueUpdate: 'afterkeydown'"/>
<input type="checkbox" data-bind="checked: nameVisible"/>
<p>
    Hello, <span data-bind="text: name, visible: nameVisible"></span>
</p>

<div data-bind="text: string1() + string2()"></div>
<div data-bind="foreach: array2, css:{green: true}">
  <!--ko text: $data--><!--/ko-->
</div>
<div data-bind="css:{yellow: classFlag}">
 css test
</div>
<div data-bind="css: computedClass">
  Computed css
</div>
<div>
 Place for array
 <div data-bind="foreach: obsArray">
   <span data-bind="text: $data, click: function(data, event){$parent.clicked('proba1', 'proba2', data, event)}"></span>
   <!--ko text: $data--><!--/ko-->
 </div>
</div>
<button data-bind="click: changeName">Change Name</button>
<button data-bind="click: changeClass">
  Click to change class
</button>
<a href="www.google.com" data-bind="click: linkFunction">Link</a>
<div data-bind="click: okruzujuciDiv">
  Okruzujuci div
  <div data-bind="click: unutrasnjiDiv, clickBubble: false">
  Unutrasnji div
  </div>
</div>
<div data-bind="event: {mouseover: mouseOverMe}">
  Mouse over me
</div>
<form data-bind="submit: submitForm">
  Moja forma
  <input data-bind="enable: classFlag">
  <input data-bind="value: vrednostInputa, valueUpdate: 'input'">
  <span data-bind="text: vrednostInputa"></span>
</form>

<input data-bind="visible: !classFlag()">

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
    Preferred flavors of spam:
    <div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div>
    <div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div>
    <div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div>
</div>

<p>
    Choose some countries you would like to visit:
    <select...

CSS

.green{
  background: green;
}

.yellow{
  background: yellow;
}

JavaScript

$(function() {

var Country = function(name, population) {
        this.countryName = name;
        this.countryPopulation = population;
    };
    
    var viewModel = {
        name: ko.observable("Bob"),
        changeName: function() {
            this.name("Steve");
        },
        nameVisible: ko.observable(true),
        string1: ko.observable('bla'),
        string2: ko.observable('blaa'),
        array: [{num: 1}, {num: 2}, {num: 3}],
        array2: [1, 2, 3],
        classFlag: ko.observable(false),
        clicked: function(first, second, data, event){
        	console.log("clicked" + first + second);
        },
        linkFunction: function(){
        	console.log("link function");
          return true;
        },
        okruzujuciDiv: function(){
        	console.log("okruzujuci div");
        },
        unutrasnjiDiv: function(data, event){
        console.log(data);
        console.log(event);
        	console.log("unutrasnji div");
        },
        mouseOverMe: function(){
        	console.log('mouse is over me');
        },
        submitForm: function(form){
        	console.log(form);
        },
        vrednostInputa: ko.observable('blabla'),
        wantsSpam: ko.observable(true),
        spamFlavors: ko.observableArray(["cherry","almond"]), // Initially checks the Cherry and Almond checkboxes
 availableCountries : ko.observableArray([
            new Country("UK", 65000000),
            new Country("USA", 320000000),
            new Country("Sweden", 29000000)
        ]),
        selectedCountry : ko.observable(),
        afterOptionRender: function(option, data){
        	console.log(option);
          console.log(data);
        }
    };
    
    viewModel.changeClass = function(){
    	console.log("change class function");
      viewModel.classFlag(!viewModel.classFlag());
    };
    
    viewModel.computedClass = ko.computed(function(){
    	return viewModel.classFlag() ? 'yellow' : 'green';
    }, viewModel);
    
   ...