Как обновить отдельный компонент с помощью магазина aurelia?

Question

Я использую плагин aurelia-store. У меня есть этот список, и он обычно рендерится правильно, кроме включенного / выключенного, над которым я работаю.

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
}

кажется, что все работает, кроме того, что когда я нажимаю кнопку, обновление состояния не отражается в пользовательский интерфейс. Как изменить код, чтобы отображалось состояние кнопок?

Answer 1

Я не знаю, каково было ваше намерение с массивом myGames, к которому вы подталкиваете выбранную игру в своем действии. Но в ваших AvailableGames. html вы по-прежнему выполняете итерацию для availableGames и не изменили его в своем новом состоянии, чтобы добавить: true для выбранной игры.