Unable to query with selectors inside auto-binding-dart templates in Dart-Polymer

Question

Looking at similar issues, I realize a possible solution is to use MutationObservers, but my use-case seems to add more complexity.

Dart code :

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>

As seen in the dart code, I want to delete the child elements of the table #viewtbl periodically (I have not included the code which is supposed to add data to the table dynamically). But with the current code, I am getting an exception as the table variable (tbl) remains null always.

If I move the table outside of the "bindValueTemplate", then the querySelector would work, but I would lose data binding with that table.

Can someone please help me with :

A solution where I retain 2 way data binding with table elements alongwith querySelector access to delete child elements to table.
The reason why is querySelector returning null if table is inside template, but works if table is outside template.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-08-30T08:04:49

Polymer needs some air to breathe. When you set the model this doesn't mean that the elements are already created. I don't know but I assume this is done async. Try it this way:

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

Unable to query with selectors inside auto-binding-dart templates in Dart-Polymer

2 Answers