Edge does not show div with Aurelia bindings which I can see in another browsers?

user_10200875 0
Viewed 92

Do you have any idea about this div just disappearing in Edge?

<div 
  data-filter=".format-${format.id}" class="format cbp-filter-item btn dark btn-outline uppercase" 
  repeat.for="format of fm.campaignFormats.items | formatsWithDraft" 
  oa-sortable-item="item.bind: format" 
  if.bind="(format.just_created && !format.deleted_at) || (!format.deleted_at && format.total_templates)">

  <span class="name">${format.name}</span>
  <span class="size">${format.width} : ${format.height} [${format.unit}]</span>
  <span class="placeholder">${format.name}</span>
  <span class="placeholder">${format.width} : ${format.height} [${format.unit}]</span>

  <i if.bind="format.loading" class="fa fa-spin fa-circle-o-notch ml-5"></i>
  <div class="filter-counter">${format.total_templates}</div>
</div>

I think it's a problem with Aurelia reading data, any ideas?

aurelia microsoft-edge browser
1 Answers

The issue you encounter is because of attribute reordering in IE & Edge, which in your case will make repeat come after if, which messed up the expression evaluation result. What you can do is to wrap your content in <template/> to separate the attribute:

<template
  repeat.for="format of fm.campaignFormats.items | formatsWithDraft">
  <div
      data-filter=".format-${format.id}"
      class="format cbp-filter-item btn dark btn-outline uppercase"
      oa-sortable-item="item.bind: format"
      if.bind="(format.just_created && !format.deleted_at) || (!format.deleted_at && format.total_templates)">

      <span class="name">${format.name}</span>
      <span class="size">${format.width} : ${format.height} [${format.unit}]</span>
      <span class="placeholder">${format.name}</span>
      <span class="placeholder">${format.width} : ${format.height} [${format.unit}]</span>

      <i if.bind="format.loading" class="fa fa-spin fa-circle-o-notch ml-5"></i>
      <div class="filter-counter">${format.total_templates}</div>
    </div>
</template>
user_66725800
Related