我有以下 html 代码部分:
<li repeat.for="route of router.navigation" style="border: 0px;" if.bind="showNav(route)">
<a href.bind="route.href" if.bind="!route.settings.nav">
${route.title}
</a>
<a href="javascript:;" if.bind="route.settings.nav">
${route.title}
</a>
<ul if.bind="route.settings.nav" class="dropdown-menu">
<li repeat.for="menu of route.settings.nav" class="ul-menu">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
在 Opera、Chrome 中,此代码工作正常,但在 IE 和 Edge 中不起作用 - 我没有看到此 HTML 部分。
问题出在以下语句中(第一行):
if.bind="showNav(route)"
如果我删除它,我也可以在 Edge 和 IE 中看到我的导航菜单。
showNav
代码:
showNav(row) {
if (!row.config.role) {
return true;
}
this.currentUserName = localStorage.getItem("token_user");
var currentUser = localStorage.getItem("token_role");
var role = row.config.role.includes(currentUser);
return role;
}
如果我添加showNav
console.log(row);
它在 Edge 和 IE 中记录 undefined
,但在 Opera 和 Chrome 中我看到了完整的必要值。
我使用 Aurelia 框架,因此 route.navigation
来自 ts 文件并具有必要的值。
可能是什么问题?
最佳答案
@jesse-de-bruijne 的 github 问题有所不同,if.bind 和 Repeat.for 不在同一个 DOM 元素上。此外,这个问题很久以前就已经修复了。但无论如何,Jesse 设计的 show.bind 是有效的。
真正的问题是您在完全相同的 DOM 元素上使用 if.bind 和 Repeat.for,由于浏览器的行为不均匀,Aurelia 不支持这种方式。 Aurelia 文档尚未解决此问题。
除了 show.bind 修复之外,您还可以使用 template 元素(这实际上不会产生额外的 DOM 包装器)来分离 Repeat.for 和 if.bind。
<template> <!-- the top level template in your html file -->
...
<template repeat.for="route of router.navigation">
<li style="border: 0px;" if.bind="showNav(route)">
...
</li>
</template>
...
</template>
仅供引用:重复,with 和 if 称为模板 Controller 。它们在其他绑定(bind)之前绑定(bind)。您不能在同一个 dom 元素上使用多个模板 Controller 属性(因为浏览器之间的行为不同)。
以上评论来自 Aurelia 核心成员 jdanyow 对我的一个问题的评论。 https://github.com/aurelia/templating-resources/issues/252
事实上,不同的浏览器对 HTML 属性的排序方式不同。这就是为什么您的代码可以在某些浏览器上运行,但不能在所有浏览器上运行。
关于microsoft-edge - if.bind 在中继器上 - 在 Edge 和 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48146712/