Question

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

Dart代码：

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 code：

<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）始终为null。

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

有人可以帮助我：

我保留与表元素的2路数据绑定以及querySelector访问权限以将子元素删除到表的解决方案。
如果table在模板内部，则querySelector返回null的原因是，如果table在模板外部，则会起作用。

Answer 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;
        });
      });
    });
  });
}

Answer 2

我认为你只需要创造一个实际的聚合物元素。然后你可以使用$通过shadowdom中的id来查询元素（这是一张地图）。我也想知道你用于聚合物元素的符号。
原因是querySelector（）查询常规DOM而不是内部的Shadow DOM。

此致罗伯特

无法使用Dart-Polymer中的auto-binding-dart模板中的选择器进行查询

2 个答案: