폴리머 2 - 철자/철제 선택기를 통해 요소가 표시 될 때마다 작업 수행

Question

해당 요소가 DOM에 한 번 첨부 된 후에도 작동하는 로그 아웃 페이지를 만들려고합니다. 이것은 로그인 한 다음 로그 아웃 한 다음 다시 로그인하고 다시 로그 아웃하려고 할 때 발생합니다.

예를 들어, 쉘은 나는 또한 셸에서 페이지 변경에 대한 관찰자가

<iron-selector selected="[[page]]" attr-for-selected="name"> 
    <a name="logout" href="[[rootPath]]logout"> 
    <paper-icon-button icon="my-icons:sign-out" title="Logout" hidden$="[[!loggedIn]]"></paper-icon-button> 
    </a> 
    <a name="login" href="[[rootPath]]login"> 
    <paper-icon-button icon="my-icons:sign-in" title="Login" hidden$="[[loggedIn]]"></paper-icon-button> 
    </a> 
</iron-selector> 

<<SNIP>> 

<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404" role="main"> 
    <my-search name="search"></my-search> 
    <my-login name="login"></my-login> 
    <my-logout name="logout"></my-logout> 
    <my-view404 name="view404"></my-view404> 
</iron-pages> 

있습니다

static get observers() { 
    return [ 
    '_routePageChanged(routeData.page)', 
    ]; 
} 

_routePageChanged(page) { 
    this.loggedIn = MyApp._computeLogin(); 
    if (this.loggedIn) { 
    this.page = page || 'search'; 
    } else { 
    window.history.pushState({}, 'Login', '/login'); 
    window.dispatchEvent(new CustomEvent('location-changed')); 
    sessionStorage.clear(); 
    this.page = 'login'; 
    } 
} 

이 내가 그것을 로그 아웃 아이콘을 클릭 때와 같이 잘 작동 my-logout 요소가 잘 붙어 있으며 ready() 또는 connectedCallback()의 정보를 잘 처리합니다.

my-logout 브라우저를 새로 고침하고 DOM 새로 고침을 유발하지 않고, 당신이 다시 로그인하고 두 번째 시간을 로그 아웃 할 때, 문제는 오는

ready() { 
    super.ready(); 
    this._performLogout(); 
} 

있습니다. DOM이 지워지지 않았으므로 my-logout이 여전히 첨부되어 있으므로 ready()도 아니고 connectedCallback()도 실행되지 않습니다.

나는이 문제를 해결하기위한 방법을 알아 냈지만, 매우 힘이 빠져 들었다. 내가 말했듯이

ready() { 
    super.ready(); 
    this._performLogout(); 

    document.addEventListener('iron-select', (event) => { 
    if (event.detail.item === this) { 
     this._performLogout(); 
    } 
    }); 
} 

를 작동,하지만 난 글로벌 이벤트 리스너를 가진 싫어하는 플러스 내가 전화를해야 : 기본적으로 아이콘을 선택하면, 나는 this._performLogout();을 수행 할 요소에 이벤트 리스너를 추가 할 수 있습니다 요소가 처음으로 연결될 때 로그 아웃 기능 및 처음으로 요소가 연결될 때까지 청취자가 활성 상태가 아니기 때문에 나는 청취해야합니다.

Answer 1

"one size is all"해결책이 여기에 표시되지 않습니다. 핵심 질문은 "부모가 자녀에게 말하고 싶습니까? 아니면 자녀가 부모에게 귀 기울 이길 원하십니까?"입니다. 부모님의 말을 듣고 싶다면 질문에 나온 "대답"이 효과가 있지만 글로벌 이벤트 리스너에 대한 아이디어가 마음에 들지 않으므로 아래에서 사용 방법은 <iron-pages>에서 까지 자식 요소 보기 위해 선택되었습니다.

우리는 <iron-pages>에 selected-attribute 속성을 추가 :이

<iron-pages selected="[[page]]" attr-for-selected="name" selected-attribute="selected" fallback-selection="view404" role="main"> 
    <my-search name="search"></my-search> 
    <my-login name="login"></my-login> 
    <my-logout name="logout"></my-logout> 
    <my-view404 name="view404"></my-view404> 
</iron-pages> 

네,이 attr-for-selected 특성을 고려하여 약간의 혼란을 보인다. attr-for-selected은 "이 속성에 어떤 속성을 적용해야합니까? 내 selected 속성 값이 무엇입니까?" 내가

<iron-selector selected="[[page]]" attr-for-selected="name"> 
    <a name="logout" href="[[rootPath]]logout"><paper-icon-button icon="my-icons:sign-out" title="Logout" hidden$="[[!loggedIn]]"></paper-icon-button></a> 
</iron-selector> 

클릭하면 그래서 선택한 요소로 내부적으로 <my-logout>을 설정하고 표시됩니다. selected-attribute="selected"이 수행하는 작업은 하위 요소에 대한 속성을 으로 설정하는 것입니다.브라우저 JS 콘솔에서 보면, 우리는 변화

static get properties() { 
    return { 
    // Other properties 
    selected: { 
     type: Boolean, 
     value: false, 
     observer: '_selectedChanged', 
    }, 
    }; 
} 

_selectedChanged(selected) { 
    if (selected) { 
    this._performLogout(); 
    } 
} 

if 문를 확인하는 <my-logout> 요소한다는 점에서 관찰자를 정의 할 수 있습니다

<my-login name="login"></my-logout> 
<my-logout name="login" class="iron-selected" selected></my-logout> 

같은 요소가 지금 보이는 것을 볼 수 있습니다 우리가 떠날 때가 아니라, 우리가 전시 될 때 우리는 단지 논리를 발사하기위한 것입니다. 이것의 한가지 장점은 엘리먼트가 DOM에 이미 첨부되어 있는지 아닌지 신경 쓰지 않는 것이다. <iron-selector>/<iron-pages>이 처음으로 <my-logout>을 선택하면 속성이 설정되고 요소가 연결되고 관찰자가 실행되면 관찰자는 이 이제 true (정의 된 false과 반대)임을 확인하고 논리를 실행합니다.