Polymer 1.x: "this" 对象的事件侦听器范围

Question

我已经为我的 <iron-ajax> 调用添加了一个事件侦听器到我的自定义元素。

问题

How to I reference the last-response property of the <iron-ajax> element from an imperatively defined event listener?

查看下面代码中的注释。

自定义-element.html

<template>
  ...
  <iron-ajax id="ajax" last-response="{{ajax}}"></iron-ajax>
  ...
<template>
<script>
  ...
  var t = this.$.ajax;
  t.addEventListener('response', function(e) {
    console.log(this.ajax); // undefined
    console.log(e); // Successfully logs response event object to console
  });
  ...
</script>

Answer 1

在事件侦听器的范围内包含 this 对象。

引入一个名为 that 的新变量并按如下方式应用必要的范围。

custom-element.html

  var that = this, // Adds scope
  t = this.$.ajax;
  t.addEventListener('response', function(e) {
    console.log(that.ajax); // Successful reference
  });

Answer 2

我找到了解决这个问题的两种方法。

首先（当我有一个 iron-ajax-form 时我使用的是将事件侦听器附加到自定义元素，并让它从里面的元素中冒出来

所以

this.addEventListener('iron-form-response',function(e) {
//this is correct here
});

另一种方法，当我使用熨斗 ajax 本身时使用（即调用 this.$.ajax.generateRequest();

是在我的元素上设置一个函数来获取响应 - 所以

<iron-ajax
  id="validateuser"
  url="/api/validate_user"
  handle-as="json"
  method = "POST"
  body = "[[user]]"
  content-type="application/json"
  on-response="_validate"></iron-ajax>

然后在 _validate 中，这仍然指的是我的自定义元素。在这种情况下我不需要 last_response，因为响应是这样找到的

    _validate: function(e) {
    var response = e.detail.response;
    this.$.spinner.cancel();
    if (response.status) {
      //this user validated, so we are logged on

Answer 3

在函数中使用Javascriptbind()改变this的上下文：

var t = this.$.ajax;
t.addEventListener('response', function(e) {
  console.log(this); // this now = t
  console.log(e); // Successfully logs response event object to console
}).bind(t);

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Polymer 1.x: "this" 对象的事件侦听器范围

Polymer 1.x: Event listener scope of "this" object

javascript

polymer

polymer-1.0

问题