calling a function on a bound property change in aurelia

Question

I have this viewmodel, and all the code works

@connectTo<State>({
  selector: (store) => store.state.pipe(pluck('domain')).pipe(pluck('games')),
  target: 'games',
})
@connectTo<State>({
  selector: (store) => store.state.pipe(pluck('domain')).pipe(pluck('myGames')),
  target: 'myGames',
})
@autoinject()
@customElement('games')
export default class Games {
  private static readonly ADD_TO_MYGAMES = 'addToMyGames';
  @bindable() games: Game[] = [];
  myGames: Game[] = [];

  constructor(
    private readonly store: Store<State>,
  ) {
    store.registerAction(Games.ADD_TO_MYGAMES, myGamesState);
  }

  available(game: Game): boolean {
    console.log("available", game);
    return !!this.myGames.find((i) => _.isEqual(i, game));
  }

  addGame(game: Game) {
    this.store.dispatch(Games.ADD_TO_MYGAMES, game);
  }
}

const myGamesState = async (current: State, game: Game) => {
  console.log(game);
  return produce(current, state => {
    state.domain.myGames.push(game);
  });
}

problem is when myGames as a new game, the view doesn't refresh available

<template bindable="games">
  <div class="columns">
    <ul class="column">
      <li repeat.for="game of games" class="level">
        <button class="button level-item is-fullwidth ${available(game) ? 'is-success' : ''}" click.delegate="addGame(game)"
          disabled.bind="available(game)">
          ${game.name}
        </button>
      </li>
    </ul>
  </div>
</template>

how should I solve this problem?

instead of disabled.bind is it not disabled.call? – weagle08 Feb 24 '20 at 03:27 — weagle08, Feb 24 '20 at 03:27
@weagle08 Disabled is a not a function – Aluan Haddad Feb 24 '20 at 03:41 — Aluan Haddad, Feb 24 '20 at 03:41

score 1 · Accepted Answer · answered Feb 24 '20 at 03:30

1

I think you are preforming a function reference. You would want to use:
disabled.call="available(game)"

See: function references in Aurelia

answered Feb 24 '20 at 03:30

weagle08

1,763
1
18
27

it doesn't appear to be called in the css class either, as the style isn't changing, also I'm a bit concerned about it needing to be called twice. Also I don't see how this would work, as how does aurelia know to call it again? – xenoterracide Feb 24 '20 at 19:31
t is being called the first time the list is created, it's just not called when I update that – xenoterracide Feb 24 '20 at 19:48
`call` is probably the right call, but I haven't been able to get it to work, and yes I've read the docs, maybe you could provide a more complete example. – xenoterracide Feb 28 '20 at 12:47
I don't have time to create a little demo app to test what you are trying to do here, sorry. maybe if I have a moment in the next couple days, but you could always approach it from a different angle such as setting an available flag on each game in a pre-bind step or on an event when a new game is added. – weagle08 Mar 02 '20 at 00:05

calling a function on a bound property change in aurelia

1 Answers1