Question

处理程序很好，但我没有在处理程序中获得正确的闭包。 this.$.success.open();找不到包含id=success的元素。如何才能正确关闭？

  <script>
    Polymer({
      is: 'rsvp-wedding',
      properties: {
        httpError: {
          type: Boolean,
          value: false
        }
      },
      _submit: function(event) {
        Polymer.dom(event).localTarget.parentElement.submit();
      },
      errorResponse: function(e) {
        console.log(e.detail.request.status);
        console.log(e);
        this.$.error.open();
      }.bind(this),
      successResponse: function(e) {
        console.log(e);
        if (e.detail.status === 200) {
          this.$.success.open();
        } else {
          this.errorResponse(e);
        }
      }.bind(this),
      attached: function() {
        var form = document.querySelector('form');
        form.addEventListener('iron-form-error', this.errorResponse);
        form.addEventListener('iron-form-response', this.successResponse);
      }
    });
  </script>

Answer 1

我敢打赌你看到了这个错误：

Uncaught TypeError: Cannot read property 'success' of undefined

不意味着它无法找到ID为＆＃34;成功＆＃34;但是this.$未定义，并且您正在尝试访问名为＆＃34;成功＆＃34;从它。

在您的代码中，您实际上绑定到外部作用域this，这是Window对象（如此demo中所示），因此绑定应该是除去。

要绑定到Polymer对象，请在Polymer对象的某个方法中调用bind(this)。在您的情况下，您在添加事件侦听器时执行此操作：

attached: function() {
  var form = document.querySelector('form');
  form.addEventListener('iron-form-error', this.errorResponse.bind(this));
  form.addEventListener('iron-form-response', this.successResponse.bind(this));
}

这是一个带有类似事件触发元素的演示：

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.4.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>
  <x-bar></x-bar>
  
  <dom-module id="x-foo">
    <script>
      Polymer({
        is: 'x-foo',
        ready: function() {
          setTimeout(function() {
            this.fire('foo');
          }.bind(this), 1000);
        }
      });
    </script>
  </dom-module>
  <dom-module id="x-bar">
    <template>
      <span id="msg">{{foo}}</span>
    </template>
    <script>
      Polymer({
        is: 'x-bar',
        properties : {
          foo: {
            type: String,
            value: "Hello world!"
          }
        },
        changeMessageColor: function() {
          this.$.msg.style.color = "red";
        },
        attached: function() {
          var foo = document.querySelector('x-foo');
          foo.addEventListener('foo', this.changeMessageColor.bind(this));
        }
      });
    </script>
  </dom-module>
</body>

＆＃13;

^jsbin

不使用.bind(this)的另一种方法是使用Polymer listen()：

attached: function() {
  var form = document.querySelector('form');
  this.listen(form, 'iron-form-error', 'errorResponse');
  this.listen(form, 'iron-form-response', 'successResponse');
}

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.4.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>

<body>
  <x-foo></x-foo>
  <x-bar></x-bar>

  <dom-module id="x-foo">
    <script>
      Polymer({
        is: 'x-foo',
        ready: function() {
          setTimeout(function() {
            this.fire('foo');
          }.bind(this), 1000);
        }
      });
    </script>
  </dom-module>
  <dom-module id="x-bar">
    <template>
      <span id="msg">{{foo}}</span>
    </template>
    <script>
      Polymer({
        is: 'x-bar',
        properties: {
          foo: {
            type: String,
            value: "Hello world!"
          }
        },
        changeMessageColor: function() {
          this.$.msg.style.color = "red";
        },
        attached: function() {
          var foo = document.querySelector('x-foo');
          this.listen(foo, 'foo', 'changeMessageColor');
        }
      });
    </script>
  </dom-module>
</body>

＆＃13;

^jsbin

关闭内部处理程序错误

1 个答案: