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

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>

我在我的另一个 View 中使用它是这样的:

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

day 是一个 moment 对象。呈现的输出可能是:

1 0

实际:

2016 年 1 月 1 日星期五 12:45:23 GMT+0000

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

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

Answer 1

• 您似乎缺少 customElement 装饰器事件 block 类。

• 没有局部作用域的日/月变量。您需要引用附加到您的类实例的变量 (this.day/this.month)

• 请务必使用引用“from”属性内组件的“require”标签从您的 html 中获取组件

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);
    }
}