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>
热门推荐
6 保研的祝福语简短
10 年轻20岁祝福语简短
11 朋友结婚祝福语信息简短
12 女孩婚礼贺卡祝福语简短
13 30段点歌简短祝福语
14 虎年春节祝福语图文简短
15 写给后妈祝福语大全简短
16 简短回复生日祝福语
17 校长送毕业祝福语简短
18 毕业立体贺卡祝福语简短