使用可繫結屬性建立自定義元素

使用可繫結屬性建立自定義元素非常簡單。如果你想建立一個接受外掛可以使用的一個或多個值的元素，@bindable 裝飾器和語法就是你要找的。

下面，我們建立一個自定義元素，接受一系列水果並顯示它們。

示例： 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>

使用它：

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>