查找与 dom-repeat 的特定实例关联的元素 [英] Finding the element associated with a particular instance of dom-repeat

问题描述

我有一个自定义元素，可以在页面上生成一个大的月历.这是用一对嵌套的 dom 创建的，外层重复提供每月的每周，内层提供一周内的天数.最初这开始时相当空，但随后 ajax 请求返回填充模型的数据，每天提供更多的数据.当用户单击某一天时，我将(刚刚开始实施它)打开一个对话框，其中包含有关该特定日期的更多信息.我可以将此对话框放在适当的日期旁边，因为点击事件将点击的目标作为属性，并且我可以将其传递给纸张对话框的 positionTarget 属性.我在其他地方做过这个，效果很好.

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.

在这种特殊情况下，可以通过 url 中的可选参数选择特定日期，由 app-route 解析.因此，我还想在输入特定 url 时打开正确定位的对话框.

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.

推荐答案

事实证明，解决这个问题的方法相对简单.

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();

这篇关于查找与 dom-repeat 的特定实例关联的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！