javascript - Nested loops in Knockout.js with if:clause -

i having problem nested foreach statements in ko.

the following statements work fine on own when combine them inner 1 doesn't work , doesn't throw error either.

ideally inner join conditional have tried without if clause , still no luck.

experts have property array of expertroles assigned particular user. outer loop meant print expertroles , inner loop meant print experts match expert role of outer loop

1st foreach: works

<ul data-bind="foreach: expertroles">     <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': id }, text: name">            </li> </ul> 

2nd foreach: works

<ul data-bind="foreach: experts">     <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': connectionid, 'title': username }">         <a href="javascript:void(0);" data-bind="text: username"></a>     </li> </ul> 

combined if clause: inner loop doesn't work, throws no error

<ul data-bind="foreach: expertroles">     <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': id }, text: name">         <ul data-bind="foreach: experts">             <li class="expert ui-menu-item" role="menuitem" data-bind="if: expertroles.indexof($parent.id) > 0, attr: { 'data-cid': connectionid, 'title': username }">                 <a href="javascript:void(0);" data-bind="text: username"></a>             </li>         </ul>     </li> </ul> 

no if clause: inner loop doesn't work, throws no error

<ul data-bind="foreach: expertroles">     <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': id }, text: name">         <ul data-bind="foreach: experts">             <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': connectionid, 'title': username }">                 <a href="javascript:void(0);" data-bind="text: username"></a>             </li>         </ul>     </li> </ul> 

edit:

let me add have tried container-less syntax (<!-- ko foreach:, <!-- ko if:, etc)

this part of viewmodel, data gets updated signalr difficult me make fiddle. please, focus on they work on own.

var viewmodel = {     users: ko.mapping.fromjs([]),     expertroles: ko.mapping.fromjs([]) };  // experts subset of users viewmodel.experts = ko.computed(function () {     return ko.utils.arrayfilter(this.users(), function (item) {         return item.isexpert() === true;     }); }, viewmodel); 

edit 2:

with have managed make loops work. reason binding name on outer li causes inner loop stop working.

<ul>     <!-- ko foreach: $root.expertroles -->         <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': id }">              <span data-bind="text: name"></span>             <ul>                 <!-- ko foreach: $root.experts -->                                                         <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': connectionid }">                         <a href="javascript:void(0);" data-bind="text: username"></a>                     </li>                 <!-- /ko -->             </ul>          </li>     <!-- /ko --> </ul> 

when using foreach in nested loop can access properties of parent model. experts not property of item expertroles. property of viewmodel model. that's why doesn't work. try using $root:

<ul data-bind="foreach: $root.experts">     <li class="expert ui-menu-item" role="menuitem" data-bind="if: $root.expertroles.indexof($parent.id) >= 0, attr: { 'data-cid': connectionid, 'title': username }">         <a href="javascript:void(0);" data-bind="text: username"></a>     </li> </ul>