Skip to content

Instantly share code, notes, and snippets.

@jmvtrinidad

jmvtrinidad/app.html

Created November 17, 2016 05:52
Show Gist options
  • Save jmvtrinidad/b939325a584a979c2e6ad28f02290a24 to your computer and use it in GitHub Desktop.
Save jmvtrinidad/b939325a584a979c2e6ad28f02290a24 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Css binding with function
Raw
app.html
<template>
<div class.bind="getColor">${message}</div>
<div class.bind="isSuccess ? 'success' : 'error'">${message}</div>
<button click.delegate="toggleColor()">toggle color</button>
</template>
Raw
app.js
import {computedFrom} from 'aurelia-framework';
export class App {
message = 'hello worlds';
isSuccess = false;
toggleColor() {
this.isSuccess = !this.isSuccess;
}
@computedFrom('isSuccess') //use @computedFrom to avoid dirty-checking
get getColor() {
return this.isSuccess ? 'success' : 'error';
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<link rel="stylesheet" href="https://gist.host/run/1479356763275/style.css">
<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
style.css
/* Styles go here */
.success {
background-color: green;
}
.error {
background-color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment