Skip to content

Instantly share code, notes, and snippets.

@sahithyandev

sahithyandev/app.css

Forked from jdanyow/app.html
Last active May 11, 2020 02:49
Show Gist options
  • Save sahithyandev/41630e04f1399a58fd693b8f7611c028 to your computer and use it in GitHub Desktop.
Save sahithyandev/41630e04f1399a58fd693b8f7611c028 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia problem with Set
Raw
app.css
.normal {
font-weight: bold;
font-size: 2rem;
}
.click-toggle {
color: red;
}
Raw
app.html
<template>
<require from="./app.css"></require>
<div class.bind="classNames.join(' ')" click.delegate="clickListner()">
${message}
</div>
<div innerhtml.bind="classNames.join(' ')"></div>
</template>
Raw
app.js
Set.prototype.join = function (seperator = ' ') {
return Array.from(this).join(seperator);
}
export class App {
classNames = new Set().add('normal');
message = 'Hello World!';
clickListner() {
if (this.classNames.has('click-toggle')) {
this.classNames.delete('click-toggle');
} else {
this.classNames.add('click-toggle');
}
this.classNames = new Set(this.classNames);
}
}
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://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment