0

我在页面中有一个“纸质对话”对象。如果它不在“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”在将对话框放入循环后变为空吗？

4

2 回答 2

2

this.$不会工作。你必须调用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>

和切换对话框

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

你必须设置一些 indetification (index属性)，然后在函数中你可以通过调用来获取这个属性，最后一步是通过调用在属性 内部e.target.getAttribute找到paper-dialog相同的值indexDialogthis.$$('[indexDialog="'+index+'"]')

于 2017-04-12T09:03:35.263 回答
1

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

<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();
  },
于 2017-04-13T02:57:14.857 回答