aurelia - 在 Aurelia 中创建分隔线

Question

如果我有一个看起来像他跟随的 JSON 数组..

{
"error":false,
"events":[
  {
     "id":1,
     "title":"First entry",
     "date":"2014-11-04"
  },
  {
     "id":2,
     "title":"Second entry",
     "date":"2014-11-04"
  },
  {
     "id":3,
     "title":"Third entry",
     "date":"2014-11-05"
  },
  {
     "id":4,
     "title":"Fourth entry",
     "date":"2014-11-06"
  },
  {
     "id":5,
     "title":"Fifth entry",
     "date":"2014-11-06"
  }
 ]
}

如何重复创建日期分隔符，使 DOM 看起来像这样......

2014-11-04
首次参赛
第二项

2014-11-05
第三个条目

2014-11-06
第四项
第五项

Answer 1

我只是将您的数据分组到一个数组中。

@bindable events = [];
groupedEvents = [];

eventsChanged(newValue) {
  let matchedGroup;
  // clear the array
  this.groupedEvents = this.groupedEvents.splice(0, this.groupedEvents.length)
  newValue.forEach(event => {
    let match = this.groupedEvents.filter(group => {
      return group.name === event.date;
    })[0];
    if (!match) {
      matchedGroup = { name: event.date, events: [] };
      this.groupedEvents.push(matchedGroup);      
    }
    matchedGroup.events.push(event);
  });
}

在您看来，您可以遍历这些组 -

<template repeat.for="group of groupedEvents">
  <h1>${group.name}</h1>
  <ul>
    <li repeat.for="event of group.events">${title}</li>
  </ul>
</template>

JavaScript 分组主要是普通的旧 ES6+ 代码，可能会更高效一些，但它应该给你一个开始。