Q:

Click item in SharePoint using Knockout.js

I am trying to display details of a SharePoint document library using knockout.js. I want the name of the item or the URL to be clickable. Is it possible?  I am trying below code but it is not formatting to URL link <a hrefr=# data-bind="attr: {href: Designation}, text:Designation"></a>
Below is the source code
 <table id="tblEmployeeList" border="1">  
    <thead>  
        <tr>  
            <th>Name</th>  
            <th>Designation</th>  
            <th>Department</th>  
            <th>Location</th>  
        </tr>  
    </thead>  
    <!--  Iterating through every list item using foreach of KO -->  
    <tbody data-bind="foreach: Employees">  
        <tr>  
            <td data-bind="text: Name"></td>  
            **<td <a href="#" data-bind="attr: { href: Designation}, text: Designation"></a></td>**  
            <td data-bind="text: Department"></td>  
            <td data-bind="text: Location"></td>  
        </tr>  
    </tbody>  
</table>  

Javascript
    ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");  
var completeEmployeeList = null;  

// Class used for saving the field values.   
function EmployeeList(name, designation, department, location) {  
    var self = this;  
    self. Name = name;  
    self. Designation = designation;  
    self. Department = department;  
    self. Location = location;  
}  

//  View Model - JavaScript that defines the data and behavior of your UI  
function EmployeeListViewModel() {  
    var self = this;  
    // observableArray equivalent of a regular array,  
    self. Employees = ko.observableArray([]);  
    self. AddEmployees = function (name, designation, department, location) {  
        self. Employees.push(new EmployeeList(name, designation, department, location));  
    }  
}  

function MainFunction() {  
    completeEmployeeList = new EmployeeListViewModel();  

    // Retrieve the SharePoint list items  
    retrieveListItems();  

    // Activates knockout.js  
    ko.applyBindings(completeEmployeeList);  
}  

function retrieveListItems() {  
    var clientContext = new SP.ClientContext.get_current();  
    var oList = clientContext.get_web().get_lists().getByTitle('Documents');  
    var camlQuery = new SP.CamlQuery();  
    camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");  
    this.collListItem = oList.getItems(camlQuery);  
    clientContext.load(collListItem);  
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  
}  

function onQuerySucceeded(sender, args) {  
    var listItemInfo = '';  
    var listItemEnumerator = collListItem.getEnumerator();  
    while (listItemEnumerator.moveNext()) {  
        var currentItem = listItemEnumerator.get_current();  
        completeEmployeeList. AddEmployees(currentItem.get_item("Title"), currentItem.get_item("FileRef"), currentItem.get_item("Editor"),currentItem.get_item("File_x0020_Size"), currentItem.get_item("Modified"));  
    }  
}  

function onQueryFailed(sender, args) {  
    alert('Request failed. '  + args.get_message() + '\n' + args.get_stackTrace());  
}  

A:

This seems to work as I'd expect.  If you aren't seeing a clickable link maybe there's something in your css changing the styling?  
Here's a repro snippet, but I removed code related to your api calls:

var completeEmployeeList = null;

// Class used for saving the field values.   
function EmployeeList(name, designation, department, location) {
  var self = this;
  self. Name = name;
  self. Designation = designation;
  self. Department = department;
  self. Location = location;
}

//  View Model - JavaScript that defines the data and behavior of your UI  
function EmployeeListViewModel() {
  var self = this;
  // observableArray equivalent of a regular array,  
  self. Employees = ko.observableArray([]);
  self. AddEmployees = function(name, designation, department, location) {
    self. Employees.push(new EmployeeList(name, designation, department, location));
  }
}

function MainFunction() {
  completeEmployeeList = new EmployeeListViewModel();

  // Retrieve the SharePoint list items  
  //retrieveListItems();  
  
  //test value
  completeEmployeeList. AddEmployees('Test Name', 'Test Dept', 'Test Designation', 'Test Location');

  // Activates knockout.js  
  ko.applyBindings(completeEmployeeList);
}

MainFunction()
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tblEmployeeList" border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Designation</th>
      <th>Department</th>
      <th>Location</th>
    </tr>
  </thead>
  <!--  Iterating through every list item using foreach of KO -->
  <tbody data-bind="foreach: Employees">
    <tr>
      <td data-bind="text: Name">
        <span data-bind="text: Name"></span>
      </td>
      <td>
        <a href="#" data-bind="attr: { href: Designation}, text: Designation"></a>
      </td>
      <td data-bind="text: Department"></td>
      <td data-bind="text: Location"></td>
    </tr>
  </tbody>
</table>

