aurelia Custom Elements Creating A Custom Element With Bindable Properties
Example
Creating a Custom Element with bindable properties is a snap. If you want to create an element that accepts one or more values which the plugin can use, the @bindable decorator and syntax is what you are looking for.
Below, we are creating a custom element that accepts an array of fruits and displays them.
Example: my-element.js
import {bindable} from 'aurelia-framework';
const validFruits = [
'Apple',
'Banana',
'Orange',
'Pineapple',
'Grapes',
'Peach',
'Plum',
'Dates',
'Strawberries'
];
export class FruitCustomElement {
@bindable fruits = [];
fruitsChanged(newVal, oldVal) {
if (newVal) {
newVal.filter(fruit => {
return validFruits.indexOf(fruit) >= 0;
});
}
}
}
<template>
<ul if.bind="fruits">
<li repeat.for="fruit of fruits">${fruit}</li>
</ul>
</template>
Using it:
export class MyViewModel {
myFruits = [];
attached() {
this.myFruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Grapes', 'Peach'];
}
}
<template>
<require from="./my-element"></require>
<fruit fruits.bind="myFruits"></fruit>
</template>
