Полимерные дезактивирующие страницы, когда их нет в поле зрения

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

Как вы можете видеть, «View One» использует пользовательский элемент страницы, который всегда сменены отметки при повторном выбран. Другие страницы - обычные элементы div, так как это всего лишь минимальный прототип. Но это также показывает, что вы можете выборочно выбирать, какие страницы получить restamped, а какие нет (если вам это не всегда нужно).

Суть заключается в следующем: согласно dom-if документации, если вы установите атрибут restamp в true, то dom-if всегда будет создавать и уничтожать ваши страницы при выборе/отменив их. Вы можете увидеть это в консоли, где я печатаю sample-page ready на каждый элемент 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-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)); 
}