EmberJS 2.7 - 使用闭包动作调用函数与调用该函数作为动作

Question

在带有闭包操作的 Ember 中，您可以传递一个函数，如下所示：

1

    <div class="dropzone text-center" {{action (action openFilePicker)}}>   
<!-- this calls a function (no quotes!) -->
    </div>

而不是调用一个动作，如下所示。

2

    <div class="dropzone text-center" {{action (action 'openFilePicker')}}> 
<!-- this calls an action (quotes!) -->
    </div>

在 (1) 中，支持此组件的代码如下所示：

  openFilePicker: function () {
    let child = this.$('div:first-child');
    child.removeClass('is-dragging');
    child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>');
    filepicker.pick({
      container: 'modal',
      maxSize: (5 * 1024 * 1024),
      services: ['COMPUTER']
    });
  }

这使用 JQuery 从 DOM 中删除一些元素，然后调用另一个函数（filepicker.pick），该函数位于外部加载的 JS 文件中。

在 (2) 中，相同的代码在一个动作中：

actions: {
    openFilePicker: function () {
        let child = this.$('div:first-child');
        child.removeClass('is-dragging');
        child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>');
        filepicker.pick({
          container: 'modal',
          maxSize: (5 * 1024 * 1024),
          services: ['COMPUTER']
        });
    }
}

这样做有什么好处和坏处？我知道 (1) 不是这样做的推荐方式，但肯定 (1) 可以更轻松地访问 component 中的其他代码（例如组件的属性）。像往常一样，Ember 文档似乎没有说明这一点（无论如何我都找不到）。我能找到的只有this blog post，这表明不鼓励调用任意函数（否则为什么首先要有动作？）

所以虽然这个问题可能会导致意见，但这不是我所追求的。我想了解这两种方法之间的SCOPING 区别是什么？例如，当你在函数 INSIDE 动作内部时，从 JS 运行时的角度来看，范围有什么区别？例如，这两种情况下的“this”是一样的吗？

Answer 1

其实并没有什么不同。结帐this twiddle。

唯一的大区别是动作查找时间。虽然{{action 'foo'}} 要求foo 在限定时间内存在，但={{action 'foo'}} 不需要（关闭操作）。

动作调用被 ember 绑定到当前的 this 上下文。这基本上是 {{action}} 关闭操作的助手所做的。它创建了一个新函数，该函数调用原始函数，this 是评估 {{action}} 助手时的上下文。

如果您在当前函数范围之外调用另一个函数，this 将总是不同。 了解this 始终绑定到函数范围很重要。

如果您调用像myfunction() 这样的函数，那么该函数内部的this 将是null。如果你调用像foo.myfunction() 这样的函数，那么myfunction 中的this 将是foo。

确保您完全理解this。简而言之，this 在 Ember 中没有什么不同。这是标准的 Javascript。