jsbin.xovup.html

<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script><script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>

<div class="container">
  
  <div class="row">
    <button class="btn btn-default" data-bind="click: getMedals">Get medal count</button> 
  </div>
  
  <div class="row">
    bepa
  </div>
</div>

<div class='liveExample'> 
    
<form data-bind="submit: addItem">
    New item:
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
    <p>Your items:</p>
    <select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
    
</div>

jsbin.xovup.js

var MedalModel = function(items) {
  this.medals = ko.observableArray([]);
  this.getMedals = function() {
    $.ajax({
      url:"http://mapi.sochi2014.com/v1/en/olympic/medal/rating",
      type: 'GET',
      dataType: "json",
      xhrFields: {
        withCredentials: true
      },
      success:function(json){
         alert("Success");
      },
      error:function(){
         alert("Error");
       }
    });
  };
  
  
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");
    this.addItem = function() {
        if (this.itemToAdd() !== "") {
            this.items.push(this.itemToAdd());
            this.itemToAdd("");
        }
    }.bind(this);
};
 
ko.applyBindings(new MedalModel(["Alpha", "Beta", "Gamma"]));