Finding the element associated with a particular instance of dom-repeat

被刻印的时光 ゝ 提交于 2019-12-11 05:01:56

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!