Polymer 2 - 要素がiron-pages/iron-selectorを介して表示されるたびにアクションを実行します。

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 fits 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> 

のように見えることがわかります私たちが去った時ではなく、私たちが表示されたときにのみ論理を発火するようになっています。これの利点の1つは、要素がすでにDOMにアタッチされているかどうかは気にしません。 <iron-selector>/<iron-pages>が最初に<my-logout>を選択すると、属性が設定され、要素が接続され、オブザーバが起動すると、オブザーバはselectedが（falseとは対照的に）trueであると判断し、ロジックを実行します。