post form data to rest api from Ember component - rest

Question

I'm trying to post data from an input and a button group in a component using Ember to my REST API using the actions up method, but the code is confusing me a bit and I haven't found a clear example of how to do it.
The site is a tracker for competitive games in Overwatch, so enter the rank after the game and see it in a list. There is one table, and one endpoint with no children in the API. Basically a simple to-do app, but i'm using components to keep everything modular. I also want to add edit and delete, but that is out of scope for this question.
app/templates/components/add-game.hbs
<form class="form-inline">
<div class="form-group">
<label class="control-label">
Rank <small>(After match)</small>
{{input value=rank type="number" min="4" class="form-control"}}
</label>
</div>
<div class="form-group">
<label class="control-label">
Outcome
{{#bs-button-group value=outcome type="radio" onChange=(action (mut outcome)) as |bg|}}
{{#bg.button type="default" value='W'}}Win{{/bg.button}}
{{#bg.button type="default" value='D'}}Draw{{/bg.button}}
{{#bg.button type="default" value='L'}}Loss{{/bg.button}}
{{/bs-button-group}}
</label>
</div>
<div class="spacer"></div>
<div class="form-group">
<button {{action 'saveGame'}} type="submit" class="btn btn-default btn-primary">Save</button>
</div>
</form>
app/components/add-game.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
saveGame() {
const outcome = this.get('model.outcome');
const rank = this.get('model.rank');
console.log(outcome);
console.log(rank);
}
}
});
app/application.hb
{{nav-bar}}
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-2 col-sm-8 col-md-8 main">
{{add-game}}
<br>
{{game-table model=model.games}}
</div>
</div>
</div>
{{outlet}}
I feel like I have most of it there, im just missing a few things with the Data Down, Actions Up approach that Ember uses, but haven't found a clear example to work off that is similar to my code. As you can probably tell I've got the code sending the data to the console, but im not sure of the best way to send it up to the route to then be sent to the server. I think I need to use the model, but the specific code
I am using ember-bootstrap for the styling and custom button group component.
The whole project is on Github

Answer 1

You can get an overview of DDAU architecture of Ember here. When you want to send the action up to the parent to handle, you have to notify the component of the action where you want to pass out any event. Here in your case, if you want to handle the action saveGame in the parent (application), then you have to pass the action to the component add-game while invoking the component as below:
**Application.hbs**
{{game-table model=model.games saveGameInParent=(action 'saveGameInParent')}}
where saveGameInParent is the action present in the application controller. In the component, you need to call out this action explicitly to pass out the control from the component to parent.
**component/add-game.js**
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
saveGame() {
// do you really mean to access these props from model??
const outcome = this.get('model.outcome');
const rank = this.get('model.rank');
this.saveGameInParent(outcome, rank);
}
}
});
And finally, in you application controller, there should be action named, saveGameInParent to handle the bubbled up action from the component.
**controllers/application.js**
actions: {
saveGameInParent(outcome, rank) {
// post your result to the server using any network library.
}
}
PS: It looks like you have mentioned rank and outcome as your direct component property in the component's template file. but in the saveGame action, you tried to access those from model, which you cannot do.