I am currently trying to create a custom element with a bindable property and bind to that property to the variable of a repeat.for loop. This seems like it should be a simple task but I cannot get it to work and am wondering if it perhaps has to do with the variable being an object. The code for my custom element is below:

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>

The view that is using the custom element is below:

<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>

The games object looks as follows:

[{name: 'SomeName', isPublic: true}, {name: 'AnotherName', isPublic: false}]

Now, when I run the code, the console.log statements in the game-card.js bind method print out undefined for the gameData, but prints out the correct name of the game for the console.log('name: ' + this.name) statement. I can't figure out why the binding is working when I bind to a property of the game object, but not when I bind to the game object itself. Any help would be greatly appreciated, thank you so much!

I am currently trying to create a custom element with a bindable property and bind to that property to the variable of a repeat.for loop. This seems like it should be a simple task but I cannot get it to work and am wondering if it perhaps has to do with the variable being an object. The code for my custom element is below:

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>

The view that is using the custom element is below:

<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>

The games object looks as follows:

[{name: 'SomeName', isPublic: true}, {name: 'AnotherName', isPublic: false}]

Now, when I run the code, the console.log statements in the game-card.js bind method print out undefined for the gameData, but prints out the correct name of the game for the console.log('name: ' + this.name) statement. I can't figure out why the binding is working when I bind to a property of the game object, but not when I bind to the game object itself. Any help would be greatly appreciated, thank you so much!

• javascript
• aurelia

1 Answer 1

You have to write game-data.bind instead of gameData.bind. From the first look, this should be the only problem