if.bind on a repeater - doesn't work in Edge & IE - microsoft-edge

Question

I have the following html part of code:
<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>
In Opera, Chrome this code works fine, but in IE & Edge doesn't work - I don't see this HTML-part.
Problem is in the following statement (in the first line):
if.bind="showNav(route)"
If I deleted it, I can see my navigation menu in Edge & IE also.
Code for 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;
}
If I add in showNav
console.log(row);
It logs undefined in Edge & IE, but in Opera & Chrome I see the full necessary value.
I work with Aurelia framework, so route.navigation goes from ts-file and has the necessary value.
What could be the problem?

Answer 1

The github issue from #jesse-de-bruijne is different, that if.bind and repeat.for are not on the same DOM element. Furthermore, that issue was FIXED long time ago. But anyway, the show.bind purposed by Jesse works.
The real issue is that you are using if.bind and repeat.for on exact same DOM element, which is not supported by Aurelia due to uneven behavior from browsers. Aurelia documentation has not yet addressed this.
Besides the show.bind fix, you can also use template element (which will result to no extra DOM wrapper actually) to seperate repeat.for and 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: Repeat, with and if are called template controllers. They bind before other bindings. You cannot use multiple template controller attributes on the same dom element (because of different behavior among browsers).
The above comment is from Aurelia core member jdanyow on one of my issues.
https://github.com/aurelia/templating-resources/issues/252
Indeed, different browsers sort the HTML attributes differently. That's why your code works on some browsers but not all.

Answer 2

Try using a show.bind instead, if.bind has had some trouble with a repeater on the same line.
For example: https://github.com/aurelia/templating-resources/issues/84
If you do need to use an if.bind, for performance reasons for example, try putting a div child in the repeater containing said if.bind.