Ember.js 最佳实践 - 我可以/应该重写 sendAction 吗？答案

【问题标题】：Ember.js Best Practices - Can/Should I override sendAction?Ember.js 最佳实践 - 我可以/应该重写 sendAction 吗？
【发布时间】：2017-04-25 17:07:28
【问题描述】：

在我的 Ember 应用程序中，我有大量的模态对话框组件，它们在我的应用程序路由中呈现，如下所示：

{{component modalComponent options=modalOptions}}

所有对话框组件都从一个基类扩展而来，为方便起见，我在其中覆盖了sendAction。重写的重点是总是触发target 上的一些操作，而不是sendAction 的默认行为“如果属性未定义，则不执行任何操作”。看起来是这样的：

sendAction: function (actionName) {
  if (Em.isEmpty(this.get(actionName))) {
    this.set(actionName, actionName);
  }
  this._super(...arguments);
},

这似乎像我预期的那样工作：总是在目标上触发一个动作，然后会在堆栈中冒泡。我想知道的是......

覆盖sendAction 是否有任何我不知道的影响/副作用？

【问题讨论】：

标签： ember.js

【解决方案1】：

目前，在组件中处理动作的更被接受的方法之一是通过闭包动作：

在模板中：

{{do-button id="save" clickHandler=(action "storeEvent") contextMenuHandler=(action "logEvent") buttonText="Store It"}}

在组件中：

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    clickHandler(event) {
      this.get('clickHandler')(event);
    },

    contextMenuHandler(event) {
      event.preventDefault();
      this.get('contextMenuHandler')(event);
    }
  }
});

最后，摘自控制器：

  actions: {
    doStuff(event) {
      alert(event);
    },
    logEvent(event) {
      console.log(event);
    },

所以基本上，您将传递给组件的操作并调用它，从组件中传递您想要的任何参数。闭包动作非常可爱，它们使操作更容易。希望这能让你的车轮转动:)

【讨论】：