Question

我正在尝试使用动作向上方法使用Ember将组件中的输入和按钮组发布到我的REST API，但代码让我感到困惑，我还没有找到一个明确的示例怎么做。

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

应用/模板/组件/附加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>

应用/组件/附加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);
        }
  }

});

应用/ 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}}

我觉得我在那里有大部分内容，我只是错过了Ember使用的Data Down，Actions Up方法的一些内容，但是没有找到一个明确的例子来解决这个问题，类似于我的代码。你可能会告诉我已经将代码发送到控制台了，但我不确定将其发送到路由然后发送到服务器的最佳方式。我想我需要使用该模型，但具体代码

我使用ember-bootstrap作为样式和自定义按钮组组件。

整个项目都在Github

Answer 1

您可以概览Ember here的DDAU架构。如果要将操作发送到父级进行处理，则必须通知操作的组件您要在其中传递任何事件。在您的情况下，如果您要处理父（saveGame）中的操作application，则必须在调用组件时将操作传递给组件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中的那些，这是您无法做到的。

发布表单数据以从Ember组件中休息api

1 个答案: