user-story-5.md

5. Edit the content of an existing game

Goal: As a user, I want to edit the content of an existing game

Keywords: two-way data binding, two-way filter

1. Create a new custom element x-game-edit

• Create game-edit.html and game-edit.dart files and copy the GAME_EDIT_TEMPLATE html blocks from the templates into its body

• Import and use it in index.html:

  <x-game-edit gameId="1"></x-game-edit>
  <x-games></x-games>

2. Retrieve the game to edit

• In service.dart, implement the getById method that returns the game for the given id:

  Game getById(int id) => ???;

• In game-edit.dart, add a public attribute gameId and an observable game attribute:

  @published int gameId = null;
  @observable Game game = new Game.sample();

• Retrieve the game to edit when the gameId attribute changes (Hints)

  • if gameId is null, set game with new Game.sample()
  • else set game with the retrieved game

3. Bind game fields to edit them

• In game-edit.html, bind game fields to input values (Hints)
  When editing the game, the values should dynamically change in the games list below
• Check the DartEditor console when editing the rating. Fix the error (Hints)

4. Enjoy the powerful of data binding!

Hints:

• Use onPropertyChange to execute a function when an observable property changes
• Remember what to do to notify bindings when value has changed
• To create a two-way filter, implement a Transformer class (No docs :( see Bind number to text field with filter example)

Next >