创建一个由组件监听的控制器事件

我在玩着制作拖放界面的想法。我有多个组件可以通过网格拖动到位。我将有一个按钮，允许用户选择不同的安排。创建一个由组件监听的控制器事件

我想要一个设置其位置的组件的函数（很简单，左边和上边）。我希望能够在插入组件时以及选择不同排列时调用此函数。

我想要做的是在路由控制器中创建一个事件。然后，我希望每个组件都能够听取该事件，并在必要时作出反应。恐怕我对这项工作不够了解。我已阅读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'); 
    },

有几件事情我不明白：

我添加了Ember.Evented mixin correc TLY？
我已经按照示例在didInsetElement事件中添加了监听器。这是确保组件在其整个生命周期中监听事件的正确方法吗？
活动的范围是什么？它能被听到这么久，我们'得到'设置它的控制器吗？

你的建议对这个萌芽的业余爱好者有很大的帮助！

来源

2016-05-31 rjoxford

你读过博客博斯特https://emberway.io/ember-js-and-html5-drag-and-drop-fa5dfe478a9a#.tgfpo6kxu？一些基本的DnD在这里行动... –

是啊，谢谢，那是我的出发点。一个很好的解释。 – rjoxford

您应该不是尝试从控制器上触发组件上的事件！你应该做的是什么传递变量（left，top），然后当你调用组件

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

现在你传下去这些属性在组件上对他们注册一个观察者：

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

只要top或left属性更改以及didInsertElement就会自动调用sizeChanged。

This question是不有关组件，但大约控制器/视图对它们余烬的不较长部分。

当时，每个控制器都有一个关联的视图，这往往会导致混淆，当将事物放置在控制器上和视图上时。那时分离是在控制器和视图之间，其中控制器管理着全局和本地状态，视图基本上管理着呈现。

随着组件的引入，这已经发生了变化。组件处理本地状态以及渲染。基本上每个组件都是一个视图。但它不再是神奇地与控制器耦合，而是从模板显式调用。引入全球国家服务。

今天，您应该遵循DDAU（Data Down Actions Up）原则，并将所有操作和属性显式传递给模板中的组件。

组件调用父组件上的操作并将可更新属性和可调用操作传递给子组件。那就是你应该如何处理它。

来源

2016-06-01 08:23:35 Lux

感谢您的深入解答。这很有意义。 – rjoxford

创建一个由组件监听的控制器事件

回答

相关问题