1

在带有闭包操作的 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文档似乎没有对此有所了解（无论如何我都找不到）。我能找到的只是这篇博文，它强调不鼓励调用任意函数（否则为什么首先要有动作？）

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

4

1 回答 1

1

没有真正的区别。看看这个旋转。

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

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

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

如果你调用一个函数，myfunction()那么this在该函数内部将是null. 如果你调用一个函数，foo.myfunction()那么this里面myfunction将是foo.

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

于 2016-09-13T09:42:54.900 回答