2016-05-31 76 views
0

我在玩着製作拖放界面的想法。我有多個組件可以通過網格拖動到位。我將有一個按鈕,允許用戶選擇不同的安排。創建一個由組件監聽的控制器事件

我想要一個設置其位置的組件的函數(很簡單,左邊和上邊)。我希望能夠在插入組件時以及選擇不同排列時調用此函數。

我想要做的是在路由控制器中創建一個事件。然後,我希望每個組件都能夠聽取該事件,並在必要時作出反應。恐怕我對這項工作不夠了解。我已閱讀API和這裏的幾個問題(12),但沒有運氣。

這裏就是我有...

路線的控制器:

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 TLY?
  2. 我已經按照示例在didInsetElement事件中添加了監聽器。這是確保組件在其整個生命週期中監聽事件的正確方法嗎?
  3. 活動的範圍是什麼?它能被聽到這麼久,我們'得到'設置它的控制器嗎?

你的建議對這個萌芽的業餘愛好者有很大的幫助!

+0

你讀過博客博斯特https://emberway.io/ember-js-and-html5-drag-and-drop-fa5dfe478a9a#.tgfpo6kxu?一些基本的DnD在這裏行動... –

+1

是啊,謝謝,那是我的出發點。一個很好的解釋。 – rjoxford

回答

2

您應該不是嘗試從控制器上觸發組件上的事件!你應該做的是什麼傳遞變量(lefttop),然後當你調用組件

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

現在你傳下去這些屬性在組件上對他們註冊一個觀察者:

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

只要topleft屬性更改以及didInsertElement就會自動調用sizeChanged

This question是不有關組件,但大約控制器/視圖對它們餘燼的不較長部分。

當時,每個控制器都有一個關聯的視圖,這往往會導致混淆,當將事物放置在控制器上和視圖上時。 那時分離是在控制器和視圖之間,其中控制器管理着全局和本地狀態,視圖基本上管理着呈現。

隨着組件的引入,這已經發生了變化。組件處理本地狀態以及渲染。基本上每個組件都是一個視圖。但它不再是神奇地與控制器耦合,而是從模板顯式調用。引入全球國家服務。

今天,您應該遵循DDAU(Data Down Actions Up)原則,並將所有操作和屬性顯式傳遞給模板中的組件。

組件調用父組件上的操作並將可更新屬性和可調用操作傳遞給子組件。那就是你應該如何處理它。

+0

感謝您的深入解答。這很有意義。 – rjoxford