ポリマーが表示されていないときにページを非アクティブにする

Question

ポリマーcliのポリマーアプリケーションの引き出しテンプレートを使用しています。

私はいくつかの問題を抱えている：

1. 新しいページをロードすると、html要素がインポートされます。コードが実行されます
2. 別のページに移動すると、前のページのコードがまだ実行されています。

ページ/要素を破棄して作成したり、中断して有効にする方法はありますか？

この問題に対処するベストプラクティスは何ですか？

ページを作成して破壊するメソッドを実装し、ページを変更するときに呼び出しますか？

すなわち

oldPageElement.destroy(); 
newPageElement.create(); 



Polymer({ 
    is: 'my-random-page', 
    behaviors: [MyBehaviors.CommonPageBehavior], 


/** 
    * @override 
    */ 
    create: function() {..} 



/** 
    * @override 
    */ 
    destroy: function() {..} 

}) 

Answer 1

あなたが実際に複雑な何かを実装する必要はありませんが、単なるdom-ifを使用しています。プロトタイプの作業

：あなたが見ることができるようにhttp://jsbin.com/gezihatera/edit?html,console,output

は、「ビュー1は、」再選択するときは常に再スタンプされたカスタムページ要素を、使用しています。他のページは普通のdiv要素です。これは最小限のプロトタイプであるためです。しかし、これはまた、あなたが選択したページを再選択したり、選択したりすることができないことを示しています。

本質は以下の通りです：あなたはtrueにrestamp属性を設定している場合dom-ifドキュメントごとに、その後、dom-ifは常にそれらの選択を解除/選択すると、あなたのページを作成して破壊します。これはコンソールで見ることができます。ここではreadyの要素にsample-page readyを表示しています。また、指定されたページが実際に選択されているかどうかを比較するのに役立つヘルパー関数_equalsを作成します。

<dom-module id="sample-app"> 
    <template> 
     <style> 
      :host { 
       display: block; 
      } 
     </style> 

     <iron-selector selected="{{page}}" attr-for-selected="name"> 
      <a name="view1" href="#">View One</a> 
      <a name="view2" href="#">View Two</a> 
      <a name="view3" href="#">View Three</a> 
     </iron-selector> 

     <iron-pages role="main" selected="[[page]]" attr-for-selected="name"> 
      <template is="dom-if" if="[[_equals(page, 'view1')]]" restamp="true"> 
       <sample-page name="view1">view1</sample-page> 
      </template> 
      <div name="view2">view2</div> 
      <div name="view3">view3</div> 
     </iron-pages> 
    </template> 
    <script> 
     Polymer({ 
      is: 'sample-app', 
      _equals: function(a, b) { 
       return a == b; 
      }, 
     }); 
    </script> 
</dom-module> 

とサンプルページのコード：

<dom-module id="sample-page"> 
    <template> 
     <style> 
      :host { 
       display: block; 
      } 
     </style> 

     <content></content> 
    </template> 
    <script> 
     Polymer({ 
      is: 'sample-page', 
      ready: function() { 
       console.log('sample-page ready'); 
      }, 
     }); 
    </script> 
</dom-module> 

が、これはあなたの質問を満たしていると思います。私は、アプリのコードを貼り付けてみましょう、まとめると

注：あなたはがdom-if自体にname属性を置くのではなく、その内容（私がやったのと同じ方法）の上にはいけません。

Answer 2

私は@ alescのdom-ifを実装した後、私の解決策を投稿して、要素を無効にするようにします。

// after a successful importHref, _pageLoaded is called. 
_pageLoaded: function(pageName) { 
    var name = 'my-' + pageName; 
    this.async(function() { 
    // async to wait for element restamping, if done 
    var pages = this.$.pages; 
    var page = pages.querySelector(name); 
    page.load() 
    .then(page.isAuthorized.bind(this)) 
    .catch(this._catchPageIsAuthorizedError.bind(this)) 
    .then(this._shouldSetPage.bind(this, pageName)); 
    }.bind(this)); 
}