Edge 不显示 div 与我可以在其他浏览器中看到的 Aurelia 绑定？

Question

你知道这个 div 在 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>

我认为这是 Aurelia 读取数据的问题，有什么想法吗？

Answer 1

您遇到的问题是因为 IE 和 Edge 中的属性重新排序，在您的情况下，这会使 repeat 出现在 if 之后，这会弄乱表达式评估结果。您可以做的是将您的内容包装在 <template/> 中以分隔属性：

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

Edge 不显示 div 与我可以在其他浏览器中看到的 Aurelia 绑定？

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

browser

aurelia

microsoft-edge