如何动态更改 aurelia 中的模板/单击以编辑 table 行？

Question

通过删除，我可以动态更改 table 行的模板，这样当我单击它时，该行将变为 editable 使用编辑模板。没有导航，没有路由，只是为行分配一个新模板。我如何在 aurelia 中执行此操作？

Answer 1

您可以使用视图策略为视图模型动态选择视图。

http://aurelia.io/docs.html#compose - 向下滚动到关于视图策略的部分

如果你想根据数据动态确定视图怎么办？或运行时条件？您也可以通过在视图模型上实现 getViewStrategy() 方法来做到这一点。它可以 return 视图的相对路径或用于自定义视图加载行为的 ViewStrategy 实例。好的部分是该方法在激活回调之后执行，因此您可以在确定视图时访问模型数据。

Answer 2

以下是使用 if 绑定命令完成此操作的方法：

https://gist.run/?id=2408b065ecfac30ff2b1034ea8da800d

代码：

app.js

export class App {
  editing = null;
  
  planets = [
    { name: 'Mercury', diameter: 3032, distance: 35983610 },
    { name: 'Venus', diameter: 7521, distance: 67232360 },
    { name: 'Earth', diameter: 7926, distance: 92957100 },
    { name: 'Mars', diameter: 4222, distance: 141635300 },
    { name: 'Jupiter', diameter: 88846, distance: 483632000 },
    { name: 'Saturn', diameter: 74898, distance: 888188000 },
    { name: 'Uranus', diameter: 31763, distance: 1783950000 },
    { name: 'Neptune', diameter: 30778, distance: 2798842000 }];
  
  edit(planet) {
    this.editing = planet;
  }
}

app.html

<template>
  <table>
    <thead>
      <tr>
        <td>Planet</td>
        <td>Diameter (mi)</td>
        <td>Distance to Sun (mi)</td>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="planet of planets" click.delegate="edit(planet)">
        <!-- read-only mode -->
        <td if.bind="editing !== planet">${planet.name}</td>
        <td if.bind="editing !== planet">${planet.diameter}</td>
        <td if.bind="editing !== planet">${planet.distance}</td>
        
        <!-- edit-mode -->
        <td if.bind="editing === planet"><input value.bind="planet.name" type="text"></td>
        <td if.bind="editing === planet"><input value.bind="planet.diameter" type="number"></td>
        <td if.bind="editing === planet"><input value.bind="planet.distance" type="number"></td>
      </tr>
    </tbody>
  </table>
</template>

css:

thead {
  font-weight: bold;
}

tbody > tr > td {
  cursor: pointer;
}

如何动态更改 aurelia 中的模板/单击以编辑 table 行？

How to dynamically change the template in aurelia / click to edit table row?

javascript

aurelia

代码：