CODEWITHSUNDEEP
htmldomasynchronousdart
user2407014
user2407014

Reputation: 255

In Dart HOW to query Element in nested template?

I have some nested template in Dart, like below:

<template id="id1">
<template id="id2">
<input type= id={{xxx}}>
</template>
</template>

In this case, how to query the input element? I tried nested Timer.run but it dose not work.

query("#id1").model = xxxx
Timer.run({ query("#id2").model=xxxxx;
   Timer.run({ print(query(xxx));});
});

Dose any one have any suggestion?

Thanks!

========================================================================

Note: The nested template is actually in a table, the codes are below:

    <div style="cursor:crosshair; -webkit-user-select: none; user-select: none;">
    <table id="base_table" style="border-collapse:collapse; position: absolute; top:200px; left:200px; width:800px; height:400px" border="2">
    <template id="table" repeat>  
    <tr>
    <template id={{id}} repeat>  
    <td>  <label style="border:0px; height:18px; width:80px" id={{Cell_ID}}> {{Cell_data}} </label> </td>
    </template>
    </tr>
    </template>
    </div>

Upvotes: 2

Views: 269

Answers (1)

Jenny Messerly
Jenny Messerly

Reputation: 466

Your best bet is to use a MutationObserver:

final observer = new MutationObserver(() {
  ... code here ...

  observer.disconnect();
})..observe(node, childList: true, subtree: true);

Soon, this method will be available in PolymerElement:

onMutation(() => ... code here ...);

It will automatically disconnect the observe, as above. The implementation is straightforward:

void onMutation(Node node, void listener(MutationObserver obs)) {
  final observer = new MutationObserver(() {
    listener(observer);
    observer.disconnect();
  })..observe(node, childList: true, subtree: true);
}

So for your particular example, paste the onMutation function, then write it like this:

var id1 = query("#id1");
id1.model = xxxx
onMutation(id1.parent, (_) {
    var id2 = query("#id2");
    id2.model = xxxxx;
    onMutation(id2.parent, (_) {
      print(query(xxx));
    });
});

Upvotes: 2

Related Questions