Question

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

sample.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

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

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

  infos.open();
}

这会产生以下错误： Uncaught TypeError: Cannot read property 'querySelector' of undefined

我已经尝试了几种解决方案，但是没有，因为没有任何效果。我在很多线程上看到的唯一一件事是使用Timer.run()并在回调中编写我的代码，但这看起来像是一个黑客。我为什么需要一个计时器？

我理解我的问题可能是dom-repeat的内容是懒洋洋地生成的，我在查询之前查询了这些项目。它们被添加到本地DOM。

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

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

谢谢你的时间！

更新1：

在阅读了Gunter的建议之后，虽然它们都没有真正起作用，但是在dom-repeat内部没有修复ID这一事实让我思考和查询了纸质对话

b>而不是id本身，现在我的对话框弹出！

sample.dart：

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

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

更新2：

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

@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(); }

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

Answer 1

您需要将Polymers DOM API与shady DOM一起使用（默认）。如果你启用了shadow DOM，那么你的代码可能也会起作用。

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

如何查询dom-repeat

1 个答案: