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绑定与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。

$parent请注意 中的用法value: $parent.selected_sub_category,您需要它来访问“父”对象,因为它with创建了一个子上下文。

如果您不想div在子集合为空时呈现整体,那么您需要将withand移到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。

于 2013-04-14T15:46:51.783 回答