使用可绑定属性创建自定义元素

使用可绑定属性创建自定义元素非常简单。如果你想创建一个接受插件可以使用的一个或多个值的元素，@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>