Ember2.8：コンポーネントからコントローラへのアクションの送信

Question

up on the documentation for Emberを読むと、コンポーネントによってトリガされたアクションは、その名前のアクションにヒットするまで階層を上っていくという印象を受けました。しかし、ここでは今起こっていることがあります。ゲーム以来、今、私が読​​んだことによる

import Ember from 'ember'; 

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

ゲーム-card.js

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

ゲーム-card.hbs：私はそうのように書かれたゲームカード・コンポーネントを持っています-card.jsには 'proveImAlive'アクションがありません。特定のルートのコントローラ、つまりコントローラをバブルアップしようとします。

play.js（ルート/プレイ）

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 

は今、私の質問は2つあり：

1. このエラーはなぜ発生しますか？

2. 私のコンポーネントのアクションのいくつかをルートのコントローラにバブルアップさせたいと思います。例えば、ゲームカードがクリックされると、そのカードのid値（実装される）をコントローラに送信して、それを配列に格納することができます。

   ゲームカードをクリックする - >送信1の値 - > arrayinController.push（1）

私はこれをどのように達成することができますか？

Answer 1

まず通過することができ、より良い理解のために、私はあなたがエンバーの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.

これはコンポーネントが分離されているために起こることではないので、暗黙のバブリングはありません。ガイドから「コンポーネントから送信されたアクションが最初にテンプレートのコントローラに送られます」、「テンプレートのルートにバブルしてルート階層を上げていく」と言うと、コンポーネントからアクションを明示的に送信する必要があります。コンポーネントが別のコンポーネント内にネストされている場合、コントローラに到達するまで、各レイヤーでこれを行う必要があります。

1. Why is this error happening?

は、テンプレート内のアクションをバインドする必要があります：私は答えのこの部分のために閉鎖アクションを使用するつもりです{{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）コントローラ

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

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

B）

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

Dダウンアレイ

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）結合するために閉鎖動作をプッシュアクションを実装で配列を初期化）引数を渡すアクションをトリガーする

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

Answer 2

あなたは明示的にアクションハンドラを設定する必要があります。

{{component-name fooAction=fooHandler}} 

それはモジュラーおよび再利用可能なコンポーネントを保持するのに役立ちますので、これが必要です。暗黙のリンクにより、コンポーネントが意図しない動作を引き起こす可能性があります。

Answer 3

game-cardコンポーネントをplay.hbsに含めた場合にのみ、コードが機能します。私は特定のルートのコントローラがあなたのケースで再生されていないとは思わない。ここで

は閉鎖アクションを使用し、代わりにアクションをバブリングのworking-twiddle

です。あなたは以下のリンク、
https://dockyard.com/blog/2015/10/29/ember-best-practice-stop-bubbling-and-use-closure-actions
http://miguelcamba.com/blog/2016/01/24/ember-closure-actions-in-depth/
https://emberigniter.com/send-action-does-not-fire/