代码之家 › 专栏 › 技术社区 › Natalija P

如果绑定在中继器上-在Edge和IE中不起作用

aurelia microsoft-edge

Natalija P · 技术社区 · 7 年前

我有以下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;
    }

如果我添加 显示导航

console.log(row);

It日志 undefined 在边缘(&A);IE,但在Opera&Chrome我看到了所有必要的值。

我与Aurelia framework合作 route.navigation 来自ts文件并具有必要的值。

有什么问题吗?

2 回复 | 直到 6 年前

huocp 7 年前

jesse de bruijne的github问题不同,如果。绑定并重复。for不在同一DOM元素上。此外,这个问题早就解决了。但无论如何,这场演出。Jesse works设计的绑定。

真正的问题是您正在使用if。绑定并重复。for位于完全相同的DOM元素上,由于浏览器的行为不均匀,Aurelia不支持该元素。Aurelia文档尚未解决这一问题。

除了演出之外。绑定修复,您还可以使用template元素(这实际上不会导致额外的DOM包装)来分离repeat。for和if。绑定

<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>

仅供参考:重复,使用和if称为模板控制器。它们在其他绑定之前绑定。不能在同一dom元素上使用多个模板控制器属性(因为浏览器之间的行为不同)。

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

实际上,不同的浏览器对HTML属性的排序不同。这就是为什么您的代码可以在某些浏览器上运行,但不能在所有浏览器上运行。

Jesse Hosain Ahmed 7 年前

尝试使用 show.bind 相反 if.bind 同一线路上的中继器出现了一些问题。

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

如果您确实需要使用 如果绑定 ,例如,出于性能原因,请尝试将 div 包含所述内容的中继器中的子对象 如果绑定 .