Переключить "бумажный диалог" внутри "повторяющегося домика"

Question

У меня есть объект "бумага-диалог" на странице. Я могу переключать его кнопкой, если он не находится внутри цикла "dom-repeat". Но если я помещу это в цикл, "this.$. Dialog.toggle();" затем будет ссылаться на нуль.

  <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" становится пустым после помещения диалога в цикл?

Answer 1

this.$ не сработает Вы должны позвонить this.$$ который равен Polymer.dom(this.root).querySelector();

Кроме того, у вас есть несколько элементов с одинаковым идентификатором, что абсолютно не соответствует стандартам 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

Я нашел свое решение, добавив "селектор массива", так что "бумажный диалог" за пределами цикла и имеет только 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();
  },