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

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>