javascript - 多个 Paper-Dialog 在嵌套的 dom-repeat 中显示相同的内容

Question

我正在寻找创建多个按钮，每个按钮都有自己的显示内容的对话框。如果我取出 paper-dialog 元素，内容就会正确显示。但是，添加 paper-dialog 元素后，当我单击按钮时，所有对话框都显示相同的内容。

我是否需要将每个单独的“自我”对象输入到纸质对话框中？我在文档中没有看到这样做的选项。

<template is="dom-repeat" items="[[forms]]" as="self">
  <section onclick="clickHandler(event)">
    <paper-button data-dialog="animated">[[self.period]] [[self.type]]-Evaluation for [[self.name]]</paper-button>
    <paper-dialog id="animated" exit-animation="fade-out-animation"
                  with-backdrop>
      <template is="dom-repeat" items="[[self.questions]]" as="question">
        <div class="row">
          <b>Question [[questionNumber(index)]]: </b>[[question.question]] <br>
        </div>
        <div>
          <b>Answer:</b> <span>[[question.answer]]</span><br>
        </div>
      </template>
    </paper-dialog>
  </section>
</template>


function clickHandler(e) {
  var button = e.target;
  while (!button.hasAttribute('data-dialog') && button !== document.body) {
    button = button.parentElement;
  }
  if (!button.hasAttribute('data-dialog')) {
    return;
  }
  var id = button.getAttribute('data-dialog');
  var dialog = document.getElementById(id);
  if (dialog) {
    dialog.open();
  }
}

Answer 1

尝试为每个对话框提供不同的 ID。您可以使用类似id="animated{{index}}"where indexis the index value from dom-repeat 的东西。