Как я могу получить доступ к node, которые имеют динамическое значение id, используя Polymer node для поиска по id?
Например
<template>
<div id="{{ id }}"></div>
</template>
и в js
Polymer("my-element", {
ready: function() {
if (!this.id) {
this.id = 'id' + (new Date()).getTime();
}
console.log(this.$.id); // this part needs to find my div element
}
});
Верно, что хэш-код JavaScript может быть доступен с использованием либо точечной ., либо массива []. Если у вас есть буквальное имя, вы можете использовать точечную нотацию this.$.some_id. Если у вас есть косвенность, например this.id = 'some_id', вы можете использовать нотацию массива this.$[this.id], чтобы найти то же самое значение.
Сложная часть состоит в том, что Polymer заполняет массив $ после первого штамповки шаблона, который происходит до ready. Если у вас была внешняя привязка к this.id, this.$.[this.id] будет работать, но поскольку вы устанавливаете this.id в ready, это слишком поздно для удобства $.
В этом случае вы можете напрямую обратиться к теневому роботу:
this.shadowRoot.querySelector('#' + this.id)
Pro tip: в какой-то момент подкласс может предоставить новый шаблон, и в этом случае this.shadowRoot укажет на новый теневой корень, а не на версию суперкласса. По этой причине лучше всего установить именованный div, с которым вы можете запросить запрос, например. this.$.id_div.querySelector('#' + this.id').
Вы можете использовать $ как хэш:
id = 'computed_element_id';
this.$[id];
Полимер предоставляет метод для этого (источник):
Чтобы найти динамически созданные узлы в локальном DOM элемента, используйте метод $$:
this.$$(selector)
$$возвращает первый node в локальной DOM, который соответствует селектору.
В вашем случае это должно работать:
console.log(this.$$('#' + id));
В соответствии с этот документ в Polymer 2.x
$$не поддерживается, поэтому используйтеthis.shadowRoot.querySelector.
console.log(this.shadowRoot.querySelector('#' + id));
Если вы используете Polymer 1.x, вы можете использовать $$.