ポリマー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を追加するためにアドバイスでしょう。

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

、そのようなイベントリスナーを追加します。

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

また、あなたが、私はなぜ理解していないテンプレートdom-ifにプロパティdataを追加しようとしています。 [[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 
    }); 
}