Nested ForEach with afterRender callbacks in knockout.js

Nested ForEach with afterRender callbacks in knockout.js

What i want: access to a custom afterRender from my nested foreach.
What i have:
I am building a collapsible list of podcasts that each have multiple
categories. What i currently have is the list of podcasts being generated
using foreach, with a categories element inside being generated using
another foreach.
<div id="content-programs">
<!-- content -->
<div data-role="collapsible-set" data-bind="foreach: { data:
entries }">
<div class="entry" data-role="collapsible"
data-collapsed="false">
<h3 data-bind="text: title"></h3>
<b>Author:</b> <span data-bind="text: author"></span><p>
<b>Published:</b> <span data-bind="text:
publishedDate"></span><p>
<p>
<span data-bind="text: contentSnippet"></span>
<a data-bind="attr: {href: link}" >Full Story</a>
</p>
<b>Categories:</b>
<div data-bind="foreach: categories">
<span data-bind="text: $data"></span>
</div>
</div>
</div>
</div>
My request is pretty simple actually, i just want to comma delimit the
categories. I can do this on the data, or something similar, but im also
exploring knockout, and interested in what it can offer.
Here is what i've tried:
feed = ko.mapping.fromJS(response.responseData.feed);
ko.applyBindings
(
{
entries: feed.entries,
arCategories:
function(categories, data)
{
alert(data);
}
}
);
HTML
<b>Categories:</b>
<div data-bind="foreach: {data: categories, afterRender: arCategories}">
<span data-bind="text: $data"></span>
</div>