嵌套forEach與knockout.js中的afterRender回調

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

因爲你是你需要使用一個$parent的foreach上下文內訪問該聲明的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。