J'utilise le plugin aurelia-store. J'ai cette liste, et elle s'affiche généralement correctement, sauf activée/désactivée sur laquelle je travaille.

export interface State {
  readonly availableGames: AvailableGame[];
  readonly myGames: Game[];
}

export const initialState: State = {
  availableGames: [
    { name: 'Foo', added: false },
    { name: 'Bar', added: false },
  ],
  myGames: [],
};

AvailableGames.html

<template>
  <require from="./game-add-button.html"></require>
  <div class="game-list">
    <ul class="list-group">
      <li repeat.for="game of state.availableGames">
        <game-add-button game.bind="game" on-add.call="addGameToMyList(game)"></game-add-button>
      </li>
    </ul>
  </div>
</template>

AvailableGames

import { autoinject } from 'aurelia-framework';
import { connectTo, Store } from 'aurelia-store';
import { Event } from '../Event';
import { State } from '../State';
import AvailableGame from './AvailableGame';
import Game from './Game';

@connectTo()
@autoinject()
export default class AvailableGames {

  readonly state!: State;

  constructor(private store: Store<State>) {
    this.store.registerAction(Event.ADD_GAME_TO_MY_LIST, (state, game) => this.onAddNewState(state, game));
  }

  async addGameToMyList(availableGame: AvailableGame): Promise<void> {
    const { added, ...game } = availableGame;
    return await this.store.dispatch(Event.ADD_GAME_TO_MY_LIST, game);
  }

  private onAddNewState(state: State, game: Game): State {
    return {
      ...state,
      myGames: [...state.myGames, game]
    };
  }
}

game-add-button.html

<template bindable="game,onAdd" role="button">
  <button class="button ${game.added ? 'is-success' : ''}" click.trigger="onAdd(game)" disabled.bind="game.added">
    ${game.name}
  </button>
</template>

GameAddButton.ts

@customElement('game-add-button')
export default class GameAddButton {
  @bindable game!: AvailableGame;
  @bindable onAdd!: (game: AvailableGame) => void
}

Tout semble fonctionner, sauf lorsque je clique sur le bouton, la mise à jour de l'état n'est pas reflétée dans l'interface utilisateur. Comment modifier mon code pour que l'état des boutons soit reflété ?

1
xenoterracide 18 févr. 2020 à 17:05

1 réponse

Meilleure réponse

Je ne sais pas quelle était votre intention avec le tableau myGames, vers lequel vous poussez le jeu sélectionné dans votre action. Mais dans votre AvailableGames.html, vous itérez toujours sur availableGames et ne l'avez pas modifié dans votre nouvel état pour dire ajouté : vrai pour le jeu sélectionné.

2
zewa666 19 févr. 2020 à 11:28