Skip to content

Instantly share code, notes, and snippets.

@reneolivo

reneolivo/app.html

Last active August 28, 2016 05:59
Show Gist options
  • Save reneolivo/a4cfc61ba168a1e9c357512cb427151f to your computer and use it in GitHub Desktop.
Save reneolivo/a4cfc61ba168a1e9c357512cb427151f to your computer and use it in GitHub Desktop.
Download ZIP
Messing with Aurelia
Raw
app.html
<template>
<h1>Sample App</h1>
<require from="./container"></require>
<require from="./column"></require>
<require from="./person-form"></require>
<container records.bind="records" form.bind="personForm">
<column header="Full Name">${firstName} ${lastName}</column>
<column header="Job Title">${job}</column>
<person-form
person-form.ref="personForm"
person-created.delegate="personCreated($event.detail.person)"
></person-form>
</container>
</template>
Raw
app.js
export class App {
records = [
{ firstName: 'Jon', lastName: 'Snow', job: 'Lord Commander' },
{ firstName: 'Ned', lastName: 'Stark', job: 'Warden of the North' },
{ firstName: 'Jora', lastName: 'Mormont', job: 'Roadie' }
];
personCreated(person) {
this.records.push(person);
}
}
Raw
column.html
<template>
<content></content>
</template>
Raw
column.js
import {inject, bindable, processContent} from 'aurelia-framework';
@inject(Element)
@processContent(false)
export class Column {
content: String;
@bindable header: String;
element: Element;
constructor(element: Element) {
this.element = element;
}
attached() {
this.content = this.element.innerText;
}
}
Raw
container.html
<template>
<style>
column {
display: none;
}
form {
margin-bottom: 3em;
}
form label strong {
display: inline-block;
min-width: 10em;
}
form .input {
margin-bottom: 0.5em;
}
</style>
<content></content>
<require from="./parse"></require>
<table border="1" cellspacing="0" cellpadding="4">
<thead>
<tr>
<th repeat.for="column of columns">
${column.header}
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr repeat.for="record of records">
<td repeat.for="column of columns">
<parse context.bind="record" format.bind="column.content"></parse>
</td>
<td>
<a href="#" click.delegate="editRecord(record)">edit</a> /
<a href="#" click.delegate="deleteRecord(record)">delete</a>
</td>
</tr>
</tbody>
</table>
</template>
Raw
container.js
import {children, bindable} from 'aurelia-framework';
import {Column} from './column';
export class Container {
@children('column') columns: Column[];
@bindable records: any[];
@bindable form;
columnsData: any[] = [];
editRecord(record) {
if (this.form) {
this.form.load(record);
}
}
deleteRecord(record) {
let index = this.records.indexOf(record);
this.records.splice(index, 1);
}
}
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
parse.js
import {bindable, inject, TemplatingEngine, noView} from 'aurelia-framework';
@inject(Element, TemplatingEngine)
@noView
export class Parse {
element: Element;
compiler: TemplatingEngine;
@bindable context: any;
@bindable format: String;
constructor(element, compiler) {
this.element = element;
this.compiler = compiler;
}
formatChanged(value) {
if (value) {
this.compile();
}
}
compile() {
this.element.innerHTML = this.format;
this.compiler.enhance({
element: this.element,
bindingContext: this.context
});
}
}
Raw
person-form.html
<template>
<style>
form.is-invalid input[required] {
border: 1px solid red;
}
</style>
<form submit.trigger="submit()" class="${isValid ? 'is-valid' : 'is-invalid'}">
<div class="input">
<label>
<strong>First Name:</strong>
<input type="text" value.bind="person.firstName" required />
</label>
</div>
<div class="input">
<label>
<strong>Last Name:</strong>
<input type="text" value.bind="person.lastName" required />
</label>
</div>
<div class="input">
<label>
<strong>Job Title:</strong>
<input type="text" value.bind="person.job" />
</label>
</div>
<div class="actions">
<button click.delegate="submit()">Save</button>
</div>
</form>
</template>
Raw
person-form.js
import {child, inject} from 'aurelia-framework';
@inject(Element)
export class PersonForm {
element: Element;
@child('form') form: Element;
isValid: Boolean;
person: Person;
loadedPerson: Person;
constructor(element: Element) {
this.element = element;
this.reset();
}
reset() {
delete this.loadedPerson;
this.isValid = true;
this.person = new Person();
}
load(person: Person) {
this.loadedPerson = person;
this.person = new Person(person);
}
submit() {
if (!this.form.checkValidity()) {
this.isValid = false;
return;
};
if (this.loadedPerson) {
Object.assign(this.loadedPerson, this.person);
this.dispatchEvent('person-updated');
} else {
this.dispatchEvent('person-created');
}
this.reset();
}
dispatchEvent(eventName) {
let event = new CustomEvent(eventName, {
detail: { person: this.person },
bubbles: true,
cancelable: true
});
this.element.dispatchEvent(event);
}
}
export class Person {
firstName: String;
lastName: String;
job: String;
constructor(data = {}) {
Object.assign(this, data);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment