8

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

以下のサンプルコード:

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

4

1 に答える 1

11

条件を指定できる(または) バインディングwithとバインディングを組み合わせる必要があります。ifvisible

<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 のデモ。

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

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

その場合、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 のデモ。

于 2013-04-14T15:46:51.783 に答える