Skip to content

Instantly share code, notes, and snippets.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aurelia</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<style>
au-viewport {
display: block;
}
@fkleuver
fkleuver / index.html
Last active January 8, 2019 13:39
Aurelia iife test
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
</head>
<body>
<script src="https://unpkg.com/@aurelia/[email protected]/dist/index.iife.full.js"></script>
<app></app>
<script src="./index.js"></script>
@fkleuver
fkleuver / app.html
Last active December 31, 2018 02:40 — forked from AngelMunoz/app.html
Aurelia Gist
<template>
<require from="./event-case"></require>
<require from="./camel-case-binding-behavior"></require>
<h1>${message}</h1>
<p>
Looking at the console, you can see the event was dispatched,
but it was not caught by aurelia's binding <br />
<event-case ref="case1" my-click.trigger="onClick($event) & camelCase"></event-case>
<event-case ref="case2" my-click.delegate="onClick($event) & camelCase"></event-case>
</p>
@fkleuver
fkleuver / app.html
Last active September 26, 2018 23:10
Style bindings
<template>
<style>
td {
width: 100px;
height: 60px;
margin: 6px;
padding: 6px;
border: 1px solid black;
font-size: 12px;
font-family: verdana;
@fkleuver
fkleuver / app.html
Last active April 25, 2019 17:55 — forked from alaraasa/app.html
Number format convert
<template>
<require from="./card-number-format-value-converter"></require>
<input type="text" id="cardNumber" placeholder="1234 5678 9123 4567"
value.bind="cardNumber & cardNumberFormat">
<br>
</template>
export default (gulp, $, config) => {
config.lastVersionHash = {};
};
@fkleuver
fkleuver / app.html
Created May 21, 2018 22:39 — forked from bigopon/app.html
Aurelia Gist
<template>
<p>Hit edit and you'll see two items added to the form instead of one.</p>
<div if.bind="!editing">
<h2>${items.length} items!</h2>
<ul>
<li repeat.for="item of items">
${item.name}
</li>
</ul>
<button click.delegate="toggleEditing()">Edit</button>
import { Binding, Scope } from "aurelia-framework";
export class MapPropertyBindingBehavior {
public bind(binding: Binding, scope: Scope, instance: any, prop: string): void {
binding["intercepted-updateTarget"] = binding.updateTarget;
let updateTarget = binding.updateTarget.bind(binding);
binding.updateTarget = interceptUpdateTarget.bind(binding, instance, prop, updateTarget);
binding["intercepted-updateSource"] = binding.updateSource;
let updateSource = binding.updateSource.bind(binding);
@fkleuver
fkleuver / index.html
Created November 24, 2016 02:50
Aurelia TypeScript
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.6/bluebird.min.js"></script>
</head>
<body aurelia-app="src/main">
<script src="https://cdn.rawgit.com/aurelia/aurelia/master/scripts/system.js"></script>
<script src="https://cdn.rawgit.com/aurelia/aurelia/master/scripts/config-typescript.js"></script>
@fkleuver
fkleuver / index.html
Last active October 15, 2016 02:02
Aurelia TypeScript
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.6/bluebird.min.js"></script>
</head>
<body aurelia-app="src/main">