コンポーネントが聴いているコントローライベントを作成する

Question

私はドラッグアンドドロップインターフェイスを作るためのアイデアを出しています。私は、グリッド上の位置にドラッグできる複数のコンポーネントを持っています。私は、ユーザーが異なるアレンジを選択できるようにするボタンを持っています。

コンポーネントの位置を設定する関数が必要です（左と上で非常に簡単です）。コンポーネントが挿入されているときと別の配置が選択されているときにこの関数を呼び出せるようにしたい。

私がしたいことは、ルートのコントローラにイベントを作成することです。私はその後、各コンポーネントがイベントを聞いて、必要に応じて反応できるようにしたいと考えています。私はこの仕事をするのに十分理解していないのではないかと思います。私はAPIとここにいくつかの質問（1、2）を読んだことがありますが、運はありません。

は、ここでのルートのコントローラーは...私が持っているもの

です：

import Ember from 'ember';  
export default Ember.Controller.extend(Ember.Evented, { 
    actions: { 

     callPosition: function(){ 
      this.trigger('position'); 
      console.log('Trigger set...'); 
     }, 
}) 

とコンポーネント：

import Ember from 'ember'; 
export default Ember.Component.extend(Ember.Evented, { 

    didInsertElement : function(){ 
     this.get('controller').on('position', this, this.position); 
    }, 

    position: function(){ 
     console.log('event heard by the component'); 
    }, 

私は理解していないいくつかのこと：

1. Ember.Evented mixin correcを追加しましたか？だって？
2. この例のように、リスナーをdidInsetElementイベントに追加しました。これは、コンポーネントがその生涯を通してイベントをリッスンする正しい方法ですか？
3. イベントの対象は何ですか？それを設定したコントローラーを「取得」するだけで、それは長い間聞くことができますか？

あなたのアドバイスは、この出芽アマチュアに大きな助けとなります！

Answer 1

あなたはではありませんコントローラーからコンポーネントのイベントを起動しようとしてください！

{{my-component top=myCoolDnDElement.top left=myCoolDnDElement.left}} 

：何 がやるべきことは今、あなたはあなたがコンポーネントを呼び出すときに、これらの属性を伝承変数（ left、 top）を通過し、その後、コンポーネント

sizeChanged: Ember.on('didInsertElement', Ember.observer('top', 'left' function() { 
    // arrange it 
})) 

にそれらのオブザーバを登録することです

topまたはleftの属性が変更され、didInsertElementに変更されたときに自動的にsizeChangedが呼び出されます。

This questionは、コンポーネントに関するないが、燃えさしの長くない部分であるコントローラ/ビューのペアについて。

すべてのコントローラには関連付けられたビューがありました。コントローラに物を配置するときやビュー上にあるときに混乱を招くことがよくあります。 その後、コントローラーとビューの間で分離が行われました。コントローラーはグローバルとローカルの状態とビューを管理しており、基本的にレンダリングを管理していました。

コンポーネントの導入により、これが変更されました。コンポーネントはローカル状態とそのレンダリングを処理します。基本的にすべてのコンポーネントはビューです。しかし、もはや魔法のようにコントローラに結合されていませんが、テンプレートから明示的に呼び出されます。グローバルな状態のためにサービスが導入されました。

今日、DDAU（データダウンアクションアップ）の原則に従い、すべてのアクションと属性をテンプレートのコンポーネントに明示的に渡す必要があります。

コンポーネントは親コンポーネントに対してアクションを呼び出し、更新可能な属性と呼び出し可能なアクションを子コンポーネントに渡します。あなたはそれをどのように処理すべきか？