Каков наилучший способ получить объект Custom Element для условных элементов

Question

Использование полимерного дротика Мне часто нужно получить объект Polymer-Element за одним из дочерних элементов.

ButtonElement nextButton; 

void inserted() 
{ 
    //Get hold of the elements 
    nextButton = shadowRoot.query('#nextButton'); 
    //Do some thing useful with nextButton 
} 

<template if="{{emailValid}}"> 
    <button id="nextButton" on-click="nextStep"> 
</template> 

Это прекрасно работает. Однако, если в этом случае nextButton находится под условным шаблоном, его не является частью DOM при вставке(), и поэтому не найден. Есть ли другой способ завладеть им?

В противном случае мне нужно будет определить, как будет отображаться этот условный шаблон и захватить его.

Answer 1

Это может зависеть от того, что именно «делает что-то полезное с помощью nextButton» означает, но политический способ достижения этого - это, как правило, инкапсулировать любое многоразовое поведение вместе с DOM, в котором он работает. То есть, вместо того, чтобы в том числе код для работы на #nextButton в методе ограждающих элемента inserted, создать новый пользовательский элемент, давайте назовем его super-button и поместить соответствующий код в super-button «s ready или inserted метода.

Затем, если вы обнаружите какое-либо поведение, которое действительно должно быть за пределами super-button, следуйте той же схеме, что и обработчик on-click, который вы используете выше. У super-button огня custom event в нужное время, а затем декларативна карта обработчика к этому событию:

<template if="{{emailValid}}"> 
    <super-button on-click="nextStep" on-my-special-event="mySpecialEventHandler"></super-button> 
</template>