问题

Question

我已为我的<iron-ajax>电话的自定义元素添加了一个事件监听器。

问题

如何从命令式定义的事件侦听器引用last-response元素的<iron-ajax>属性？

请参阅以下代码中的评论。

定制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

使用Javascript bind（）更改函数中的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

Answer 2

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

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

定制element.html

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

Answer 3

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

首先（我使用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

Polymer 1.x：事件监听器范围＆＃34;这个＆＃34;宾语

问题

3 个答案: