Knockoutjs.com - Simple list example

HTML

<input data-bind="value: Name, hasfocus: isSelected" />
    <ul data-bind="foreach: NameList, visible: isVisible">
        <li data-bind="text: $data"></li>
    </ul>

JavaScript

function VM()
{
  var self = this;  
  self.isSelected = ko.observable(false);
 
 self.isVisible = ko.observable(false);
  
  
  self.isSelected.subscribe(function(val) {
    if (val) {
      self.isVisible(true);
    } else {
      setTimeout(function() {
        self.isVisible(false);
      }, 300);
    }
  }); 
  
  self.Name = ko.observable();
  self.NameList = ko.observableArray();
  self.NameList.push("A");
  self.NameList.push("B");
  self.NameList.push("C");
  self.NameList.push("D");
  self.NameList.push("E");
  self.NameList.push("F");
}

ko.applyBindings(new VM());