Skip to content

Instantly share code, notes, and snippets.

@3cp
Last active May 30, 2020 04:05
Show Gist options
  • Save 3cp/aac88568b099ef41289bf90c0a5f187b to your computer and use it in GitHub Desktop.
Save 3cp/aac88568b099ef41289bf90c0a5f187b to your computer and use it in GitHub Desktop.
Aurelia demo: bind checkboxes to objects
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link href="https://aurelia.io/styles/aurelia-sandbox.css" rel="stylesheet" type="text/css">
<base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.ts.
-->
<body aurelia-app="main">
<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>
{
"dependencies": {
"aurelia-bootstrapper": "^2.3.3"
}
}
<template>
<form>
<h3>Products</h3>
<label repeat.for="product of products">
<input
type="checkbox"
model.bind="product"
checked.bind="selectedProducts">
${product.id} - ${product.name}
</label>
<h3>Data</h3>
<ul>
<li repeat.for="product of selectedProducts">
${product.id} - ${product.name}
</li>
</ul>
</form>
</template>
export class App {
products = [
{ id: 0, name: "Motherboard" },
{ id: 1, name: "CPU" },
{ id: 2, name: "Memory" }
];
selectedProducts = [];
}
import {Aurelia} from 'aurelia-framework';
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging('info');
aurelia.start().then(() => aurelia.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment