I'm submitting a bug report
Please tell us about your environment:
Node Version:
6.11.3
NPM Version:
5.8.0
Aurelia CLI OR JSPM OR Webpack AND Version
CLI 0.32.0
Browser:
Edge 41.16299.492.0
Language:
ESNext
Current behavior:
On MS Edge the if.bind directive does not work and the related content is not rendered no matter what.
An effective workaround that I have found on the internet is to replace if.bind with show.bind.
There are still cases in which I need to use if.bind (i.e. when the content contains elements with the same id, if I use show.bind, all elements are present in the page although only one is visible, but I don't want to have multiple elements with the same id).
I can produce the issue with a few routes set in app.js and this code in app.html:
<template>
<header>
<ul>
<li repeat.for="route of router.navigation" if.bind="route.href">
<a href="${route.href}">${route.title}</a>
</li>
</ul>
</header>
<main>
<router-view swap-order="with"></router-view>
</main>
</template>
Expected/desired behavior:
The directive must render on the page only the element matching the condition as by the documentation.
Currently you can not have more than one template controller on a single element. Both repeat and if are such. The issue is that the order of the attributes is not preserved in some browsers.
You can nest these by using a template tag so that you can use them together.
<ul>
<template repeat.for="route of router.navigation">
<li if.bind="route.href">
<a href="${route.href}">${route.title}</a>
</li>
</template>
</ul>
However, you might just want to consider using a value converter to filter the list that you are repeating over as well.
Thank you @EisenbergEffect, I've been working with Aurelia for a while and I definitely love it.
The documentation may probably benefit from more examples, as sometimes I have trouble grasping the exact behaviour of certain classes, directives or methods. I probably need to read the source code as well for better understanding.
Keep up the awesome work!
Most helpful comment
You can nest these by using a
templatetag so that you can use them together.However, you might just want to consider using a value converter to filter the list that you are repeating over as well.