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

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？
2. 我已按照示例在 didInsetElement 事件中添加了侦听器。这是确保组件在其整个生命周期内监听事件的正确方法吗？
3. 活动的范围是什么？是否只能在我们“获取”设置它的控制器时才能听到这么长时间？

您的建议对这位初露头角的业余爱好者有很大帮助！

Answer 1

您应该不尝试从控制器触发组件上的事件！你应该做的是传递变量（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不是关于组件，而是关于控制器/视图对不再是 ember 的一部分。

当时每个控制器都有一个关联的视图，这通常会导致混淆何时将内容放置在控制器上以及何时放置在视图上。 当时是控制器和视图之间的分离，控制器管理全局和本地状态，视图基本上管理渲染。

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

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

组件在父组件上调用操作，并将可更新属性和可调用操作传递给子组件。应该这样处理。