In polymer dart, what are the ways to communicate from parent to child component? - dart

Question

In order to communicate from child to parent, events seem to be the most elegant way.
What are the options to communicate from parent to child?
More specifically, I want a method called in a child when it becomes visible.
These are the ideas I came up with:
xtag - elegant and works
observing 'hidden' - didn't manage to get this working, hidden is not marked as observable in Element
publishing a trigger variable in child, binding and changing it in parent - ugly
Are there any other options?

Answer 1

I have not tried it yet but maybe MutationObserver does what you want.
Seth Ladd's polymer examples containes two examples:
The first listens to the onMutation event
https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/onmutation-mutation-observer/my_element.dart
library my_element;
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:async';
#CustomTag('my-element')
class MyElement extends PolymerElement {
MyElement.created() : super.created() {
// NOTE this only fires once,
// see https://groups.google.com/forum/#!topic/polymer-dev/llfRAC_cMIo
// This is useful for waiting for a node to change in response
// to some data change. Since we don't know when the node will
// change, we can use onMutation.
onMutation($['list']).then((List<MutationRecord> records) {
$['out'].text = 'Change detected at ${new DateTime.now()}';
});
new Timer(const Duration(seconds:1), () {
$['list'].children.add(new LIElement()..text='hello from timer');
});
}
}
the second example uses the MutationObserver class
https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/mutation_observers/my_element.dart
=== edit ===
Have you tried the linked example?
The observe method allows to specify what should be observed:
/**
* Observes the target for the specified changes.
*
* Some requirements for the optional parameters:
*
* * Either childList, attributes or characterData must be true.
* * If attributeOldValue is true then attributes must also be true.
* * If attributeFilter is specified then attributes must be true.
* * If characterDataOldValue is true then characterData must be true.
*/
void observe(Node target,
{bool childList,
bool attributes,
bool characterData,
bool subtree,
bool attributeOldValue,
bool characterDataOldValue,
List<String> attributeFilter}) {

Answer 2

To communicate from parent polymer to child polymer , this solution works good for me.
If we have a child polymer element like this:
library my_element;
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:async';
#CustomTag('my-element')
class MyElement extends PolymerElement {
MyElement.created() : super.created() {
}
myCustomMethod(param){
print("pass-in param = $param");
}
}
To access to your child element from parent:
Query your child polymer element in parent element (yes, access to the HTML element first)
Cast it to the binding Class (ex: MyElement.dart in our case)
(theParentClass.querySelector("my-element") as MyElement).myCustomMethod({"done":true});