if.bind not working in MS Edge

[pvettori]

I'm submitting a bug report

• Library Version: 1.2.0

Please tell us about your environment:

• Operating System: Windows 10

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

[StrahilKazlachev]

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.

[EisenbergEffect]

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.

[pvettori]

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!