ember.js - Ember 2.8 : Sending an action from a component to the controller

Question

阅读up on the documentation for Ember ，我的印象是，当组件触发某个操作时，它将沿层次结构上升，直到遇到具有该名称的操作。但这就是现在正在发生的事情。我有一个游戏卡组件，如下所示:

游戏卡.hbs

<div class="flipper">
  <div class="front"></div>
  <div class="back">
    <img {{action "proveImAlive"}} src={{symbol}} />
  </div>
</div>

游戏卡.js

import Ember from 'ember';

    export default Ember.Component.extend({
      classNames: ['flip-container'],
      actions: {
        //blank for now because testing for bubbling up
      }
    });

现在，根据我所读到的内容，由于 game-card.js 没有“proveImAlive”操作，因此它将尝试向上冒泡层次结构，即特定路线的 Controller 。

play.js(路线/play)

import Ember from 'ember';

    export default Ember.Controller.extend({

      actions: {
        proveImAlive() {
          console.log('Im aliiiiveeee');
        }
      }
    });

但是当我最终运行我的应用程序时，我收到此错误:

Uncaught Error: Assertion Failed: <testground@component:game-card::ember483> had no action handler for: proveImAlive

现在我的问题有两个:

1. 为什么会发生这个错误？

2. 我希望我的组件的一些操作能够冒泡到路由的 Controller 。例如，当单击游戏卡时，我想将该卡的 id 值(要实现)发送到 Controller ，以便它可以将其存储在数组中。

   游戏卡被点击 --> 发送值 1 --> arrayinController.push(1)

我怎样才能实现这个目标？

Answer 1

首先，我想指出您链接到了 Ember v1.10.0 的文档。您应该查阅您正在使用的 Ember 版本的文档，您提到的版本是 v2.8.0 .

Now according to what I've read, since game-card.js does not have a 'proveImAlive' action, it will try to bubble up the hierarchy i.e. the controller for the particular route.

这并不是真正发生的情况，因为组件是隔离的，因此不存在隐式冒泡。当指南说“从组件发送的操作首先进入模板的 Controller ”和“它将冒泡到模板的路由，然后沿着路由层次结构向上”时，它们意味着您必须显式地从组件向上发送操作。如果组件嵌套在另一个组件内，则必须对每一层执行此操作，直到到达 Controller 。

1. Why is this error happening?

您需要在模板中绑定(bind) Action :{{game-card ProveImAlive="proveImAlive"}}

2. i'd like to send the id value (to be implemented) of that card up to the controller so it can store it on an array.

我将在这部分答案中使用关闭操作。正如 @kumkanillam 所提到的，它们具有更好的人体工程学原理，如果您查阅指南，它们是当前建议的使用操作的方式。

我准备了一个Twiddle为你。

a) 在 Controller 中初始化数组

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  gameCards: null,

  init() {
    this.set('gameCards', []);
  }
}

b) 实现推送到数组的操作

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  gameCards: null,

  init() {
    this.set('gameCards', []);
  },

  actions: {
    proveImAlive(cardNo) {
      this.get('gameCards').pushObject(cardNo);
      console.log('Im aliiiiveeee - cardNo', cardNo);
    }
  }
});

c) 向下绑定(bind)关闭操作

{{game-card proveImAlive=(action 'proveImAlive')}}

d) 触发传递参数的操作

<div class="flipper">
  <div class="front"></div>
  <div class="back">
    <button {{action proveImAlive 1}}> ProveIamAlive</button>
  </div>
</div>