Click item in SharePoint using Knockout.js - sharepoint

Question

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 </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());
}

Answer 1

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>
</td>
<td data-bind="text: Department"></td>
<td data-bind="text: Location"></td>
</tr>
</tbody>
</table>