Matt Duffield mattduffield

mattduffield / app.html

Last active December 5, 2018 05:49

Aurelia Gist - Ref Binding

	<template>
	<h1>${title}</h1>
	<input ref="customerName">
	<h2>Hello ${customerName.value}, how can I help you?</h2>
	</template>

mattduffield / app.html

Last active October 25, 2017 18:14

Aurelia Gist - Event Binding

	<template>
	<h1>${title}</h1>
	<input value.bind="name">
	<button click.delegate="sayHello()">Greeting</button>
	</template>

mattduffield / app.html

Last active October 10, 2016 17:39

Aurelia Gist - Custom Element - my-input

	<template>
	<require from='my-input'></require>
	<h1>${title}</h1>
	<form>
	<my-input label="Customer Name"
	placeholder="Enter your name..."
	value.two-way="customerName"></my-input>
	<p>${customerName}</p>
	</form>
	</template>

mattduffield / app.html

Last active October 10, 2016 17:50

Aurelia Gist - Custom Attribute - my-focus

	<template>
	<require from='my-focus'></require>
	<h1>${title}</h1>
	<form>
	<label>First Name</label>
	<input value.bind="firstName"
	placeholder="First Name" my-focus>
	<p>${firstName}</p>
	</form>
	</template>

mattduffield / app.html

Last active August 22, 2018 13:06

Aurelia Gist - Custom Binding Behavior

	<template>
	<require from='unique-binding-behavior'></require>
	<h1>${title}</h1>
	<form>
	<label>User Name</label>
	<input value.bind="username & unique:uniqueFunc & debounce:800">
	<p class="help-text">${lookupResult}</p>
	</form>
	</template>

mattduffield / app.html

Last active October 10, 2016 18:05

Aurelia Gist - Custom Binding Behavior - version 2

	<template>
	<require from='unique-binding-behavior'></require>
	<h1>${title}</h1>
	<form>
	<label>User Name</label>
	<input value.bind="username & unique:$this:uniqueNames:'lookupResult' & debounce:800">
	<p class="help-text">${lookupResult}</p>
	</form>
	</template>

mattduffield / app.html

Created November 26, 2016 06:09

Aurelia Gist - Custom Element - my-input

	<template>
	<require from='my-input'></require>
	<h1>${title}</h1>
	<form>
	<my-input label="Customer Name"
	placeholder="Enter your name..."
	value.two-way="customerName"></my-input>
	<p>${customerName}</p>
	</form>
	</template>

mattduffield / app.html

Last active December 8, 2016 02:31

Aurelia Gist - TabControl

	<template>
	<require from='tab-control'></require>
	<require from='tab-item'></require>

	<tab-control selected-tab="tab2"
	selection-changed.delegate="onSelectionChanged($event.detail)">
	<tab-item name="tab2" title="Tab 2"
	>
	Content for Tab 2
	<input id="tab1Input">

mattduffield / app.html

Created December 5, 2016 16:44

DI inheritance

mattduffield / app.html

Last active December 5, 2016 17:42

Component Factory