Question

我正在尝试使用knockout.js生成3级导航。从导航的静态模板我得到的信息是，如果存在第3个子菜单，则只应设置第二个ul元素的类ul.withsubdrop，否则不设置。我怎么能这样做，因为我评估，代码后面是否存在第三级菜单？你能指出我正确的方向吗？谢谢。

<!-- LEVEL 1 -->
<ul data-bind="foreach: entries">
    <li>
        <a data-bind="attr: {href: url}, text: title"></a>


        <!-- LEVEL 2 -->
        <!-- ko with: $data.menu -->
        <ul class="withsubdrop" data-bind="foreach: entries">
            <li>
                <a data-bind="attr: {href: url}, text: title"></a>


                <!-- LEVEL 3 -->
                <!-- ko with: $data.menu -->
                <ul data-bind="foreach: entries">
                    <li><a data-bind="attr: {href: url}, text: title"></a></li>
                </ul>
                <!-- /ko -->


            </li>
        </ul>
        <!-- /ko -->


    </li>
</ul>

<script>
    $.getJSON("/rest/menu/1.0/json", function(allData) {
        ko.applyBindings(ko.mapping.fromJS(allData));
    });
</script>

Answer 1

在JavaScript中，有一个thirdSubmenuPresent布尔字段。

在HTML中，数据绑定将如下所示：

<ul class="dropdown-menu" data-bind="foreach: entries, css: { withsubdrop: thirdSubmenuPresent }" role="menu">

Answer 2

另一个答案并不可怕，但如果它是严格的表示逻辑，我就不会将它移到View模型中。

<!-- LEVEL 1 -->
<ul data-bind="foreach: entries">
    <li>
        <a data-bind="attr: {href: url}, text: title"></a>
        <!-- LEVEL 2 -->
        <!-- ko with: $data.menu -->
        <ul class="" data-bind="foreach: entries, css: { 'withsubdrop': menu().entries().length > 0 }">
            <li>
                <a data-bind="attr: {href: url}, text: title"></a>
                <!-- LEVEL 3 -->
                <!-- ko with: $data.menu -->
                <ul data-bind="foreach: entries">
                    <li><a data-bind="attr: {href: url}, text: title"></a></li>
                </ul>
                <!-- /ko -->
            </li>
        </ul>
        <!-- /ko -->
    </li>
</ul>

你可以看到我在第2级的ul上添加了一个css绑定，用于检查menu（）。entries的值是否大于零。当然我假设菜单是一个可观察的，条目是一个可观察的数组。

另请注意，您不需要在视图中使用$ data绑定，就像您已经设置的范围一样。通常，当您直接绑定到现有范围而不识别该范围的属性时，您将使用$ data。

knockout.js - 如何向元素添加类名

2 个答案: