在 knockout.js 中使用 afterRender 回调嵌套 ForEach

Question

我想要什么：从我的嵌套 foreach 访问自定义 afterRender。

我有什么：

我正在构建一个可折叠的播客列表，每个播客都有多个类别。我目前拥有的是使用 foreach 生成的播客列表，其中的类别元素是使用另一个 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>

我的要求实际上很简单，我只想用逗号分隔类别。我可以对数据或类似的东西进行此操作，但我也在探索淘汰赛，并对它可以提供什么感兴趣。

这是我尝试过的：

        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>

Answer 1

因为您在 foreach 的上下文中，所以您需要使用 $parent 来访问您的 arCategories 方法，该方法被声明为“升级”。

<div data-bind="foreach: {data: categories, afterRender: $parent.arCategories}">
   <span data-bind="text: $data"></span>
</div>

演示JSFiddle.

有关详细信息，另请参阅文档中的 Note 2: Using $index, $parent, and other context properties 和 Binding context 页面。

旁注：

如果你只想要一个逗号分隔的列表，你可以使用array.join() method：

<div data-bind="text: categories.join()"></div> 

演示JSFiddle.