如何使用Aurelia綁定到repeat.for中的對象

Question

我目前正在嘗試使用可綁定屬性創建自定義元素，並將該屬性綁定到repeat.for循環的變量。 這似乎應該是一個簡單的任務，但我無法讓它工作，我想知道它是否可能與作為對象的變量有關。 我的自定義元素的代碼如下：

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

游戲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，但是為console.log('name: ' + this.name)打印出正確的游戲console.log('name: ' + this.name)聲明。 當我綁定到游戲對象的屬性時，我無法弄清楚為什么綁定有效，但是當我綁定到游戲對象本身時卻無法解決。 非常感謝任何幫助，非常感謝你！

Answer 1

你必須編寫game-data.bind而不是gameData.bind 。 從第一眼看，這應該是唯一的問題