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。

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

1 个答案: