MaximBalaganskiy · May 14, 2018 04:01
diff --git a/index.html b/index.html
 <!doctype html>
 <html>

 <head>
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>

 <body>
 	<div aurelia-app="src/configure">
 		Loading...
 	</div>

 	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script>
 	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script>
 	<script>
 		System.import("aurelia-bootstrapper");
 	</script>
 </body>

 </html>
diff --git a/src\app.html b/src\app.html
 <template>
 	<div>
 		<md-card title="Filter Set">
 			<md-lookup filter.bind="filter1 & debounce: 500" value.bind="value1" options.bind="options1" display-field-name="name" label="pick an option">
 				<template replace-part="option-template">
 					<span style="color: blue">${option.id}</span> -
 					<span>${option.name}</span>
 				</template>
 				<template replace-part="searching-template">
 					Wait for 1 sec...
 				</template>
 				<template replace-part="no-matches-template">
 					Didn't find anything
 				</template>
 			</md-lookup>
 			<button md-button click.delegate="setValue()">Set Value</button>
 			<br> You picked: ${value1 | stringify}
 			<div>
 				Try "ng" to generate an error in the async method.
 			</div>
 		</md-card>

 		<md-card title="Value Set">
 			<md-lookup filter.bind="filter2 & debounce: 500" value.bind="value2" options.bind="options2" display-field-name="name" label="pick an option">
 				<template replace-part="option-template">
 					<span style="color: blue">${option.id}</span> -
 					<span>${option.name}</span>
 				</template>
 				<template replace-part="searching-template">
 					Wait for 1 sec...
 				</template>
 				<template replace-part="no-matches-template">
 					Didn't find anything
 				</template>
 			</md-lookup>
 			You picked: ${value2 | stringify}
 			<div>
 				Try "ng" to generate an error in the async method.
 			</div>
 		</md-card>

 	</div>
 </template>
diff --git a/src\app.ts b/src\app.ts
 import { observable } from "aurelia-binding";
 import {MdLookup, DiscardablePromise, discard } from "aurelia-materialize-bridge";

 export class App {
 	@observable
 	filter1: string = "o";
 	search1Promise: DiscardablePromise<any[]>;
 	async filter1Changed() {
 		this.options1 = [MdLookup.searching];
 		discard(this.search1Promise);
 		try {
 			console.log("starting search", this.filter1);
 			this.search1Promise = new DiscardablePromise(this.searchCompanies(this.filter1));
 			this.options1 = await this.search1Promise;
 			console.log(this.options1);
 		}
 		catch (e) {
 			if (e !== DiscardablePromise.discarded) {
 				console.log("catch", e);
 				this.options1 = [MdLookup.error, e];
 			}
 		}
 	}

 	@observable
 	filter2: string = "o";
 	search2Promise: DiscardablePromise<any[]>;
 	async filter2Changed() {
 		this.options2 = [MdLookup.searching];
 		if (this.search2Promise) {
 			this.search2Promise.discard();
 		}
 		try {
 			this.search2Promise = new DiscardablePromise(this.searchCompanies(this.filter2));
 			this.options2 = await this.search2Promise;
 		}
 		catch (e) {
 			this.options2 = [MdLookup.error, e];
 		}
 	}

 	companies = [{ id: 1, name: "Microsoft" }, { id: 2, name: "Google" }, { id: 3, name: "Apple" }];

 	options1: any[];
 	options2: any[];

 	value1: any;

 	value2: any = this.companies[0];

 	searchCompanies(filter: string): Promise<any[]> {
 		return new Promise<any[]>((resolve, reject) => {
 			if (filter === "ng") {
 				reject("wrong!");
 			}
 			else {
 				setTimeout(() => resolve(this.companies.filter(x => x.name.includes(filter))), 1000);
 			}
 		});
 	}

 	setValue() {
 		this.value1 = this.companies[2];
 	}
 }

 // tslint:disable-next-line:max-classes-per-file
 export class StringifyValueConverter {
 	toView(value) {
 		return JSON.stringify(value);
 	}
 }
diff --git a/src\configure.ts b/src\configure.ts
 export async function configure(aurelia) {
 	await aurelia.loader.loadModule("materialize-css");
 	aurelia.use
 		.standardConfiguration()
 		.developmentLogging()
 		.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
 		.plugin("aurelia-validation")
 		.globalResources("src/shared/logger");

 	await aurelia.start();
 	aurelia.setRoot("src/app");
 }
	<!doctype html>
	<html>

	<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	</head>

	<body>
	<div aurelia-app="src/configure">
	Loading...
	</div>

	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script>
	<script>
	System.import("aurelia-bootstrapper");
	</script>
	</body>

	</html>
	<template>
	<div>
	<md-card title="Filter Set">
	<md-lookup filter.bind="filter1 & debounce: 500" value.bind="value1" options.bind="options1" display-field-name="name" label="pick an option">
	<template replace-part="option-template">
	<span style="color: blue">${option.id}</span> -
	<span>${option.name}</span>
	</template>
	<template replace-part="searching-template">
	Wait for 1 sec...
	</template>
	<template replace-part="no-matches-template">
	Didn't find anything
	</template>
	</md-lookup>
	<button md-button click.delegate="setValue()">Set Value</button>
	<br> You picked: ${value1 \| stringify}
	<div>
	Try "ng" to generate an error in the async method.
	</div>
	</md-card>

	<md-card title="Value Set">
	<md-lookup filter.bind="filter2 & debounce: 500" value.bind="value2" options.bind="options2" display-field-name="name" label="pick an option">
	<template replace-part="option-template">
	<span style="color: blue">${option.id}</span> -
	<span>${option.name}</span>
	</template>
	<template replace-part="searching-template">
	Wait for 1 sec...
	</template>
	<template replace-part="no-matches-template">
	Didn't find anything
	</template>
	</md-lookup>
	You picked: ${value2 \| stringify}
	<div>
	Try "ng" to generate an error in the async method.
	</div>
	</md-card>

	</div>
	</template>
	import { observable } from "aurelia-binding";
	import {MdLookup, DiscardablePromise, discard } from "aurelia-materialize-bridge";

	export class App {
	@observable
	filter1: string = "o";
	search1Promise: DiscardablePromise<any[]>;
	async filter1Changed() {
	this.options1 = [MdLookup.searching];
	discard(this.search1Promise);
	try {
	console.log("starting search", this.filter1);
	this.search1Promise = new DiscardablePromise(this.searchCompanies(this.filter1));
	this.options1 = await this.search1Promise;
	console.log(this.options1);
	}
	catch (e) {
	if (e !== DiscardablePromise.discarded) {
	console.log("catch", e);
	this.options1 = [MdLookup.error, e];
	}
	}
	}

	@observable
	filter2: string = "o";
	search2Promise: DiscardablePromise<any[]>;
	async filter2Changed() {
	this.options2 = [MdLookup.searching];
	if (this.search2Promise) {
	this.search2Promise.discard();
	}
	try {
	this.search2Promise = new DiscardablePromise(this.searchCompanies(this.filter2));
	this.options2 = await this.search2Promise;
	}
	catch (e) {
	this.options2 = [MdLookup.error, e];
	}
	}

	companies = [{ id: 1, name: "Microsoft" }, { id: 2, name: "Google" }, { id: 3, name: "Apple" }];

	options1: any[];
	options2: any[];

	value1: any;

	value2: any = this.companies[0];

	searchCompanies(filter: string): Promise<any[]> {
	return new Promise<any[]>((resolve, reject) => {
	if (filter === "ng") {
	reject("wrong!");
	}
	else {
	setTimeout(() => resolve(this.companies.filter(x => x.name.includes(filter))), 1000);
	}
	});
	}

	setValue() {
	this.value1 = this.companies[2];
	}
	}

	// tslint:disable-next-line:max-classes-per-file
	export class StringifyValueConverter {
	toView(value) {
	return JSON.stringify(value);
	}
	}
	export async function configure(aurelia) {
	await aurelia.loader.loadModule("materialize-css");
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
	.plugin("aurelia-validation")
	.globalResources("src/shared/logger");

	await aurelia.start();
	aurelia.setRoot("src/app");
	}