Skip to content

Instantly share code, notes, and snippets.

@fabioluz

fabioluz/app.html

Forked from AStoker/app.html
Last active November 12, 2016 19:02
Show Gist options
  • Save fabioluz/6c59fd34131a8cfa29744fb1ce94de70 to your computer and use it in GitHub Desktop.
Save fabioluz/6c59fd34131a8cfa29744fb1ce94de70 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.html
<template>
<require from="./svg-component"></require>
<div>
<svg-component svg="leaf"></svg-component>
</div>
</template>
Raw
app.js
export class App {
style = "worked";
change(){
console.log('changing');
if(this.style=="worked"){
this.style="cool";
} else {
this.style="worked";
}
}
}
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>
Display the source blob
Display the rendered blob
Raw
leaf.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
svg-component.html
<template></template>
Raw
svg-component.js
import {inject, bindable, Loader} from 'aurelia-framework';
@inject(Element, Loader)
export class SvgComponent {
@bindable svg;
constructor(el, loader) {
this.el = el;
this.loader = loader;
}
bind(context){
if (this.svg) {
this.loader.loadText(`${this.svg}.svg`)
.then(text => {
this.el.innerHTML = text;
});
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment