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

时间:2016-05-31 21:46:47

标签: ember.js

我正在尝试制作拖放界面的想法。我有多个组件可以拖动到网格上的位置。我将有一个按钮,允许用户选择不同的安排。

我想在组件上设置一个函数来设置它的位置(非常简单地用左和上)。我希望能够在插入组件时以及选择不同的排列时调用此函数。

我想要做的是在路由控制器中创建一个事件。然后,我希望每个组件都能够监听事件,并在必要时做出反应。我担心我不太了解这项工作。我已经在这里阅读了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?
  2. 我已根据示例在didInsetElement事件中添加了侦听器。这是确保组件在整个生命周期内监听事件的正确方法吗?
  3. 活动的范围是什么?我们只能听到这么长时间才能得到这样的声音吗?设置它的控制器?
  4. 你的建议对这位正在崭露头角的业余人士有很大的帮助!

1 个答案:

答案 0 :(得分:2)

您应该尝试从控制器触发组件上的事件!你应该做的是传递变量(lefttop),然后在组件上注册观察者

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

现在,在调用组件时传递这些属性:

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

只要sizeChangedtop属性发生变化,left就会自动调用didInsertElement

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

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

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

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

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