如何使用 aurelia store 更新单个组件？

Question

我正在使用 aurelia-store 插件。我有这个列表，它通常呈现正确，除了 enabled/disabled 这是我正在处理的。

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
}

一切似乎都正常，除了当我单击按钮时，状态更新没有反映在 UI 中。如何更改我的代码以反映按钮状态？

Answer 1

我不知道您对 myGames 数组的意图是什么，您正在将所选游戏推送到您的操作中。但是在您的 AvailableGames.html 中，您仍在迭代 availableGames 并且没有在您的新状态下修改它以说 added: true for the selected game.

如何使用 aurelia store 更新单个组件？

How do I update an individual component using aurelia store?

html

web-component

typescript

aurelia