binding - 如何查询 dom-repeat 中的元素

Question

我一直在网上搜索有关如何从 Dart 代码中查询由 dom-repeat 元素生成的元素的明确答案。

示例.html

<dom-module id="so-sample>
  <style>...</style>
<template>
  <template is="dom-repeat" items="[[cars]] as="car>
    ...
    <paper-button on-click="buttonClicked">Button</paper-button>

    <paper-dialog id="dialog">
      <h2>Title</h2>
    </paper-dialog>
  </template>
</template>

sample .dart

我将在这里省略样板代码，例如导入或查询我的数据库以填充汽车属性；一切正常。

...
@reflectable
void buttonClicked(e, [_])
{
  PaperDialog infos = this.shadowRoot.querySelector("#dialog");

  infos.open();
}

这会产生以下错误: Uncaught TypeError: Cannot read property 'querySelector' of undefined
我尝试了几种“解决方案”，但都没有，因为没有任何效果。
我在很多线程上唯一看到的是使用 Timer.run()并在回调中编写我的代码，但这似乎是一个 hack。为什么我需要一个计时器？

我知道我的问题可能是 dom-repeat 的内容是延迟生成的，我在将项目添加到本地 DOM 之前查询它们。

我没有遵循的另一个建议是使用 Mutation Observers。我在 polymer API 文档中读到应该改用 observeNodes 方法，因为它在内部使用 MO 来处理元素的索引，但是仅仅打开一个对话框似乎又有点复杂。

我的最终目标是将每个生成模型的按钮绑定(bind)到专用的纸质对话框，以显示有关该项目的其他信息。
有没有人这样做过？ (我希望如此:p)

谢谢你的时间 !

更新1:

在阅读了 Gunter 的建议之后，虽然它们都没有真正自己工作，但 ID 没有在 dom-repeat 中被破坏的事实让我思考并查询纸质对话框而不是 id 本身，现在我的对话框弹出了!

sample Dart :

PaperDialog infos = Polymer.dom(root).querySelector("paper-dialog");

infos.open();

我现在希望每个按钮都会调用相关的对话框，因为我会在对话框中绑定(bind)与我点击的项目相关的数据~

更新 2:

所以，不，数据绑定(bind)没有按预期工作:所有按钮都绑定(bind)到索引 0 处的项目，就像我担心的那样。我尝试了几种方法来查询正确的纸质对话框，但没有任何效果。我发现的唯一“解决方法”是将所有纸质对话框查询到一个列表中，然后从该列表中获取“第 index 个”元素。

@reflectable
void buttonClicked(e, [_])
{
  var model = new DomRepeatModel.fromEvent(e);
  List<PaperDialog> dialogs = Polymer.dom(this.root).querySelectorAll("paper-dialog");
  dialogs[model.index].open();
}

这段代码确实有效，但是当您真的只需要一个并且您已经知道哪个元素时，获取所有元素感觉有点浪费资源。

所以是的，我最初的问题已经解决了，但我仍然想知道为什么我不能从他们的 id 查询对话框:

...
<paper-dialog id="dialog-[[index]]">
...
</paper-dialog>

@reflectable
void buttonClicked(e, [_])
{
  var model = new DomRepeatModel.fromEvent(e);
  PaperDialog dialog = Polymer.dom(this.root).querySelector("dialog-${model.index}");
  dialog.open();
}

使用此代码，对话框始终为空，尽管我可以在 DOM 树中找到正确标识的那些对话框。

Answer 1

您需要将 Polymers DOM API 与 shady DOM(默认)一起使用。如果您启用影子 DOM，您的代码可能也可以正常工作。

PaperDialog infos = new Polymer.dom(this).querySelector("#dialog")