1

我想要什么：从我的嵌套 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>
4

1 回答 1

2

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

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

演示JSFiddle。

另请参阅注释 2：使用 $index、$parent 和其他上下文属性以及文档中的Binding 上下文页面以获取更多信息。

边注：

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

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

演示JSFiddle。

于 2013-08-31T19:09:59.727 回答