Framework: if.bind not working in MS Edge

Created on 25 Jun 2018  路  3Comments  路  Source: aurelia/framework


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.

Most helpful comment

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.

All 3 comments

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rdelhommer picture rdelhommer  路  4Comments

firelizzard18 picture firelizzard18  路  3Comments

jfbaquerocelis picture jfbaquerocelis  路  3Comments

danfma picture danfma  路  5Comments

piet-v picture piet-v  路  3Comments