Question

我有一个多级下拉菜单，为Aurelia提供引导程序，但是它的三个级别深，并以此为基础扩展它的基础我通过路由设置添加分隔符时遇到了问题。

现在分频器使用类＆＃34; divider＆＃34;在列表标签<li></li>中确定所以我想通过在下拉列表的设置中添加条目divider: true我可以检查它，而是如果显示链接等我可以改为显示分隔符然而我不知道如何将其实现到navmenu.html文件中。这是文件：

           <ul class="nav navbar-nav">
                <li repeat.for="route of router.navigation" class="${route.isActive ? 'active' : ''}">
                    <a href.bind="route.href" if.bind="!route.settings.nav"><span class="glyphicon glyphicon-${ route.settings.icon }"></span> ${route.title}</a>

                    <a href.bind="route.href" if.bind="route.settings.nav"  class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-${ route.settings.icon }"></span> ${route.title} <span class="caret"></span> <!--First level menu heading - requires route.settings.nav to exist-->
                    </a>

                    <ul if.bind="route.settings.nav" class="dropdown-menu">

                        <li repeat.for="menu of route.settings.nav" class="dropdown-submenu">
                            <a href.bind="menu.href" if.bind="!menu.navSettings.subNav"><span class="glyphicon glyphicon-${ menu.navSettings.icon }"></span> ${menu.title}</a>

                            <a href.bind="menu.href" if.bind="menu.navSettings.subNav" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-${ menu.navSettings.icon }"></span> ${menu.title} <span class="caret-right"></span>
                            </a>
                            <ul if.bind="menu.navSettings.subNav" class="dropdown-menu">
                                <li repeat.for="subMenu of menu.navSettings.subNav" class="dropdown-submenu">
                                    <a href.bind="subMenu.href" if.bind="!subMenu.subNavSettings.subSubNav"><span class="glyphicon glyphicon-${ subMenu.subNavSettings.icon }"></span> ${subMenu.title}</a>

                                    <a href.bind="subMenu.href" if.bind="subMenu.subNavSettings.subSubNav" class="dropdown-toggle" data-toggle="dropdown">
                                        <span class="glyphicon glyphicon-${ subMenu.subNavSettings.icon }"></span> ${subMenu.title} <span class="caret-right"></span>
                                    </a>
                                    <ul if.bind="subMenu.subNavSettings.subSubNav" class="dropdown-menu">
                                        <li repeat.for="lowestSubMenu of subMenu.subNavSettings.subSubNav" class="dropdown-submenu">
                                            <a href.bind="lowestSubMenu.href"> <span class="glyphicon glyphicon-${ lowestSubMenu.subSubNavSettings.icon }"></span> ${lowestSubMenu.title}</a>
                                        </li>
                                    </ul>                        
                                </li>
                            </ul>
                        </li> [ALL THE ANCHORS HERE OR A DIVIDER.. HOW DO I DO A TERNARY TO CHECK ON EACH REPEAT FOR A DIVIDER VALUE IN THE SETTINGS ARRAY. 

                    </ul>
                </li>
            </ul>

以下是navmenu从以下位置读取的路线图：

{
            route: "clients",
            name: "clients",
            moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
            title: "Clients",
            nav: true,
            settings: {
                nav: [
                    {
                        href: "#clients/clientsList",
                        title: "Client List",
                        navSettings: {
                            icon: "list",
                            roles: ["Employee", "Admin"],
                        }
                    },
                    {
                        navSettings: {
                            roles: ["Employee", "Admin"],
                            divider: true,  // HERE IS MY DIVIDER
                        }
                    },
                    {
                        href: "#clients/Create",
                        title: "Create Client",
                        navSettings: {
                            icon: "user",
                            roles: ["Employee", "Admin"],
                        }
                    }
                ],
                icon: "user",
                auth: true,
                roles: ["Employee", "Admin"],
                pos: "left"
            }
        },

问题是<li></li>会重复，我需要检查重复 - li以查看＆＃34; navSettings是否有条目分隔符：true如果是，则不显示链接（菜单项））而是显示一个分隔线。

如何丢弃锚点，而是显示一个带有类＆＃34; divider＆＃34;的列表行。抛弃我的是，li有一个repeat.for，我需要在<li></li>标签之间显示所有内容，或者显示分隔符。

我需要检查一下：

<li repeat.for="menu of route.settings.nav" class="dropdown-submenu">

并从＆＃34; dropdown-submenu＆＃34;更改班级to＆＃34; divider＆＃34;同时不通过对分隔符进行类似检查（if.bind，我猜）来显示任何锚点<a></a>。

希望你能帮忙......

Answer 1

在<li>使用class="${menu.divider ? 'divider' : 'dropdown-submenu'}"。

在if.bind上使用menu.divider获取<li>内的元素。

<li repeat.for="menu of route.settings.nav" class="${menu.divider ? 'divider' : 'dropdown-submenu'}">
    <a if.bind="!menu.divider" href.bind="lowestSubMenu.href"> <span class="glyphicon glyphicon-${ lowestSubMenu.subSubNavSettings.icon }"></span> ${lowestSubMenu.title}</a>
    <div if.bind="menu.divider" class="divider"></div>
</li>

Aurelia - 一种将分隔符添加到多级下拉菜单中的方法

1 个答案: