knockout js 'with' bağlayıcı, dizi boşsa gizleyin

Question

Bir alt kategori açılır listesini kontrol eden bir kategori aşağı açılır listem var. Alt kategori dizisi seçilen kategori için boşsa, alt kategoriler listesini gizlemek istiyorum. Aşağıda

örnek kod:

<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: Sen with bağlayıcı if (veya visible) ile bağlayıcı birleştirmek gerekir

<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

koşulunuzu belirtebilirsiniz nerede JSFiddle.

value: $parent.selected_sub_category'da $parent'un kullanılmasına dikkat edin; with bir alt bağlam oluşturduğundan "ana" nesnesine erişmek için buna ihtiyacınız vardır.

Eğer alt toplama boşken bütün div işlemek için istemiyorsanız

o zaman KO aynı eleman birden kontrol akış bağlamaları kullanmasına izin vermediğinden çünkü div dışında with ve if taşımanız gerekir.

Yani bu durumda HTML şöyle olacaktır:

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