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.
2 answers
solution1
2 ACCPTED 2014-08-30 08: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;
});
});
});
});
}
solution2
1 2014-08-30 06:07:07
I think you only have to create an actual polymer element. And Then you can use
$to query for elements via their ids in the shadowdom (it's a map). I am also wondering about the notation you are using for your polymer element.The reason is that querySelector() queries the regular DOM not the Shadow DOM inside .
Regards, Robert
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.