1

期待どおりに機能しない非常に単純なバインディングがあります。

app.js: 

export class PupilsViewer {

    pupilsInfo = [
        { name: 'John' },
        { name: 'Eric' },
        { name: 'Martin' },
        { name: 'Simon' }
    ];

}

app.html:

<template>
    <require from="./pupil"></require>
    <pupil repeat.for="pupilInfo of pupilsInfo" info="${pupilInfo}"></pupil>
</template>

生徒.js:

import {bindable} from 'aurelia-framework';

export class Pupil {
    @bindable info = { name: 'unknown' };
}

生徒.html:

<template>
    <div>Name: ${info.name}</div>
</template>

これにより、次の出力が得られます。

名前：不明
名前：不明
名前：不明
名前：不明

私が期待していた一方で：

名前:ジョン
名前:エリック
名前:マーティン
名前:サイモン

4

1 に答える 1

2

今、私は同じ問題を抱えていました。タイプミスの問題のようです。bindable の camel-case を変更または削除してみてください。しかし、あなたのバインディングも大丈夫ではありません。

export class PupilsViewer {

    pupils = [
        { name: 'John' },
        { name: 'Eric' },
        { name: 'Martin' },
        { name: 'Simon' }
    ];

}

app.html

<template>
    <require from="./pupil"></require>
    <pupil repeat.for="pupil of pupils" info.bind="pupil"></pupil>
</template>

生徒.js

import {customElement, bindable} from 'aurelia-framework';

@customElement('pupil')
@bindable('info')
export class Pupil {

}
于 2015-04-30T11:03:24.233 に答える