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 中删除一些元素，然后调用外部加载的 JS 文件中的另一个函数 (filepicker.pick)。

在 (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 区别是什么？例如，当你在函数内部时，在动作内部，从 JS 运行时的角度来看，作用域有什么区别？例如，'this' 在这两种情况下是一样的吗？

Answer 1

确实没有区别。结帐 this 旋转。

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

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

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

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

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

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

EmberJS 2.7 - using a closure action to call a function vs calling that function as an action

closures

ember.js

ember-components