Knockout JS with Razor layout - razor

Question

Dev and libraries
ASP.NET 5
Razor
KnockoutJS
I am building a dashboard and I want to create a knockoutjs filter of when you switch clients. The data will update for just that client. The dropdown for the client will be in the _Layout.cshtml file. Here is the code I have for that:
_Layout.cshtml
<ul id="clients" class="dropdown-menu dropdown-user" data-bind="foreach: storeList()">
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName"></a>
</li>
</ul>
_Dashboard.cshtml
$.getJSON("/System/GetClients", function (clientList) {
function Event(event) {
var self = this;
self.event = ko.observable(event);
}
function EventsModel() {
...
self.storeList = ko.computed(function () {
return clientList;
});
$('#clients').unbind();
ko.applyBindings(self, $('#clients'));
...
}
ko.applyBindings(new EventsModel());
});
I think the problem lies is the foreach: storeList is bound before the data is received. When I look at the page there are no errors in the console. The dropdown has 6 li > a elements as it should but they are not rendered
<ul id="clients" class="dropdown-menu dropdown-user" data-bind="foreach: storeList()">
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
</ul>
Here is the stringify version of the clientList
[{"ClientName":"admin","Description":"Admin Sample Account","Enable":true},{"ClientName":"DSG","Description":"DSG TEST","Enable":true},{"ClientName":"Pet","Description":"PetTEST","Enable":true},{"ClientName":"Test","Description":"Test Sample Account","Enable":true},{"ClientName":"Toys","Description":"Toy's","Enable":true}]
Not sure what is wrong

Answer 1

storeList is a computed observable. As such, it's OK to treat it as a function in the foreach. Your mistake occurs on the a tags.
you're calling again storeList, which is wrong. Apart, you're using it as a getter property, but it's a function.
Just use a with the ClientName property, without clientList.ClientName and you're done.
Knockout is rendering the elements correctly,as you can see a list of li elements rendered