aurelia 创建具有可绑定属性的自定义元素

示例

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