Using Knockout to generate a modal popup display, thus when clicking on a button from a list will pass back the selected data to the input box. When used single loop, all was working fine. The button click event was working fine. For better appearance I had to create a nested loop, this enables to create a table for each client, but now the click event has stopped working... Working code:
<table class="table table-hover table-bordered table-striped table-condensed">
<tbody data-bind="foreach: jobs">
...
<button data-bind="text: Description, attr: { 'data-idx': $index, 'data-code': Code }, click: $parent.selectCode" class="btn btn-block text-left"></button>
Script:
self.selectCode = function() {
var desc = this.Description;
some more code...
}
I added an external loop on clients, so I can separate the table for each client, unfortunately this is not working for me (new with KO). And the internal loop is fetching the data for each client (by Id). With the nested loop, click event is currently NOT firing:
<div data-bind="foreach: clients">
<table class="table table-hover table-bordered table-striped table-condensed">
<tbody data-bind="foreach: $parent.filteredJobs(ClientID)">
...
<button data-bind="text: Description, attr: { 'data-idx': $index, 'data-code': Code }, click: $parent.selectCode" class="btn btn-block text-left"></button>
The extra script for fetching client by id (internal loop):
self.filteredJobs = function(clientId) {
return ko.utils.arrayFilter(jobs, function(job) {
return (job.ClientID === clientId);
});
};
I have also tried parent index as suggested here $parentContext.$index , resulting no change.
