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

<p>
    <span data-bind="text: label"></span>
    
    <i class="fa fa-spinner fa-spin  fa-fw" data-bind="visible: availableCountries().length < 1"></i>
    
    
    <select data-bind=" visible: availableCountries().length > 0,
                       select2: selectedCountry,
                       select2Data: availableCountries"></select>
</p>

<p>
  You Chose:  <span data-bind="text: selectedCountry"
</p>

JavaScript

ko.bindingHandlers.select2 = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
         ko.bindingHandlers.value.init(element,valueAccessor, allBindings);
          $(element).select2({
          })
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var data = allBindings.get('select2Data');
         var dataUnwrapped = ko.toJS(data);
          $(element).select2({
               data: dataUnwrapped
          })
       var value = valueAccessor();
       ko.bindingHandlers.value.update(element,valueAccessor);
    }
};

function Country(id, text) {
        this.id = id;
        this.text = text;
    };




function model() {
  var self = this;
  this.availableCountries = ko.observableArray('');
   this.selectedCountry = ko.observable('');
   this.label = ko.observable('Your Country')
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
  
  var delay=1000; //1 second

setTimeout(function() {
   $.ajax({
  type: 'POST',
  dataType: 'json',
  url: '/echo/json/',
  data : { json: JSON.stringify( jsonData ) },
  success: function(data) {
   $.each( data, function( index, item ) {
      mymodel.availableCountries.push(new Country(item.id, item.text));
    });
  }  
});
}, delay);
  

  
  
});

var jsonData = [
{id: 'UK', text: 'UK'},
{id: 'USA', text: 'USA'},
{id: 'Sweden', text: 'sweden'},
]