Javascript Aurelia.js在单击后插入CSS类并仅绑定单击的行

我的代码正在运行，但我有一个bug，因为

重复。对于
所有td更改颜色，实际上我只想更改1行更改颜色，即我单击的行

有人知道如何在奥雷利亚解决这个问题

谢谢

js:

css:

html:


${day | dateFormat:'M/D/YYYY'}
${time}
${location}
如果
isSelected
是
$items
中每个项目的属性，
changeColor（）
是
$items
中每个项目的函数，那么您需要像这样调用函数
juice.changeColor（）
，并且需要在class属性中使用
juice.isSelected
。此外，您需要在表中列出的所有属性之前使用
juice.
，例如
${juice.location}

您需要更改视图，使其如下所示：

<table>
  <tr repeat.for="juice of $items" class="${juice.isSelected ? 'is-row-selected' : 'is-row-not-selected'}" click.trigger="juice.changeColor()">
   <td>${juice.day | dateFormat: 'M/D/YYYY'}</td>
   <td>${juice.time}</td>
   <td>${juice.location}</td>
  </tr>
</table>

以及您的模板：

<table>
  <tr repeat.for="juice of $items" class="${juice.isSelected ? 'is-row-selected' : 'is-row-not-selected'}" click.trigger="changeColor(juice)">
   <td>${juice.day | dateFormat: 'M/D/YYYY'}</td>
   <td>${juice.time}</td>
   <td>${juice.location}</td>
  </tr>
</table>


${juice.day |日期格式：'M/D/YYYY'}
${juice.time}
${juice.location}

考虑到您提供的代码，我真的不能说这些答案中哪一个适合您，但它应该是其中之一

<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<table>
  <tr repeat.for="juice of $items" class="${isSelected ? 'is-row-selected' : 'is-row-not-selected'}" click.trigger="changeColor()">
   <td>${day | dateFormat: 'M/D/YYYY'}</td>
   <td>${time}</td>
   <td>${location}</td>
  </tr>
</table>

<table>
  <tr repeat.for="juice of $items" class="${juice.isSelected ? 'is-row-selected' : 'is-row-not-selected'}" click.trigger="juice.changeColor()">
   <td>${juice.day | dateFormat: 'M/D/YYYY'}</td>
   <td>${juice.time}</td>
   <td>${juice.location}</td>
  </tr>
</table>

changeColor(item) {
 alert(item.new);
 item.isSelected = !item.isSelected;
}

<table>
  <tr repeat.for="juice of $items" class="${juice.isSelected ? 'is-row-selected' : 'is-row-not-selected'}" click.trigger="changeColor(juice)">
   <td>${juice.day | dateFormat: 'M/D/YYYY'}</td>
   <td>${juice.time}</td>
   <td>${juice.location}</td>
  </tr>
</table>