Question

我想知道我这里是否有错误的结局。

我已成功制作了自定义组件：event-block.[html|js]。

在我的event-block.js文件中，我有：

import {inject, bindable} from "aurelia-framework";
import {EventService} from "event.service";

@inject(EventService)
export class EventBlock {
    @bindable day = null;
    @bindable month = null;

    constructor(eventService) {
        console.log(day);
        console.log(month);
    }

    attached() {
        console.log(day);
        console.log(month);
    }
}

在我的event-block.html我有这个：

<template>
    <div class="cellcontent">
        <span>${day}</span> <span>${month}</span>
    </div>
</template>

我在其他视图中使用它是这样的：

<td repeat.for="day of days"> <event-block day.bind="day.date()" month.bind="day.month()"></event-block> </td>

day是一个时刻对象。渲染的输出可以是：

1 0

实际：

Fri Jan 01 2016 12:45:23 GMT+0000

当我检查DOM时，它只显示一个带有完整日期的跨度。所以我猜我没有正确使用可绑定属性。

如何正确使用它们以获得正确的输出？

Answer 1

您好像缺少自定义的customElement装饰器 EventBlock类。
没有本地范围的日/月变量。您需要引用附加到类实例的变量（this.day/this.month）
请务必要求您的html中的组件带有＆'39; require＆＃39;引用＆＃39;来自＆＃39;内部组件的标签。属性

＆＃13;

import {inject, bindable, customElement} from "aurelia-framework";
import {EventService} from "event.service";

@customElement('event-block')
@inject(EventService)
export class EventBlock {
    @bindable day = null;
    @bindable month = null;

    constructor(eventService) {
        console.log(this.day);
        console.log(this.month);
    }

    attached() {
        console.log(this.day);
        console.log(this.month);
    }
}

＆＃13;

Aurelia自定义元素中的多个属性

1 个答案: