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运行时的角度来看，范围的区别是什么？例如，在这两种情况下，“这个”是相同的吗？

Answer 1

没有什么区别。结帐this旋转。

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

动作调用由ember绑定到当前this上下文。这基本上是关闭动作的{{action}}帮助器。它创建了一个新函数，在this帮助程序被评估时，{{action}}作为上下文调用原始函数。

如果您调用当前函数范围之外的其他函数this，总是不同。了解this始终与函数范围绑定非常重要。

如果您调用myfunction()之类的函数，则该函数内的this将为null。如果您拨打foo.myfunction()之类的功能，则this内的myfunction将为foo。

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

EmberJS 2.7 - 使用闭包动作来调用函数vs将该函数作为动作调用

1 个答案: