聚合物 2.0 铁形式响应触发器 dom-if

Question

如何使用来自 iron-form 的响应数据来触发 dom-if 模板？如果返回了数据，我想显示模板。此代码不起作用。我在这里做错了什么？

<link rel="import" href="../components/polymer/polymer-element.html">
<link rel="import" href="../components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../components/iron-form/iron-form.html">

<dom-module id="a-tag">
  <template>
    <iron-form>
      <form action="/" method="get">
        <input name="test">
        <button></button>
      </form>
    </iron-form>

    <template class="iftemplate" is="dom-if" if="[[data]]">
      <p>HELLO</p>
    </template>
  </template>

  <script>
    class ATag extends Polymer.Element {
      static get is() {return 'a-tag'}
      ready() {
        super.ready()
        this.shadowRoot.querySelector('iron-form').addEventListener('iron-form-response', (event) => {
          this.shadowRoot.querySelector('.iftemplate').data = event.detail.response
        })
      }
    }
    customElements.define(ATag.is, ATag)
  </script>
</dom-module>

Answer 1

你在这里做错了很多事，

首先，我建议向表单元素 iron-form 添加一个 id，这样您就可以轻松地指向 Polymer 元素的代码。

<iron-form id="my-form">
  ...
</iron-form>

并像这样添加事件侦听器：

this.$['my-form'].addEventListener('iron-form-response', ...);

您还试图在模板中添加属性 data dom-if 我不明白为什么。 [[data]] 在您的元素范围内引用属性。您必须在正确的部分定义此属性。

static get properties () {
  return {
    data: {
      type: String,
      value: ''
    }
  };
}

并在您的事件侦听器回调中：

ready() {
  super.ready()

  this.$['my-form'].addEventListener('iron-form-response', (event) => {
    // this.data = event.detail.response;
    this.data = 'some data'; // for testing
  });
}

聚合物 2.0 铁形式响应触发器 dom-if

Polymer 2.0 iron-form response trigger dom-if

polymer

polymer-2.x