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');
    },

我不理解的一些事情：

我是否正确添加了Ember.Evented mixin？
我已根据示例在didInsetElement事件中添加了侦听器。这是确保组件在整个生命周期内监听事件的正确方法吗？
活动的范围是什么？我们只能听到这么长时间才能得到这样的声音吗？设置它的控制器？

你的建议对这位正在崭露头角的业余人士有很大的帮助！

Answer 1

您应该不尝试从控制器触发组件上的事件！你应该做的是传递变量（left，top），然后在组件上注册观察者

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

现在，在调用组件时传递这些属性：

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

只要sizeChanged或top属性发生变化，left就会自动调用didInsertElement。

This question 不关于组件，但关于不再是ember 的一部分的控制器/视图对。

当时每个控制器都有一个相关的视图，这通常会导致在控制器上和放在视图上时的混乱。当时控制器和视图之间存在分离，控制器管理全局和本地状态，视图基本上管理渲染。

随着组件的引入，这已经发生了变化。组件处理本地状态以及对其的呈现。基本上每个组件都是一个视图。但它不再神奇地耦合到控制器，而是从模板中明确调用。对于全球国家服务的介绍。

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

组件调用父组件上的操作，并将可更新属性和可调用操作传递给子组件。多数民众赞成你应该如何处理它。

创建组件侦听的控制器事件

1 个答案: