Polymer 切换a"；“纸张对话”；在a内；“dom repeat”；

我在页面中有一个“纸张对话框”对象。如果它不在“dom repeat”循环中，我可以通过按钮切换它。但如果我把它放在一个循环中，“this.$.dialog.toggle（）；”将引用null

  <template is="dom-repeat" items="{{news}}" index-as"index">
    <paper-dialog id="dialog"><h3>{{item.date}}</h3></paper-dialog>
    <paper-button on-tap="toggleDialog">View {{item.name}}</paper-button>
  </template>

---

知道为什么将对话框放入循环后“this.$.dialog”变为空吗

这个。$

不起作用。您必须调用

this.$$

，它等于

Polymer.dom（this.root）.querySelector（）

另外，您有多个具有相同ID的元素，这完全违反html标准

因此，您可以执行以下操作：

  <template is="dom-repeat" items="{{news}}" index-as"index">
    <paper-dialog id="dialog" indexDialog$='[[index]]'><h3>{{item.date}}</h3>
    </paper-dialog>
      <paper-button on-tap="toggleDialog" index$='[[index]]'>View {{item.name}}
    </paper-button>
  </template>

您必须设置一些索引（
index
attribute），然后在函数中可以通过调用
e.target.getAttribute
获得此属性，最后一步是通过调用
this.$$（'[indexDialog=“'+index+']”来查找
paper dialog
中具有相同值的
indexDialog
属性
这个。$
不起作用。您必须调用
this.$$
，它等于
Polymer.dom（this.root）.querySelector（）

另外，您有多个具有相同ID的元素，这完全违反html标准

因此，您可以执行以下操作：

  <template is="dom-repeat" items="{{news}}" index-as"index">
    <paper-dialog id="dialog" indexDialog$='[[index]]'><h3>{{item.date}}</h3>
    </paper-dialog>
      <paper-button on-tap="toggleDialog" index$='[[index]]'>View {{item.name}}
    </paper-button>
  </template>

您必须设置一些索引（
index
attribute），然后在函数中可以通过调用
e.target.getAttribute
获得此属性，最后一步是通过调用
this.$$（'[indexDialog=“'+index+']”来查找
paper dialog
中具有相同值的
indexDialog
属性
我通过添加一个“数组选择器”找到了我的解决方案，因此“paper dialog”在循环之外，只有一个实例。（我们将不同的数据输入其中）

我通过添加一个“数组选择器”找到了我的解决方案，因此“paper dialog”在循环之外，只有一个实例。（我们将不同的数据输入其中）

  toggleDialog: function(e) {
      var index = e.target.getAttribute("index");
      this.$$('[indexDialog="'+index+'"]').toggle();
  }

<array-selector id="selector" items="{{news}}" selected="{{selected}}"></array-selector>
<paper-dialog id="dialog" entry-animation="scale-up-animation"
exit-animation="fade-out-animation">......

  toggleDialog: function(e) {
    var item = this.$.news.itemForElement(e.target);
    this.$.selector.select(item);
    this.$.dialog.toggle();
  },