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＆amp; Edge不起作用 - 我没有看到这个HTML部分。

问题出在以下声明中（在第一行）：

if.bind="showNav(route)"

如果我将其删除，我可以在Edge＆amp ;;中看到我的导航菜单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＆amp;中记录undefined IE，但在Opera＆amp; Chrome我看到了完整的必要价值。

我使用Aurelia框架，因此route.navigation来自ts文件并具有必要的价值。

可能是什么问题？

Answer 1

尝试使用show.bind代替，if.bind在同一行上使用转发器遇到了一些问题。

例如：https://github.com/aurelia/templating-resources/issues/84

如果您确实需要使用if.bind，出于性能原因，请尝试将div子项放入包含所述if.bind的转发器中。

Answer 2

来自@ 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>

FYI：重复，with和if被称为模板控制器。它们在其他绑定之前绑定。您不能在同一个dom元素上使用多个模板控制器属性（因为浏览器之间的行为不同）。

以上评论来自Aurelia核心成员jdanyow关于我的一个问题。 https://github.com/aurelia/templating-resources/issues/252

实际上，不同的浏览器会对HTML属性进行不同的排序。这就是为什么你的代码适用于某些浏览器而不是全部。

if.bind在转发器上 - 在Edge＆amp; IE

2 个答案: