Skip to content

Instantly share code, notes, and snippets.

@jambutler

jambutler/app.html

Forked from jdanyow/app.html
Last active September 16, 2016 19:36
Show Gist options
  • Save jambutler/65ddc0c1247c99daad6754efb414be42 to your computer and use it in GitHub Desktop.
Save jambutler/65ddc0c1247c99daad6754efb414be42 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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;
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"></link>
</head>
<body aurelia-app>
<h1>Loading...</h1>
<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>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
styles.css
thead {
font-weight: bold;
}
tbody > tr > td {
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment