samedi 8 octobre 2016

Ember2.8: Sending an action from a component to the controller

Reading up on the documentation for Ember, I was under the impression that when an action is triggered by a component, it will go up the hierarchy until it hits an action with that name. But here's what's happening right now. I have a game-card component written like so:

game-card.hbs

<div class="flipper">
  <div class="front"></div>
  <div class="back">
    <img  src= />
  </div>
</div>

game-card.js

import Ember from 'ember';

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

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.

play.js (the route /play)

import Ember from 'ember';

    export default Ember.Controller.extend({

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

But when I finally run my application, I get this error:

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

Now my question is twofold:

  1. Why is this error happening?

  2. I want some of my component's actions to bubble up to the route's controller. For example, when a game-card is clicked, 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.

    game-card is clicked --> sends value of 1 --> arrayinController.push(1)

How can I achieve this?




Aucun commentaire:

Enregistrer un commentaire