自定义元素中的 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>

我在我的另一个视图中使用它是这样的：

<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 装饰器事件块 class。
没有局部范围的 day/month 变量。您需要引用附加到您的实例的变量 class (this.day/this.month)
请务必要求 html 中的组件带有 'require' 标记，该标记引用 'from' 属性中的组件

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

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

Aurelia Multiple Properties in custom element

javascript

aurelia