将表单数据从Ember组件发布到RESTAPI

我试图使用actions up方法将来自使用Ember的组件中的输入和按钮组的数据发布到我的REST API中，但是代码让我有点困惑，我还没有找到一个明确的示例来说明如何做

该网站是一个追踪竞争性游戏的网站，所以在游戏结束后输入排名并在列表中查看。API中有一个表和一个端点，没有子项。基本上是一个简单的待办应用程序，但我使用组件来保持一切模块化。我还想添加编辑和删除，但这超出了这个问题的范围

应用程序/模板/组件/添加游戏.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>

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}}

{{nav bar}
{{添加游戏}}


{{game table model=model.games}
{{outlet}}

我觉得我已经掌握了其中的大部分，我只是缺少了一些Ember使用的数据下降、动作上升的方法，但还没有找到一个与我的代码类似的清晰示例。正如您可能知道的，我已经得到了将数据发送到控制台的代码，但我不确定将数据发送到路由然后发送到服务器的最佳方式。我想我需要使用这个模型，但是具体的代码

我使用的是样式和自定义按钮组组件

**controllers/application.js**

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

---

整个项目都在

上，您可以对恩伯的DDAU体系结构进行概述。当您希望将操作发送给父级进行处理时，必须通知要传递任何事件的操作组件。在本例中，如果您希望在父级（

应用程序

）中处理操作

saveGame

，则必须在调用组件时将操作传递给组件

add game

，如下所示：

**Application.hbs**

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

其中，

saveGameInParent

是应用程序控制器中存在的操作。在组件中，您需要显式调用此操作以将控件从组件传递给父级

**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);
        }
  }
});

最后，在您的应用程序控制器中，应该有一个名为

saveGameInParent

的操作来处理来自组件的冒泡操作

**controllers/application.js**

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

---

PS：看起来您提到了

rank

和

outcome

作为组件模板文件中的直接组件属性。但是在

saveGame

操作中，您试图从

model

访问那些，但您无法这样做