Skip to content

Instantly share code, notes, and snippets.

@davismj

davismj/app.html

Last active March 11, 2020 16:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davismj/d8eef3781a2e6cb64cee714be81942a6 to your computer and use it in GitHub Desktop.
Save davismj/d8eef3781a2e6cb64cee714be81942a6 to your computer and use it in GitHub Desktop.
Download ZIP
dynamic compose vm api
Raw
app.html
<template>
<!-- static fields -->
<div>vm1</div>
<select value.bind="vm1">
<option>thingA</option>
<option>thingB</option>
</select>
<div>vm2</div>
<select value.bind="vm2">
<option>thingA</option>
<option>thingB</option>
</select>
<div>value a</div>
<div>
<input />
</div>
<div>value b</div>
<div>
<input />
</div>
<!-- dynamic fields -->
<div element.ref="$dynamicFieldsElement">
<div>
<compose view-model.bind="vm1" view-model.ref="vms"></compose>
</div>
<div>
<compose view-model.bind="vm2" view-model.ref="vms"></compose>
</div>
</div>
<div>
<button click.delegate="reset()">do the thing</button>
</div>
</template>
Raw
app.js
export class App {
vm1 = 'thingA';
vm2 = 'thingB';
vms = []
reset() {
const controls = this.$dynamicFieldsElement.querySelectorAll('compose');
for (let { au: { compose: { viewModel: { currentViewModel } } } } of controls) {
currentViewModel.doThings();
}
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
thingA.html
<template>
thing a says ${message}
</template>
Raw
thingA.js
export class ThingViewModel {
message = 'hey';
doThings() {
this.message = [this.message, this.message].join(' ')
}
}
Raw
thingB.html
<template>
thing b
</template>
Raw
thingB.js
export class ThingBViewModel {
doThings() {
alert('totally dynamic bro');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment