With knockout I could dynamically change the template of a table row so that when I clicked on it, the row would bee editable using an edit template. No navigation, no routing, just assigning the row a new template. How do I do this in aurelia?

With knockout I could dynamically change the template of a table row so that when I clicked on it, the row would bee editable using an edit template. No navigation, no routing, just assigning the row a new template. How do I do this in aurelia?

• javascript
• aurelia

• Needs to be interactive, when the user clicks on the row. I assume something like click.trigger="$parent.toggleTemplate(item)" – John Little Commented Aug 5, 2015 at 12:35
• Jeremy's answer is as always perfect. I've written up a blog on advanced table templating here in case you wanted to go further with this. davismj.me/blog/advanced-tables. – Matthew James Davis Commented Feb 22, 2017 at 12:54
• Went With <table> <tr repeat.for="r of ['A','B','A','B']" as-element="pose" view='./template_${r}.html'> </table> – John Little Commented Apr 19, 2018 at 1:27

2 Answers 2

Here's how you could acplish this using the if binding mand:

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

you can use a view strategy to dynamically choose the view for the view model.

http://aurelia.io/docs.html#pose - scroll down to the part about view strategy

What if you want to determine the view dynamically based on data though? or runtime conditions? You can do that too by implementing a getViewStrategy() method on your view-model. It can return a relative path to the view or an instance of a ViewStrategy for custom view loading behavior. The nice part is that this method is executed after the activate callback, so you have access to the model data when determining the view.