聚合物-dom-if模板中的訪問元素

Question

<dom-module id="my-view1">
  <template id="methodScope">
    <paper-dialog id="modal1">
      <paper-swatch-picker></paper-swatch-picker>
      <paper-button dialog-confirm autofocus>Fertig</paper-button>
    </paper-dialog>
    <paper-toast id="copiedColor" text="Farbe in die Zwischenablage kopiert!"></paper-toast>
  </template>

  <template id="create" is="dom-if" if="{{mapChosen}}" restamp="true">
    <iron-ajax auto url$="{{mapJson}}" handle-as="json" last-response="{{mapData}}"></iron-ajax>

    <paper-button id="button1">Data</paper-button>
  </template>

  <script>
    Polymer({
      is: 'my-view1',
      attached: function(event) {
        dialog = this.$.modal1;
        colorPick = this.$.colorpicker;
        var self = this;
        this.$.colorpicker.addEventListener('color-picker-selected',function() {
          self._alertColor()
          self.selectedColor = colorPick.color;
          self.copyToClipboard(colorPick.color);
          dialog.close();
          console.log("fired");
        })
      }
      var button = this.$.button1;
    });
 </script>
</dom-module>

訪問dom-if模板外部的元素可以很好地工作，但是無論我做什么，我都無法在其內部訪問它們。 我已經嘗試過使用this.async和this.$$ -全部返回undefined。 如何使用dom-if和ID為“ create”訪問模板中的按鈕？

我剪切了一些代碼，所以如果您看不到某些功能或其他內容，那是因為

Answer 1

嘗試收聽dom-change事件。 以下是dom-repeat的示例，但同樣適用於dom-if也

 <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> <dom-module id="repeat-completion"> <template> <style></style> <template is="dom-repeat" items="{{items}}" as="item" on-dom-change="_domComplete"> <div id$="num{{index}}">{{item}}</div> </template> </template> </dom-module> <script> Polymer({ is: 'repeat-completion', properties: { items: { type: Array, value: function() { return [1, 2, 3, 4, 5] } } }, _domComplete: function(e) { if (e.returnValue) console.log(this.$$("#num1")); } }) </script> <repeat-completion></repeat-completion>