envoyer des données de formulaire pour quitter api du composant Ember

Question

J'essaie de publier des données à partir d'une entrée et d'un groupe de boutons dans un composant en utilisant Ember dans mon API REST en utilisant la méthode actions vers le haut, mais le code me perturbe un peu. Je n'ai pas trouvé un exemple clair de la façon de le faire.

Le site est un traqueur pour les jeux compétitifs dans Overwatch, alors entrez le rang après le jeu et le voir dans une liste. Il y a une table et un point de terminaison sans enfants dans l'API. Fondamentalement, une application simple à faire, mais j'utilise des composants pour garder tout modulaire. Je veux également ajouter modifier et supprimer, mais c'est hors de portée pour cette question.

app/templates/composants/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/composants/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}} 

J'ai l'impression d'en avoir la majeure partie, je manque juste quelques petites choses avec l'approche Data Down, Actions Up qu'utilise Ember, mais je n'ai pas trouvé d'exemple clair à faire qui ressemble à mon code. Comme vous pouvez probablement le dire, j'ai le code qui envoie les données à la console, mais je ne suis pas sûr de la meilleure façon de l'envoyer à la route pour ensuite être envoyé au serveur. Je pense que je dois utiliser le modèle, mais le code spécifique

J'utilise ember-bootstrap pour le style et le composant de groupe de boutons personnalisés.

L'ensemble du projet est sur Github

Answer 1

Vous pouvez obtenir un aperçu de l'architecture DDAU de Ember here. Lorsque vous souhaitez envoyer l'action au parent à gérer, vous devez notifier le composant de l'action où vous souhaitez transmettre un événement. Ici, dans votre cas, si vous voulez gérer l'action saveGame dans le parent (application), alors vous devez passer l'action à la composante add-game en invoquant le composant comme suit:

**Application.hbs** 

{{game-table model=model.games saveGameInParent=(action 'saveGameInParent')}} 

où saveGameInParent est l'action présent dans le contrôleur d'application. Dans le composant, vous devez appeler cette action explicitement pour passer le contrôle du composant au 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); 
     } 
    } 
}); 

Et enfin, en vous contrôleur d'application, il devrait y avoir une action nommée, saveGameInParent pour gérer l'action bouillonnait à partir du composant.

**controllers/application.js** 

actions: { 
    saveGameInParent(outcome, rank) { 
    // post your result to the server using any network library. 
    } 
} 

---

PS: On dirait que vous avez mentionné rank et outcome comme votre propriété de composants directement dans le fichier modèle du composant. mais dans l'action saveGame, vous avez essayé d'accéder à ceux de model, ce que vous ne pouvez pas faire.