Question

I’m learning Ember and I’m looking for the best way to do the following:

A user can choose from 3 buttons to setup a new game: 2 Players, 3 Players or 4 Players. Clicking one will go to the next screen where the games starts for the selected no. of players.

How would you do this in Ember? I can get it done using actions:

<button {{action "start" 2}} type="button" />
<button {{action "start" 3}} type="button" />
<button {{action "start" 4}} type="button" />

This way I can read the parameter in the controller’s start() method.

But I want to transition to a new URL, and for that I need {{linkTo}}, don’t I? But how can you transfer values based on the button to the new Route/URL? So a more general question would be: Is there some way to ‘POST’ or ‘GET’ some variables to a new Route/URL? Kinda like a traditional form post and redirect. I looked at dynamic segments, but’s not what I’m after I think.

Answer 1

You can add a method to your controller start which will read in the number of players and forward the user to the applicable route using the transitionToRoute function made available to all controllers.

start: function(numberOfPlayers) {
  App.gameConfiguration = updateGameConfigurationBasedOnNumberOfPlayersParamAndBoundVariables();
  this.transitionToRoute('games.start');
}

This would result in the user being forwarded to /games/start route. There is no context or dynamic segment in the url but using this method relies on some logic having initialized the game configuration necessary to start the game.

You wouldn’t have to pass all the properties into the start function either. You could bind input fields on the template to properties in the model, and then use these bound values in the start function to create the game configuration.

A variant on this would be to supply a context to the route / specify a dynamic segment in the url. Then your start function might look like this:

start: function(gameConfiguration) {
  this.transitionToRoute('games.start', gameConfiguration);
}

This would forward the user onto a url like: /games/:game_configuration_id/start where the game_configuration_id refers to the id of a DS.Model that represents a particular game configuration made up of the number of players and any other characteristics.

You would set this up by iterating over the set of game configurations in your template, passing a game_configuration into each each link. Something like this would suffice:

{{#each game_config in model}}
  <button {{action "start" game_config}} type="button" />
  //This would be the equivalent of doing:
  //<#linkTo 'games.start' game_config>
{{/if}

For this configuration you would require a GamesStartRoute, something like:

App.GamesStartRoute = Ember.Route.extend({
  model: function(params) {
    return GameConfiguration.find(params.game_configuration_id);
  }
});

Hope this helps