A Custom Element consisting of Javascript only includes the corresponding HTML view within the @inlineView
decorator of Aurelia.
The following example takes two bindable paramters, a prename and a surename, and display both within a predefined sentence.
Example: my-element.js
import { bindable, customElement, inlineView } from 'aurelia-framework';
@customElement('greeter')
@inlineView(`
<template>
<b>Hello, \${prename} \${surename}.</b>
</template>
`)
export class Greeter {
@bindable prename;
@bindable surename;
}
Using it:
<template>
<require from="./greeter"></require>
<greeter prename="Michael" surename="Mueller"></greeter>
</template>
This will output "Hello, Michael Mueller." in the browser's window.