knockout js 'with binding、配列が空の場合は非表示

Question

サブカテゴリのドロップダウンリストを制御するカテゴリドロップダウンリストがあります。選択したカテゴリのサブカテゴリ配列が空の場合は、サブカテゴリのドロップダウンリストを非表示にします。以下

サンプルコード：

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

デモ：あなたはwithが結合if（またはvisible）との結合を組み合わせる必要が

<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

あなたの条件を指定することができる場所JSFiddle.

value: $parent.selected_sub_categoryの$parentの使用に注意してください。withが子コンテキストを作成するため、「親」オブジェクトにアクセスする必要があります。

サブコレクションが空であるときに全体divをレンダリングしたくないなら、あなたはKOが同じ要素に複数の制御フローバインディングを使用することはできませんのでごdiv外withとifを移動する必要があります。

ので、その場合には、あなたの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.