聚合物停用頁面時，他們不在視圖中

Question

我使用聚合物cli聚合物應用抽屜模板。

我遇到一些麻煩：

1. 當加載了新的一頁，html元素是進口的;那麼它的代碼執行
2. 當我移動到另一頁時，上一頁的代碼仍在運行。

有沒有辦法銷燬和創建頁面/元素或暫停和啓用？

處理這個問題的最佳做法是什麼？

頁面是否實現了create和destroy方法，並在更改頁面時調用它？

即

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

正如你可以看到，「查看一號」使用自定義的頁面元素，重新選擇時總是restamped。其他頁面是普通的div元素，因爲這只是一個最小的原型。但是這也表明你可以有選擇地選擇哪些頁面被重新打包，哪些不打印（如果你不總是需要的話）。

的實質是：按dom-if文件，如果你的restamp屬性設置爲true，那麼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> 

希望這滿足你的問題。

注意：你應該不把name屬性上dom-if本身，而是在它的內容（方法同我一樣）。

Answer 2

以爲我會在實現@ alesc的dom後發佈我的解決方案 - 如果要讓元素停用。

// 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)); 
}