Skip to content

Instantly share code, notes, and snippets.

@davismj
Last active April 3, 2019 21:16
Show Gist options
  • Save davismj/9eb3e8cd5b5a1d4ddb7df1c14d89a468 to your computer and use it in GitHub Desktop.
Save davismj/9eb3e8cd5b5a1d4ddb7df1c14d89a468 to your computer and use it in GitHub Desktop.
Table example
<template>
<require from="sce"></require>
<div change.delegate="log($event)">
<sce value.two-way="selected" options.bind="opts" ref="ce"></sce>
<select value.bind="selected" ref="sel">
<option repeat.for="opt of opts">${opt}</option>
</select>
</div>
<pre repeat.for="event of events">${event}</pre>
</template>
export class App {
selected = null;
opts = ['a', 'b', 'c'];
events = [];
log(event) {
const source = event.target === this.sel ? 'select element' : 'custom element';
this.events.push(`${source} changed: ${this.selected}`);
}
}
<!doctype html>
<html>
<head>
<title>Table Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.30.0/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
<template>
<select value.bind="value">
<option repeat.for="opt of options">${opt}</option>
</select>
</template>
import { bindable } from 'aurelia-framework';
export class SceCustomElement {
@bindable() value;
@bindable options;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment