Вложенные петли в Knockout.js с if: статья

Question

У меня проблема с вложенными операторами foreach в KO.

Следующие утверждения отлично работают сами по себе, но когда я их совмещаю, внутренний не работает и не вызывает ошибок.

В идеале я хотел бы, чтобы внутреннее соединение было условным, но я пробовал его без предложения if и до сих пор не повезло.

Эксперты имеют массив свойств всех экспертов, назначенных конкретному пользователю. Внешний контур предназначен для печати всех ExpertRoles и внутренний контур предназначен для печати Эксперты, которые соответствуют Эксперту роли внешнего контура

первого Еогеасп: РАБОТЫ

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

2nd Еогеасп: 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> 

в сочетании с тем, если условие: внутренний цикл не работает, не проливает ошибку

<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> 

нет, если условие: внутренний цикл не работает, не проливает ошибки

<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:

Позвольте мне добавить, что я попытался контейнер менее синтаксис (<!-- ko foreach:, <!-- ko if: и т. Д.)

Это часть моей модели просмотра, данные обновляются с помощью SignalR, так что это Мне было трудно сделать скрипку. Пожалуйста, сосредоточьтесь на том, что они работают самостоятельно.

var viewModel = { 
    Users: ko.mapping.fromJS([]), 
    ExpertRoles: ko.mapping.fromJS([]) 
}; 

// experts are a subset of users 
viewModel.Experts = ko.computed(function() { 
    return ko.utils.arrayFilter(this.Users(), function (item) { 
     return item.IsExpert() === true; 
    }); 
}, viewModel); 

EDIT 2:

С вашей помощью мне удалось сделать петлю работать. По какой-то причине привязка Name к внешнему li заставляет внутренний цикл прекратить работу.

<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> 

Answer 1

При использовании foreach в вложенном цикле можно получить доступ только свойства родительской модели. Experts не относится к изделиям с ExpertRoles. Это свойство модели viewModel. Вот почему это не работает. Попробуйте использовать $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>