淘汰js與'綁定，隱藏如果數組爲空

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> 

演示JSFiddle.

請注意在value: $parent.selected_sub_category中使用$parent，您需要訪問「父」對象，因爲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 --> 

演示JSFiddle.