聚合物在不可见时停用页面

Question

我正在使用 polymer cli 中的 polymer 应用程序抽屉模板。

我遇到了一些问题：

加载新页面时，会导入 html 元素；然后它的代码执行
当我移动到另一页时，上一页的代码仍然是运行。

有没有办法销毁并创建 page/element 或暂停并启用？

处理此问题的最佳做法是什么？

页面是否实现了创建和销毁方法并在更改页面时调用它？

即

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 元素，因为这只是一个最小的原型。但这也表明您可以有选择地选择哪些页面被重新标记，哪些不被重新标记（如果您并不总是需要这个）。

本质如下：根据 dom-if 文档，如果您将 restamp 属性设置为 true，那么 dom-if 将始终创建和销毁您的在 selecting/deselecting 上翻页。您可以在控制台中看到这一点，我在每个 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-if 后我会 post 我的解决方案来停用元素。

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

聚合物在不可见时停用页面

Polymer deactivating pages when their not in view

polymer

polymer-1.0

polymer-starter-kit