knockout.js - Как добавить имя класса к элементу

Question

Я пытаюсь создать 3-уровневую навигацию с помощью knockout.js. Из статического шаблона навигации у меня есть информация о том, что класс ul.withsubdrop для 2-го ul-элемента должен быть установлен только в том случае, если присутствует 3-е подменю, иначе нет. Как я могу это сделать, поскольку я оцениваю, существование меню третьего уровня намного позже в коде? Можете ли вы указать мне правильное направление? Спасибо.

<!-- LEVEL 1 --> 
<ul data-bind="foreach: entries"> 
    <li> 
     <a data-bind="attr: {href: url}, text: title"></a> 


     <!-- LEVEL 2 --> 
     <!-- ko with: $data.menu --> 
     <ul class="withsubdrop" data-bind="foreach: entries"> 
      <li> 
       <a data-bind="attr: {href: url}, text: title"></a> 


       <!-- LEVEL 3 --> 
       <!-- ko with: $data.menu --> 
       <ul data-bind="foreach: entries"> 
        <li><a data-bind="attr: {href: url}, text: title"></a></li> 
       </ul> 
       <!-- /ko --> 


      </li> 
     </ul> 
     <!-- /ko --> 


    </li> 
</ul> 

<script> 
    $.getJSON("/rest/menu/1.0/json", function(allData) { 
     ko.applyBindings(ko.mapping.fromJS(allData)); 
    }); 
</script> 

Answer 1

Другой ответ не страшно, но если это строго логика представления я бы не переместить его в виде модели.

<!-- LEVEL 1 --> 
<ul data-bind="foreach: entries"> 
    <li> 
     <a data-bind="attr: {href: url}, text: title"></a> 
     <!-- LEVEL 2 --> 
     <!-- ko with: $data.menu --> 
     <ul class="" data-bind="foreach: entries, css: { 'withsubdrop': menu().entries().length > 0 }"> 
      <li> 
       <a data-bind="attr: {href: url}, text: title"></a> 
       <!-- LEVEL 3 --> 
       <!-- ko with: $data.menu --> 
       <ul data-bind="foreach: entries"> 
        <li><a data-bind="attr: {href: url}, text: title"></a></li> 
       </ul> 
       <!-- /ko --> 
      </li> 
     </ul> 
     <!-- /ko --> 
    </li> 
</ul> 

Вы можете видеть, что я добавил CSS связывания на ул на уровне 2, который проверяет, если меню(). Записей имеет значение больше нуля. Конечно, я предполагаю, что меню является наблюдаемым, а записи - наблюдаемым массивом.

Также имейте в виду, что вам не нужно использовать привязку $ data в вашем представлении, как и вы, поскольку это уже заданная область. Обычно вы будете использовать $ data, когда вы привязываетесь непосредственно к существующей области и не определяете свойство этой области.

Answer 2

В вашем JavaScript есть булевское поле thirdSubmenuPresent.

В вашем HTML, вы будете привязки данных выглядеть следующим образом:

<ul class="dropdown-menu" data-bind="foreach: entries, css: { withsubdrop: thirdSubmenuPresent }" role="menu">