Полимерный автоматический node поиск с динамическим значением id

Как я могу получить доступ к 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
    }
});

Ответы

Ответ 1

Верно, что хэш-код 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').

Ответ 2

Вы можете использовать $ как хэш:

id = 'computed_element_id';
this.$[id];

Ответ 3

Полимер предоставляет метод для этого (источник):

Чтобы найти динамически созданные узлы в локальном DOM элемента, используйте метод $$:

this.$$(selector)

$$ возвращает первый node в локальной DOM, который соответствует селектору.

В вашем случае это должно работать:

console.log(this.$$('#' + id));

Ответ 4

В соответствии с этот документ в Polymer 2.x $$ не поддерживается, поэтому используйте this.shadowRoot.querySelector.

console.log(this.shadowRoot.querySelector('#' + id));

Если вы используете Polymer 1.x, вы можете использовать $$.