Question

我有一个＆＃34;纸张对话框＆＃34;页面中的对象。如果它不在＆＃34; dom-repeat＆＃34;中，我可以通过按钮切换它。环。但是，如果我把它放在一个循环中，＆＃34;这个。$。dialog.toggle（）;＆＃34;然后将引用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();
    }

知道为什么＆＃34;这个。$。对话框＆＃34;将对话框放在循环中后变为null？

Answer 1

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

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

你必须设置一些不确定性（index属性），然后在函数中你可以通过调用e.target.getAttribute得到这个属性，最后一步是找到内部具有相同值的paper-dialog通过调用indexDialog

来this.$$('[indexDialog="'+index+'"]')属性

Answer 2

我通过添加＆＃34;数组选择器＆＃34;找到了我的解决方案，所以＆＃34;纸张对话框＆＃34;在循环之外，只有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();
  },

切换＆＃34;纸张对话框＆＃34;在一个＆＃34; dom-repeat＆＃34;

2 个答案: