问题
I have a custom element that generates a large monthly calendar on the page. This is created with a pair of nested dom-repeats the outer one providing each week of the month and the inner one providing the days within the week. Initially this starts out quite empty, but then a ajax request returns with data which fills in the model, providing considerably more data for each day. When a user clicks on one of the days I will (just started to implement it) open a dialog box with much more information about that particular day. I can position this dialog box just beside the appropriate day because the tap event has the target of the tap as a property, and I can pass that to the positionTarget
property of the paper dialog. I have done this elsewhere and it works a treat.
In this particular case the particular day can be selected by an optional parameter in the url, parsed by app-route
. So I also would like to open the dialog box, positioned correctly, when a particular url is entered.
I can easily locate the underlying record in the model used for the calendar, but the question is how can I locate the element that is associated with a particular part of the model.
回答1:
It turns out the solution to this is relatively easy.
On the element you want to get its instance of expose an attribute that means something, with a value that is unique to each copy of the element. In my case it was "date"
so I had something like (simplified)
<template is="dom-repeat" items="{{week}}" as="day">
<li urlday$="[[day.date]]"> ... </li>
</template>
then in my code to select open the dialog I did
this.$.mydialog.positionTarget = this.$$('[urlday="' + date + '"]');
this.$.mydialog.open();
来源:https://stackoverflow.com/questions/39688132/finding-the-element-associated-with-a-particular-instance-of-dom-repeat