samedi 22 avril 2017

post form data to rest api from Ember component

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>
      
    </label>
  </div>

  <div class="form-group">
    <label class="control-label">
      Outcome
      
        Win
        Draw
        Loss
      
    </label>
  </div>

  <div class="spacer"></div>

  <div class="form-group">
    <button  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


<div class="container-fluid">
  <div class="row">
    <div class="col-md-offset-2 col-sm-8 col-md-8 main">
      
      <br>
      
    </div>
  </div>
</div>



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




Aucun commentaire:

Enregistrer un commentaire