【发布时间】:2016-04-11 18:41:30
【问题描述】:
我目前正在尝试创建一个具有可绑定属性的自定义元素,并将该属性绑定到 repeat.for 循环的变量。这似乎应该是一项简单的任务,但我无法让它工作,我想知道它是否可能与作为对象的变量有关。我的自定义元素的代码如下:
game-card.js
import { bindable } from 'aurelia-framework';
export class GameCard {
@bindable gameData = null;
@bindable name = '';
bind() {
console.log('card-game-data: ' + JSON.stringify(this.gameData, null, 2));
console.log('name: ' + this.name);
}
}
game-card.html
<template>
<div class="card medium">
<h3 class="center-align left">${gameData.name}</h3>
<div class="right-align right">${gameData.isPublic}</div>
</div>
</template>
使用自定义元素的视图如下:
<template>
<require from="./game-card"></require>
<div>
<div class="row">
<div repeat.for="game of games">
<game-card class="col s6 m4 l3" gameData.bind="game" name.bind="game.name"></game-card>
</div>
</div>
</div>
</template>
游戏对象如下所示:
[{name: 'SomeName', isPublic: true}, {name: 'AnotherName', isPublic: false}]
现在,当我运行代码时,game-card.js 绑定方法中的 console.log 语句为 gameData 打印出 undefined,但为console.log('name: ' + this.name) 语句打印出正确的游戏名称。当我绑定到游戏对象的属性时,我无法弄清楚为什么绑定正在工作,但当我绑定到游戏对象本身时却没有。任何帮助将不胜感激,非常感谢!
【问题讨论】:
标签: javascript aurelia