knockout js 'with' binding, hide if array is empty

Question

У меня есть раскрывающийся список категории, который управляет выпадающим списком под категории. Я хочу скрыть раскрывающийся список подкатегорий, если массив подкатегорий пуст для выбранной категории.

Пример кода ниже:

<script> 

    self.categories = ko.observableArray([ 
      {"name": "top 1", "subcategories":[ 
               {"name": "sub 1"}, 
               {"name": "sub 2"} 
               ]}, 
      {"name": "top 2", "subcategories":[]} 
    ]); 

    self.selected_category = ko.observable(); 
    self.selected_sub_category = ko.obserable(); 

</script> 

<div> 
    <select data-bind="options: categories, optionsText: "name", optionsCaption: "Select", value: selected_category"></select> 
</div> 
<div data-bind="with:selected_category"> 
    <select data-bind="options: subcategories, optionsText: "name", optionsCaption: "Select", value: selected_sub_category"></select> 
</div> 

Answer 1

Вы должны объединить with связывание с if (или visible) связывания, где вы можете указать условие:

<div data-bind="with: selected_category"> 
    <!-- ko if: subcategories.length > 0 --> 
    <select data-bind="options: subcategories, optionsText: 'name', 
     optionsCaption: 'Select', value: $parent.selected_sub_category"></select> 
    <!-- /ko --> 
</div> 

Demo JSFiddle.

Обратите внимание на использование $parent в value: $parent.selected_sub_category, вам нужно, чтобы для доступа к «родительскому» объекту, потому что with создает дочерний контекст.

Если вы не хотите, чтобы сделать весь div когда суб коллекция пуста, то вам нужно переместить with и if за пределами div, потому что KO не позволяют использовать несколько привязок управления потоком на одном элементе.

Так что в этом случае ваш HTML будет выглядеть следующим образом:

<!-- ko with:selected_category --> 
    <!-- ko if: subcategories.length > 0 --> 
     <div class="mydiv">  
      <select data-bind="options: subcategories, optionsText: 'name', 
        optionsCaption: 'Select', 
        value: $parent.selected_sub_category"> 
      </select>  
     </div> 
    <!-- /ko --> 
<!-- /ko --> 

Demo JSFiddle.