knockout js 'con' binding, hide se array è vuoto

Question

Ho un elenco a discesa di categorie che controlla un elenco a discesa di sottocategoria. Voglio nascondere l'elenco a discesa delle sottocategorie se l'array della sottocategoria è vuoto per la categoria selezionata.

codice di esempio riportato di seguito:

<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

È necessario combinare il with vincolante con il if (o la visible) vincolante in cui è possibile specificare la sua condizione:

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

Nota l'utilizzo dello nello value: $parent.selected_sub_category, è necessario accedere all'oggetto "padre" perché lo with crea un contesto secondario.

Se non si desidera rendere l'intero div quando la raccolta sub è vuota allora avete bisogno di spostare il with e if fuori della vostra div perché KO non permette di utilizzare più associazioni di controllo del flusso sullo stesso elemento.

Quindi, in questo caso il vostro codice HTML sarebbe simile a questa:

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