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

with knockout dynamically change template of table row when clicked on it, row become editable using edit template. no navigation, no routing, assigning row new template. how do in aurelia?

here's how accomplish using if binding command:

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

---

code:

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