If-else template with repeater is not working in IE

Help Requests
1

I have following construct in my view.

<tbody>
  <tr repeat.for="item1 of array1">
    <td if.bind="array2.length>0" repeat.for="item2 of array2"> 
      <!-- work with item1 and item2 -->
    </td>
    <td else>
      <!-- work with item1 -->
    </td>
  </tr>
</tbody>

This is working quite well in Chrome, and Firefox. But in IE, I am getting the following error.

Can’t find matching If for Else custom attribute.

This error can be easily avoided by using just an if.bind with the negated condition instead of else.

However, my question after seeing the source is, whether this usage is intended to be supported or not. Also, why this is not working only for IE?

2

It’s not about else.

if and repeat (and also with) are special binding so called template controller, they creates additional layer of bindingContext.

There is a limitation not well documented. If you use them on the same element, like <td if.bind="array2.length>0" repeat.for="item2 of array2">, the result relies on how browser reports attributes array to aurelia. If aurelia executes if first, you are fine. But if aurelia executes repeat.for first, you are toasted because else could not find sibling if bind at same level.

Unfortunately, different browsers reports attributes in different way. We think it should report attributes in the same order as they are literally in html, but some browser doesn’t do it. You know which one I am talking about.

So for cross-browser compatibility, it’s recommended not using if, repeat, with on same element.

To solve your issue, the if check is unnecessary as repeat yields nothing on empty array.

<tbody>
  <tr repeat.for="item1 of array1">
    <td repeat.for="item2 of array2"> 
      <!-- work with item1 and item2 -->
    </td>
    <td if.bind="!array2.length" >
      <!-- work with item1 -->
    </td>
  </tr>
</tbody>
4 Likes
3

@huochunpeng Thank you for the explanation.

4

You know which one I am talking about

Note that not only that one, but also the successor of it has that behavior