无法使用 Dart-Polymer 中自动绑定 dart 模板中的选择器进行查询答案

【问题标题】：Unable to query with selectors inside auto-binding-dart templates in Dart-Polymer无法使用 Dart-Polymer 中自动绑定 dart 模板中的选择器进行查询
【发布时间】：2014-08-30 03:45:55
【问题描述】：

查看类似问题，我意识到可能的解决方案是使用 MutationObservers，但我的用例似乎增加了更多复杂性。

飞镖代码：

class MyModel extends Object with Observable {
@observable num x = 0;
List list = toObservable([]);
}

void main() {

  initPolymer().run(() {
      Polymer.onReady.then((_) {
        var template = querySelector("#bindValueTemplate");
        var model = template.model = new MyModel();

         var tbl = querySelector("#viewtbl");

         new Timer.periodic(new Duration(seconds: 1), (_) {
          tbl.children.clear();
          model.x += 1;
          model.list.add(model.x);
          return model.x;
        });
     });
  });

}

HTML 代码：

<body> 
<template id="bindValueTemplate" is="auto-binding-dart">

<p>x = {{ x }}</p>
<ul>
  <template repeat ="{{item in list}}">
    <li>list item = {{item}}</li>
  </template>
</ul>   

<table class="table" id="viewtbl">
  <tr>
    <td>67</td>
    <td>b9</td>
  </tr>
</table>

</template>
</body>

从 dart 代码中可以看出，我想定期删除表 #viewtbl 的子元素（我没有包含应该动态向表添加数据的代码）。但是对于当前的代码，我得到一个异常，因为表变量 (tbl) 始终保持为空。

如果我将表移到“bindValueTemplate”之外，那么 querySelector 会起作用，但我会丢失与该表的数据绑定。

有人可以帮我吗：

一种解决方案，其中我保留了与表元素的 2 路数据绑定以及 querySelector 访问以删除表中的子元素。
如果表在模板内，querySelector 返回 null，但如果表在模板外，则工作正常。

【问题讨论】：

标签： dart polymer dart-polymer

【解决方案1】：

聚合物需要一些空气才能呼吸。当您设置模型时，这并不意味着元素已经创建。我不知道，但我认为这是异步完成的。试试这个方法：

void main() {

  initPolymer().run(() {
    Polymer.onReady.then((_) {
      var template = querySelector("#bindValueTemplate");
      var model = template.model = new MyModel();

      new Future(() { // <== make async to allow Polymer do its async tasks in between
        var tbl = querySelector("#viewtbl");

        new Timer.periodic(new Duration(seconds: 1), (_) {
          tbl.children.clear();
          model.x += 1;
          model.list.add(model.x);
          return model.x;
        });
      });
    });
  });
}

【讨论】：

不工作:(我不知道为什么但shadowdom为空。我试过template.shadowRoot.olderShadowRoot.querySelector('#viewtbl');但template.shadowRoot返回null
shadowDOM/shadowRoot 和它有什么关系？ Shadow DOM 仅在您构建自定义元素（Polymer 元素）时才存在。
查看另一个答案，我认为我需要通过模板的影子 DOM 访问 viewtbl，但不管是否影子 DOM，它都无法找到 viewtbl 元素。使用期货没有帮助。我也尝试在模拟延迟 5 秒后进行查询，但 querySelector 仍然返回 null。
这里对我来说很好用 github.com/dart-lang/core-elements/blob/master/test/…, github.com/dart-lang/core-elements/blob/master/test/…
@Vloz，抱歉耽搁了。我的问题通过将 querySelector 放入一个由 Gunter 回答的 Future 块中简单地解决了。您可以在代码中添加另一个问题，我会尽力提供帮助！

【解决方案2】：

我认为您只需要创建一个实际的聚合物元素。然后您可以使用$ 通过它们在 shadowdom 中的 id 查询元素（这是一张地图）。我也想知道您用于聚合物元素的符号。
原因是querySelector()查询的是常规DOM而不是里面的Shadow DOM。

问候，罗伯特

【讨论】：

谢谢！但我也无法让它与 shadow dom 一起使用。我试过 template.shadowRoot.olderShadowRoot.querySelector('#viewtbl');但 template.shadowRoot 返回 null