Ember 中的动作冒泡答案

【问题标题】：Action bubbling in EmberEmber 中的动作冒泡
【发布时间】：2016-01-03 16:34:31
【问题描述】：

我对 Ember 比较陌生，如果这个问题的答案很明显，请原谅我。我最近开始了一份新工作，我认为他们采取行动冒泡的方法......很好奇。

这是一个包含大量嵌套组件的大型应用程序。为了将动作冒泡到控制器，他们经常使用这种东西：

actionName (parameter) {
    this.attrs.actionName(parameter);
},

然后这会冒泡到下一个组件，在那里他们将再次调用相同的操作。这将继续以这种方式进行，直到它到达定义操作的控制器。

出于各种原因，我不喜欢这个，但主要是因为它让编写任何新动作变得很麻烦。

我的问题分为两部分：

1) 对于深度嵌套的组件，有没有更好的解决方案？

2) 我以前见过sendAction，但没有在实践中使用过。 this.attrs.actionName(parameter);有什么区别？

谢谢！

【问题讨论】：

标签： ember.js

【解决方案1】：

对于深度嵌套的组件，有没有更好的解决方案？

简短的回答是否定的。 Ember 组件强制您显式地冒泡操作。消费者还必须明确地“订阅”一个动作来接收它。做出这些设计决策是为了使代码尽可能明确以避免意外错误。（想象一下，如果事件自动冒泡并且组件添加了新事件。这些事件会自动冒泡，未被捕获，然后导致错误。）

我之前见过sendAction，但没有在实践中使用过。 this.attrs.actionName(parameter); 有什么区别？

sendAction 是旧的做事方式（2.0 之前）。在 Ember 2.0 中，操作被放置在 attrs 对象中。这种方法有一些好处，但最大的好处是可读性。您应该更喜欢新方法，特别是因为新方法允许操作将值返回给调用者（sendAction 不允许这样做）。

让一个很长的故事更短一些：它看起来很冗长，但这正是 Ember 做事的方式。通常情况下，它比替代品要好得多。

【讨论】：

【解决方案2】：

这是我最近的经历（和头痛）；就像GJK说的

sendAction 是旧的做事方式（2.0 之前）。

所以这是一个禁忌。

如果您在基本控制器中指定了一个操作，您就可以这样做：

通过一个属性将动作传递给组件

//example/template.hbs

{{component "inner-component" ... innerClick=(action "outerClick" 42)}}

使用动作

//inner-component/template.hbs

<button {{action this.attrs.innerClick}}> Go! </button>

无需接触 .js 文件。

如果您使用路由，则必须执行额外步骤以确保您的控制器具有要调用的操作：

    //example/route.js

    setupController( controller, model ) {

        Ember.set( controller, 'actions', {

            outerClick: function( value ) {

                console.log( 'Action received!', value )
            }
        } )
    },

【讨论】：