knockout async

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-heroComponentSimple-production</title>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="knockout@3.3.0" data-semver="3.3.0" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script src="controller.js"></script>
    <style>
    .disabledText {
      color: #ccc;
      
    }
    .memberOf {
      color: #999;
    }
    
    
  </style>
  </head>

  <body>
      <h1>Knockout -  Async Updates? Sure no problem!</h1>
      <h2>Color shows up 2 seconds later</h2>

      <input type="text" data-bind="value: colorName" />
      <button data-bind="click: addColor">add color</button>
      <div data-bind="foreach:colors">
        <span data-bind="text:colorName"></span><br />
      </div>
    </div>
  </body>

</html>

var Color = function(options) {
  var self = this;
  self.colorName = options.colorName;
};

$(document).ready(function() {
  var viewModel = function() {
    var self = this;
    self.colorName = ko.observable('');
    self.colors = ko.observableArray([
      new Color({colorName: 'Red'}),
      new Color({colorName: 'Blue'}), 
      new Color({colorName: 'Green'})
      ]);
      
    self.addColor = function() {
      console.log("added a new color " + self.colorName());
      setTimeout(function() {
        console.log("added new color in Async style");
        self.colors.push(new Color({colorName: self.colorName()}));
        }, 2000);
    };
    
};
	
	var vm = new viewModel();
	ko.applyBindings(vm);
});