microsoft-edge - if.bind 在中继器上 - 在 Edge 和 IE 中不起作用

Question

我有以下 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 文件并具有必要的值。

可能是什么问题？

Answer 1

@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 属性的排序方式不同。这就是为什么您的代码可以在某些浏览器上运行，但不能在所有浏览器上运行。