Clever Geek Handbook

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

With knockout, I could dynamically change the template of a table row so that when clicked on it, the row becomes editable using the edit template. No navigation, no routing, just assign a new template to the string. How to do this in Aurelia?

+3


source to share


2 answers


Here's how you can accomplish it with the bind command if

:

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

screenshot

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


source


you can use a view strategy to dynamically select a view for a view model.

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



What if you want to define a view dynamically based on data? or fulfillment conditions? You can also do this by implementing the getViewStrategy () method in your view model. It can return a relative path to the view or ViewStrategy instance for custom view loading behavior. The nice part is that this method is executed after the callback is activated, so when you define the view, you access the model data.

+3


source






More articles:


All Articles