binding: Firefox - if.binds not working in repeat.for elements

Ran the below code in the navigation app with a simple list of strings to recreate. Basically the show.bind works, but if.bind does not. This is in firefox, but works fine in chrome.

if - list:
  <ul>
    <li repeat.for="item of someList"
      if.bind="item">
      <div>${item}</div>
    </li>
  </ul>
show - list:
  <ul>
    <li repeat.for="item of someList"
      show.bind="item">
      <div>${item}</div>
    </li>
  </ul>

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 19 (7 by maintainers)

Most upvoted comments

There’s a difference between whether you want to “if” a list in its entirely or “if” individual items in a list, which is why the order would matter in that case. However, I don’t believe that all browsers preserve the ordering of the attributes. So, it could be that you want a particular order, but that the browser swaps those around at runtime.

EisenbergEffect on Jun 30, 2016

I have no clue why it works in Chrome. It shouldn’t. show is not a template controller, so it can be placed along side if or repeat. Template Controllers are literally attributes that transform the DOM that they are on into an html template and then control how that template is instantiated.

If you want to use if and repeat together, you must nest them. Here’s your code with the correct usage:

<ul>
    <li repeat.for="item of someList">
      <template if.bind="item">
        <div>${item}</div>
      </template>
    </li>
  </ul>

Any template controller can be used directly on an HTML element or on a Template element.

EisenbergEffect on Dec 2, 2015

The useRuleConflictingAttribute (on by default) in https://github.com/MeirionHughes/aurelia-template-lint provides protection against inadvertently doing this.

bdefore on Nov 30, 2017