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에서 의 사용법에 유의하십시오. 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.