Knockout JS Checkbox List not binding - html

Question

I have an issue where my checkbox list is not binding when loading data from the server.
So I have a table where you select a client when I click the edit button a bootstrap modal window popup with all the information fields such as first name, last name etc.
Now a couple of these fields are checkbox lists. Everything is being populated with the correct data except these two fields. Below is the current code of one of the lists.
<div class="row">
<div class="col-25">
<label for="referralSource">Referral Source</label>
</div>
<div class="col-75">
<ul class="kolist" data-bind="foreach: $root.sources">
<li>
<input type="checkbox" data-bind="
checkedValue: id,
checked: $root.currentClient.ReferralSourceIDs
" />
<label style="margin: 0px; padding: 0px;" data-bind="
text: source,
attr: {for: source}
"></label>
</li>
</ul>
</div>
</div>
This code should bind the data from the currentClient which is in the viewmodel.
self.currentClient = ko.observable();
On the edit button being clicked the currentClient is filled with the correct data.
editClient = function (editingClient) {
self.currentClient(editingClient);
}
The data we receive from the database fills up the ReferralSource class.
function ReferralSource(id, source) {
this.id = ko.observable(id);
this.source = ko.observable(source);
return this;
}
clientsLoad = function () {
$.ajax({
contentType: 'application/json',
type: "GET",
url: baseUrl + 'api/Client/LoadAll',
dataType: 'json',
context: this,
success: function (data, textStatus, jqXHR) {
self.clients($.map(data, function (item) {
var referralSources = new Array();
for (var i = 0; i < item.ReferralSourceIDs.length; i++) {
referralSources.push(
new ReferralSource(
item.ReferralSourceIDs[i].ReferralSourceID,
item.ReferralSourceIDs[i].Source
)
);
}
return new Client(
item.FirstName,
item.LastName, /* etc */
referralSources
);
}));
}
});
}
So with all that being said the load data is working fine the edit on select is being populated with the correct data but the only issue is that the check boxes are not being selected on bind. Can anyone see something I am missing or am I doing something wrong. If you need more info please ask, I will be trying to get this to work in the meantime.
EDIT: So I found a way to get it working and it has to deal with this part of the code.
<input type="checkbox" data-bind="checkedValue: id, checked: $root.currentClient.ReferralSourceIDs" />
It does not like $root.currentClient.ReferralSourceIDs. I removed this out of the class and put it into the view model and it started to work. So it looks like this now $root.referralSources. I have no idea why but it works that way. So if anyone has any other solutions please let me know for now I will stick with this.