在"dom-repeat“中切换”文件对话“

Question

我在页面中有一个"paper-dialog“对象。如果它不在"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>

和

  toggleDialog: function(e) {
      this.$.dialog.toggle();
    }

你知道为什么在将对话框放入循环后"this.$.dialog“变成null吗？

Answer 1

this.$不起作用。您必须调用等于Polymer.dom(this.root).querySelector();的this.$$

此外，您有多个元素具有相同的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>

和toggleDialog

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

您必须设置一些索引(index属性)，然后在函数中，您可以通过调用e.target.getAttribute来获取此属性，最后一步是通过调用this.$$('[indexDialog="'+index+'"]')在indexDialog属性中查找具有相同值的paper-dialog

Answer 2

我通过添加"array-selector“找到了我的解决方案，因此在循环之外添加了"paper-dialog”，并且只有一个实例。(我们向其中提供不同的数据)。

<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();
  },