nokaut js 'with' binding, ukryj jeśli tablica jest pusta

Question

Mam listę rozwijaną kategorii, która kontroluje listę rozwijaną podkategorii. Chcę ukryć listę rozwijaną podkategorii, jeśli tablica podkategorii jest pusta dla wybranej kategorii.

Przykładowy kod poniżej:

<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

Trzeba połączyć with wiązania z if (lub visible) wiązania, w którym można określić warunek:

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

Zwróć uwagę na użycie $parent w value: $parent.selected_sub_category, aby uzyskać dostęp do obiektu "nadrzędnego", ponieważ with tworzy kontekst podrzędny.

Jeśli nie chcesz, aby uczynić całe div gdy zbiór sub jest pusta, to musisz przesunąć with i if poza div KO bo nie pozwalają na używanie wielu powiązań sterowania przepływem na tym samym elemencie.

Więc w tym przypadku, gdy HTML będzie wyglądać następująco:

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